特點介紹文檔
https://pusher.com/features

Flexible Pub/Sub Messaging 靈活的發布和訂閱消息
即時更新瀏覽器，手機和物聯網設備，簡單的事件API

Live user lists (presence)時時用戶列表
在線頻道能夠實時顯示用戶在線或離線狀態，讓聊天和協作應用程序的開發變得簡單。

Access control/authentication 訪問控制/認證
我們提供了一個安全的機制來控制誰可以訪問給定的渠道，與您現有的認證策略無縫集成。

Integrations
在Slack中獲取警報，在Datadog中將度量指標發送到儀表板等等。

以上蹩腳翻譯，請自行查看文檔

免費服務限制

100個連接，20萬條消息，和無限制的頻道

快速入門

首先需要注冊一個帳號，取得key和ID等消息

前端HTML文件

//引入
<script src="https://js.pusher.com/4.2/pusher.min.js"></script>

創建初始化

var pusher = new Pusher('APP_KEY', {cluster: 'APP_CLUSTER',//創建應用的時候分配的
});

訂閱一個通道channel

var channel = pusher.subscribe('my-channel');

監聽你訂閱的channel事件

channel.bind('my-event', function(data) {alert('An event was triggered with message: ' + data.message);
});

my-event事件名字

Server發布

這里暫時不說使用框架，直接原生，框架后續有文章

composer require pusher/pusher-php-server

新建一個file

