pusher之JS文档阅读

特点介绍文档
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";
}
?>