Download - How to Pusher
![Page 1: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/1.jpg)
會跳動的討論區認識 Pusher ,讓訊息來的更即時。
Sam Zhong 2015.12.19
![Page 2: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/2.jpg)
可以透過各項裝置,看到陳偉殷每一局的投球內容。開著手機 App ,我可以看到當日 NBA 比賽的即時的賽場資訊
WebSocket 讓比賽變得不一樣
![Page 3: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/3.jpg)
1.SignalR2.Pubnub3.Pusher4.Node.Js
達到訊息非同步推播的方式
![Page 4: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/4.jpg)
Server : .net 、 java 、 python 、 php 、 ruby
Client : xcode 、 android 、 javascript
達到跨平台 -使用 Pusher
![Page 5: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/5.jpg)
Pusher的運作原理
![Page 6: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/6.jpg)
擁抱 Pusher
![Page 7: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/7.jpg)
1. AppID2. AppKey(token)3. Secret(token)
Pusher Account 內容
![Page 8: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/8.jpg)
1. Pusher Object2. Channel3. Event
Pusher Message 的要素
![Page 9: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/9.jpg)
1. 建立 Pusher 物件2. 透過 Pusher 產生 Channel 的訂閱3. 經由 Channel ,處理訊息接收 callback 的
event
在Client 端使用Pusher(三步曲 )
![Page 10: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/10.jpg)
透過 AppKey ,也就是 Client 的 Token ,建立Pusher Objectex:var pusher = new Pusher(‘AppKey', { encrypted: false});
Pusher 建立 client 物件
![Page 11: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/11.jpg)
由前面所建立的 Pusher Object ,產生Listened 的 Channelex:var channel =
pusher.subscribe(‘ChannelName');
Pusher Channel
![Page 12: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/12.jpg)
接收 Channel 提供的 Message ,建立Event
ex: channel.bind(‘EventName', function (data) { SetAdd(data); });
Pusher Event
![Page 13: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/13.jpg)
提供給開發人員,在 Pusher Server 測試訊息傳送與接收,以及觀察各項 Log 資訊
Use Debug Console
![Page 14: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/14.jpg)
var presenceChannel = pusher.subscribe(presenceChannelName);
presenceChannel = ‘presence-’ + Channel_Name
取得Channel 訂閱者資訊Precence
![Page 15: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/15.jpg)
var presenceChannel = pusher.subscribe(presenceChannelName);
在原本的 Channel 名稱前面 加入前置字串:presenceChannel = ‘presence-’ + ChannelName
取得Channel 訂閱者資訊Precence
![Page 16: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/16.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/17.jpg)
Pusher 提供各種語言在平台上進行訊息發送,處理方式其實是大同小異,主要需要下列變數建立Server side 的物件 :1. AppID2. AppKey(token)3. SecretKey(token)
Pusher Send Message On Server
![Page 18: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/18.jpg)
以 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](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/19.jpg)
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
![Page 20: How to Pusher](https://reader031.vdocuments.pub/reader031/viewer/2022021813/58a8ef161a28aba6598b68f7/html5/thumbnails/20.jpg)
關於 Pusherhttps://pusher.com/docshttps://pusher.com/tutorialshttps://pusher.com/docs/libraries