簡介

webman/push 是一個(gè)免費(fèi)的推送服務(wù)端插件，客戶端基于訂閱模式，兼容 pusher，擁有眾多客戶端如JS、安卓(java)、IOS(swift)、IOS(Obj-C)、uniapp、.NET、 Unity、Flutter、AngularJS等。后端推送SDK支持PHP、Node、Ruby、Asp、Java、Python、Go、Swift等?？蛻舳俗詭奶蛿嗑€自動(dòng)重連，使用起來非常簡單穩(wěn)定。適用于消息推送、聊天等諸多即時(shí)通訊場景。

插件中自帶一個(gè)網(wǎng)頁js客戶端push.js以及uniapp客戶端uniapp-push.js，其它語言客戶端在 https://pusher.com/docs/channels/channels_libraries/libraries/ 下載

插件需要webman-framework>=1.2.0

安裝

composer require webman/push

客戶端 (javascript)

引入javascript客戶端

<script src="/plugin/webman/push/push.js"> </script>

客戶端使用(公有頻道)

// 建立連接
var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket地址
    app_key: '<app_key，在config/plugin/webman/push/app.php里獲取>',
    auth: '/plugin/webman/push/auth' // 訂閱鑒權(quán)(僅限于私有頻道)
});
// 假設(shè)用戶uid為1
var uid = 1;
// 瀏覽器監(jiān)聽user-1頻道的消息，也就是用戶uid為1的用戶消息
var user_channel = connection.subscribe('user-' + uid);

// 當(dāng)user-1頻道有message事件的消息時(shí)
user_channel.on('message', function(data) {
    // data里是消息內(nèi)容
    console.log(data);
});
// 當(dāng)user-1頻道有friendApply事件時(shí)消息時(shí)
user_channel.on('friendApply', function (data) {
    // data里是好友申請相關(guān)信息
    console.log(data);
});

// 假設(shè)群組id為2
var group_id = 2;
// 瀏覽器監(jiān)聽group-2頻道的消息，也就是監(jiān)聽群組2的群消息
var group_channel = connection.subscribe('group-' + group_id);
// 當(dāng)群組2有message消息事件時(shí)
group_channel.on('message', function(data) {
    // data里是消息內(nèi)容
    console.log(data);
});

Tips
以上例子中subscribe實(shí)現(xiàn)頻道訂閱，message friendApply 是頻道上的事件。頻道和事件是任意字符串，不需要服務(wù)端預(yù)先配置。

服務(wù)端推送(PHP)

use Webman\Push\Api;
$api = new Api(
    // webman下可以直接使用config獲取配置，非webman環(huán)境需要手動(dòng)寫入相應(yīng)配置
    'http://127.0.0.1:3232',
    config('plugin.webman.push.app.app_key'),
    config('plugin.webman.push.app.app_secret')
);
// 給訂閱 user-1 的所有客戶端推送 message 事件的消息
$api->trigger('user-1', 'message', [
    'from_uid' => 2,
    'content'  => '你好，這個(gè)是消息內(nèi)容'
]);

私有頻道

以上例子里任何用戶都可以通過 Push.js 訂閱信息，如果信息是敏感信息，這樣是不安全的。

webman/push支持私有頻道訂閱，私有頻道是以 private- 開頭的頻道。例如

var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket地址
    app_key: '<app_key>',
    auth: '/plugin/webman/push/auth' // 訂閱鑒權(quán)(僅限于私有頻道)
});

// 假設(shè)用戶uid為1
var uid = 1;
// 瀏覽器監(jiān)聽private-user-1私有頻道的消息
var user_channel = connection.subscribe('private-user-' + uid);

當(dāng)客戶端訂閱私有頻道時(shí)(private-開頭的頻道)，瀏覽器會發(fā)起一個(gè)ajax鑒權(quán)請求(ajax地址為new Push時(shí)auth參數(shù)配置的地址)，開發(fā)者可以在這里判斷，當(dāng)前用戶是否有權(quán)限監(jiān)聽這個(gè)頻道。這樣就保證了訂閱的安全性。

關(guān)于鑒權(quán)參見 config/plugin/webman/push/route.php 中的代碼

客戶端推送

以上例子都是客戶端訂閱某個(gè)頻道，服務(wù)端調(diào)用API接口推送。webman/push 也支持客戶端直接推送消息。

