How to Pusher

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

Sam Zhong 2015.12.19

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

WebSocket 讓比賽變得不一樣

1.SignalR2.Pubnub3.Pusher4.Node.Js

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

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

Client ： xcode 、 android 、 javascript

達到跨平台 -使用 Pusher

Pusher的運作原理

擁抱 Pusher

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

Pusher Account 內容

1. Pusher Object2. Channel3. Event

Pusher Message 的要素

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

event

在Client 端使用Pusher(三步曲 )

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

Pusher 建立 client 物件

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

pusher.subscribe(‘ChannelName');

Pusher Channel

接收 Channel 提供的 Message ，建立Event

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

Pusher Event

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

Use Debug Console

var presenceChannel = pusher.subscribe(presenceChannelName);

presenceChannel = ‘presence-’ + Channel_Name

取得Channel 訂閱者資訊Precence

var presenceChannel = pusher.subscribe(presenceChannelName);

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

取得Channel 訂閱者資訊Precence

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

})

取得Channel 訂閱者資訊Precence

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

Pusher Send Message On Server

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

Pusher Send Message On Server

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

關於 Pusherhttps://pusher.com/docshttps://pusher.com/tutorialshttps://pusher.com/docs/libraries