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/false
  auth: {
    params: { // {key: value} pairs
      param1: 'value1',
      param2: 'value2'
    },
    headers: { // {key: value} pairs
      header1: '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 production
 Pusher.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";
}
?>