注意
客戶端間推送僅支持私有頻道(private-開頭的頻道)，并且客戶端只能觸發(fā)以 client- 開頭的事件。

客戶端觸發(fā)事件推送的例子

var user_channel = connection.subscribe('private-user-1');
user_channel.on('client-message', function (data) {
    // 
});
user_channel.trigger('client-message', {form_uid:2, content:"hello"});

注意
以上代碼給所有(除了當(dāng)前客戶端)訂閱了 private-user-1 的客戶端推送 client-message 事件的數(shù)據(jù)(推送客戶端不會收到自己推送的數(shù)據(jù))。

webhooks

webhook用來接收頻道的一些事件。

目前主要有2個(gè)事件：

• 1、channel_added
  當(dāng)某個(gè)頻道從沒有客戶端在線到有客戶端在線時(shí)觸發(fā)的事件，或者說是在線事件

• 2、channel_removed
  當(dāng)某個(gè)頻道的所有客戶端都下線時(shí)觸發(fā)的事件，或者說是離線事件

Tips
這些事件在維護(hù)用戶在線狀態(tài)非常有用。

注意
webhook地址在config/plugin/webman/push/app.php中配置。
接收處理webhook事件的代碼參考 config/plugin/webman/push/route.php 里面的邏輯
由于刷新頁面導(dǎo)致用戶短暫離線不應(yīng)該算作離線，webman/push會做延遲判斷，所以在線/離線事件會有1-3秒的延遲。

wss代理(SSL)

https下無法使用ws連接，需要使用wss連接。這種情況可以使用nginx代理wss，配置類似如下：

server {

    # .... 這里省略了其它配置 ...

    location ~ "^/app/[a-zA-Z0-9_-]{16,32}$" {
        proxy_pass http://127.0.0.1:3131;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Real-IP $remote_addr;
    }
}

重啟nginx后，使用以下方式連接服務(wù)端

var connection = new Push({
    url: 'wss://example.com',
    app_key: '<app_key，在config/plugin/webman/push/app.php里獲取>',
    auth: '/plugin/webman/push/auth' // 訂閱鑒權(quán)(僅限于私有頻道)
});

注意

1. 請求地址為wss開頭
2. 不寫端口
3. 必須使用ssl證書對應(yīng)的域名連接

push-vue.js 使用說明

1、將文件 push-vue.js復(fù)制到項(xiàng)目目錄下，如：src/utils/push-vue.js

2、在vue頁面內(nèi)引入

<script lang="ts" setup>
import {  onMounted } from 'vue'
import { Push } from '../utils/push-vue'

onMounted(() => {
  console.log('組件已經(jīng)掛載') 

  //實(shí)例化webman-push

  // 建立連接
  var connection = new Push({
    url: 'ws://127.0.0.1:3131', // websocket地址
    app_key: '<app_key，在config/plugin/webman/push/app.php里獲取>',
    auth: 'https://你的域名.com/plugin/webman/push/auth' // 訂閱鑒權(quán)(僅限于私有頻道)
  });

  // 假設(shè)用戶uid為1
  var uid = 1;
  // 瀏覽器監(jiān)聽user-1頻道的消息，也就是用戶uid為1的用戶消息
  var user_channel = connection.subscribe('user-' + uid);

  // 當(dāng)user-1頻道有message事件的消息時(shí)
  user_channel.on('message', function (data) {
    // data里是消息內(nèi)容
    console.log(data);
  });
  // 當(dāng)user-1頻道有friendApply事件時(shí)消息時(shí)
  user_channel.on('friendApply', function (data) {
    // data里是好友申請相關(guān)信息
    console.log(data);
  });

  // 假設(shè)群組id為2
  var group_id = 2;
  // 瀏覽器監(jiān)聽group-2頻道的消息，也就是監(jiān)聽群組2的群消息
  var group_channel = connection.subscribe('group-' + group_id);
  // 當(dāng)群組2有message消息事件時(shí)
  group_channel.on('message', function (data) {
    // data里是消息內(nèi)容
    console.log(data);
  });

})

</script>

其他客戶端地址

webman/push 兼容pusher，其他語言(Java Swift .NET Objective-C Unity Flutter Android IOS AngularJS等)客戶端地址下載地址：
https://pusher.com/docs/channels/channels_libraries/libraries/