how to pusher

20
會會會會會會會 認認 Pusher 認認認認認認認認認 ,。 Sam Zhong 2015.12.19

Upload: sam-zhong

Post on 19-Feb-2017

436 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: How to Pusher

會跳動的討論區認識 Pusher ,讓訊息來的更即時。

Sam Zhong 2015.12.19

Page 2: How to Pusher

可以透過各項裝置,看到陳偉殷每一局的投球內容。開著手機 App ,我可以看到當日 NBA 比賽的即時的賽場資訊

WebSocket 讓比賽變得不一樣

Page 3: How to Pusher

1.SignalR2.Pubnub3.Pusher4.Node.Js

達到訊息非同步推播的方式

Page 4: How to Pusher

Server : .net 、 java 、 python 、 php 、 ruby

Client : xcode 、 android 、 javascript

達到跨平台 -使用 Pusher

Page 5: How to Pusher

Pusher的運作原理

Page 6: How to Pusher

擁抱 Pusher

Page 7: How to Pusher

1. AppID2. AppKey(token)3. Secret(token)

Pusher Account 內容

Page 8: How to Pusher

1. Pusher Object2. Channel3. Event

Pusher Message 的要素

Page 9: How to Pusher

1. 建立 Pusher 物件2. 透過 Pusher 產生 Channel 的訂閱3. 經由 Channel ,處理訊息接收 callback 的

event

在Client 端使用Pusher(三步曲 )

Page 10: How to Pusher

透過 AppKey ,也就是 Client 的 Token ,建立Pusher Objectex:var pusher = new Pusher(‘AppKey', { encrypted: false});

Pusher 建立 client 物件

Page 11: How to Pusher

由前面所建立的 Pusher Object ,產生Listened 的 Channelex:var channel =

pusher.subscribe(‘ChannelName');

Pusher Channel

Page 12: How to Pusher

接收 Channel 提供的 Message ,建立Event

ex: channel.bind(‘EventName', function (data) { SetAdd(data); });

Pusher Event

Page 13: How to Pusher

提供給開發人員,在 Pusher Server 測試訊息傳送與接收,以及觀察各項 Log 資訊

Use Debug Console

Page 14: How to Pusher

var presenceChannel = pusher.subscribe(presenceChannelName);

presenceChannel = ‘presence-’ + Channel_Name

取得Channel 訂閱者資訊Precence

Page 15: How to Pusher

var presenceChannel = pusher.subscribe(presenceChannelName);

在原本的 Channel 名稱前面 加入前置字串:presenceChannel = ‘presence-’ + ChannelName

取得Channel 訂閱者資訊Precence

Page 16: How to Pusher

channel.bind(‘pusher:subscription_succeeded’, function(members) {members.each(function(member) { // forconsole.log(member.id);console.log(member.info);});

})

取得Channel 訂閱者資訊Precence

Page 17: How to Pusher

Pusher 提供各種語言在平台上進行訊息發送,處理方式其實是大同小異,主要需要下列變數建立Server side 的物件 :1. AppID2. AppKey(token)3. SecretKey(token)

Pusher Send Message On Server

Page 18: How to Pusher

以 C# 為例,加入 PusherServer 的參考後即可建立Pusher Object :var pusher = new Pusher(AppID, AppKey, Secret, new PusherOptions() { Encrypted = true });

Pusher Send Message On Server

Page 19: How to Pusher

public void Publish(string channel,string event_name,string name, string message_body){ this.Trigger(channel, event_name, new{

name = name, message = message_body });

}

Pusher Send Message On Server