<?php
require __DIR__ . '/vendor/autoload.php';$options = array('cluster' => 'ap1','encrypted' => false,//是否使用https，443接口，默認我用的http.所以這個需要設置false);
$pusher = new Pusher\Pusher('0a8d7355056b24XXXX','b0053f60430a34xxxxx','522xxx',$options
);
//發布消息
$data['message'] = 'hello world';
$data['name'] = 'kongqi';
$pusher->trigger('my-channel', 'my-event', $data);

執行這個文件，瀏覽器打開或者是命令執行即可
exp

http://localhost/ww/pusher.php
php -e E:\website\ww\pusher.php

一個快速的消息訂閱和發布就這么簡單啦

通道channels

1、通道類型channel types

a,公共通道public channels
訂閱

var channel = pusher.subscribe(channelName);

退訂

pusher.unsubscribe(channelName);

綁定事件

channel.bind(eventName, callback);var pusher = new Pusher('APP_KEY');
var channel = pusher.subscribe('APPL');
channel.bind('new-price',function(data) {// add new price into the APPL widget}
);

綁定事件上下文

var context = { title: 'Pusher' };
var handler = function(){console.log('My name is ' + this.title);
};
channel.bind('new-comment', handler, context);

解除綁定

channel.unbind(eventName, callback);var pusher = new Pusher('APP_KEY');
var channel = pusher.subscribe('APPL');
var callback = function(data) {};
channel.bind('new-price', callback);// Remove just `handler` for the `new-price` event 刪除剛創建的綁定
channel.unbind('new-price', handler);// Remove all handlers for the `new-price` event 刪除所以這個名字的綁定
channel.unbind('new-price');// Remove all handlers on `channel` 刪除這個通道的所有綁定事件
channel.unbind();

綁定成功監聽

channel.bind('pusher:subscription_succeeded', function() {
});

綁定錯誤監聽，返回HTTP狀態碼
···
channel.bind('pusher:subscription_error', function(status) {
});
···

綁定在客戶端上

pusher.bind(eventName, callback);var pusher = new Pusher('APP_KEY');
var channel1 = pusher.subscribe('my-channel-1');
var channel2 = pusher.subscribe('my-channel-2');
var channel3 = pusher.subscribe('my-channel-3');var eventName = 'new-comment';
var callback = function(data) {// add comment into page};// listen for 'new-comment' event on channel 1, 2 and 3
pusher.bind(eventName, callback);

觸發客戶端事件,返回真假

var triggered = channel.trigger(eventName, data);

b,私有通道 private channels
c,存在在線頻道presence

2、通道命名channel 名字命名約定

頻道名稱只能包括小寫字母，大寫字母，數字和以下標點符號_ - = @ , . ;

### As an example 
foo-bar_1234@=,.;

3、認證通道channel

如果某個頻道已經訂閱，則可以通過pusher.channel按名稱訪問頻道

var channel = pusher.channel(channelName);

連接參數

文檔
https://pusher.com/docs/client_api_guide/client_connect#encrypting-connections

{cluster: 'APP_CLUSTER',encrypted: true, // true/falseauth: {params: { // {key: value} pairsparam1: 'value1',param2: 'value2'},headers: { // {key: value} pairsheader1: 'value1',header2: 'value2'}}
}var pusher = new Pusher('app_key', {auth: {params: {CSRFToken: 'some_csrf_token'}}
});

消息加密

認證簽名
默認是'pusher/auth'

認證發起請求類型
ajax,jsonp

狀態事件

//初始化
initialized
//進行連接
connecting
//連接完成
connected
//連接不可用
unavailable
//連接失敗
failed
//斷開
disconnected

pusher.connection.bind('connected', function() {$('div#status').text('Realtime is go!');
});

state_change 連接狀態改變事件監聽
connecting_in 嘗試重新連接監聽

斷開

···
pusher.disconnect();
···

私人認證訂閱例子

html

Pusher.logToConsole = true;var pusher = new Pusher('0a8d7355056b24b3xxxx', {cluster: 'ap1',encrypted: true,authEndpoint: 'pusher_auth.php',//認證的文件，authTransport:'ajax',//默認使用的，會自動發送socket_id(相當于唯一的用戶ID),channel_name});var channel = pusher.subscribe('private-my-channel');
channel.bind('event', function(data) {console.log(data);alert(data.message);});channel.bind('pusher:subscription_succeeded', function() {console.log('通道成功綁定');});channel.bind('pusher:subscription_error', function() {console.log('通道失敗綁定');});

pusher_auth.php

<?php
require __DIR__ . '/vendor/autoload.php';$options = array('cluster' => 'ap1','encrypted' => false,);$pusher = new Pusher\Pusher('0a8d7355056b24bXXX','b0053f60430a348cXXX','522838',$options);if ( 1 )
{echo $pusher->socket_auth($_POST['channel_name'], $_POST['socket_id']);
}
else
{header('', true, 403);echo "Forbidden";
}
?>

成功會輸出

{"auth":"0a8d7355056b24b3dcd9:9ffdb530fe232145d61ae687258323800353b12e68ba91d2db41010655d26ed3"}

presence channel 認證

html

 // Enable pusher logging - don't include this in productionPusher.logToConsole = true;var pusher = new Pusher('0a8d7355056b24b3dcd9', {cluster: 'ap1',encrypted: true,authEndpoint: 'pusher_auth.php',});var channel = pusher.subscribe('presence-my-channel');
channel.bind('event', function(data) {console.log(data);alert(data.message);});channel.bind('pusher:subscription_succeeded', function(data) {console.log('通道成功綁定');console.log(data);});
channel.bind('pusher:subscription_error', function() {console.log('通道失敗綁定');});

php

<?php
require __DIR__ . '/vendor/autoload.php';$options = array('cluster' => 'ap1','encrypted' => false,);$pusher = new Pusher\Pusher('0a8d7355056b24b3XXX','b0053f60430a348c4XXXa','522838',$options);if ( 1 )
{//echo $pusher->socket_auth($_POST['channel_name'], $_POST['socket_id']);$user=['id'=>1,'name'=>'kongqi'];echo $pusher->presence_auth($_POST['channel_name'], $_POST['socket_id'], $user['id'], $user);
}
else
{header('', true, 403);echo "Forbidden";
}
?>

?

總結

以上是生活随笔為你收集整理的pusher之JS文档阅读的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。