webman/push

webman/push は、無料のプッシュサーバプラグインで、クライアントはサブスクリプションモデルに基づいており、pusher と互換性があります。多くのクライアントがあり、JS、Android（java）、IOS（swift）、IOS（Obj-C）、uniapp、.NET、Unity、Flutter、AngularJS などに対応しています。バックエンドのプッシュ SDK は PHP、Node、Ruby、Asp、Java、Python、Go、Swift などをサポートしています。クライアントにはハートビートと自動再接続機能があり、非常に簡単かつ安定して使用できます。メッセージのプッシュやチャットなど、さまざまなリアルタイム通信シーンに適しています。

プラグインには、ウェブ用の js クライアント push.js および uniapp クライアント uniapp-push.js が含まれており、その他の言語のクライアントは https://pusher.com/docs/channels/channels_libraries/libraries/ からダウンロードできます。

インストール

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' // サブスクリプション認証（プライベートチャンネルのみ）
});
// 仮にユーザー uid は 1 とする
var uid = 1;
// ブラウザが user-1 チャンネルのメッセージをリッスン、すなわちユーザー uid が 1 のユーザーのメッセージ
var user_channel = connection.subscribe('user-' + uid);

// user-1 チャンネルに message イベントのメッセージがある時
user_channel.on('message', function(data) {
    // data はメッセージ内容
    console.log(data);
});
// user-1 チャンネルに friendApply イベントのメッセージがある時
user_channel.on('friendApply', function (data) {
    // data は友達申請に関する情報
    console.log(data);
});

// 群の id は 2 とする
var group_id = 2;
// ブラウザが group-2 チャンネルのメッセージをリッスン、すなわち群 2 のグループメッセージをリッスン
var group_channel = connection.subscribe('group-' + group_id);
// 群 2 に message メッセージイベントがある時
group_channel.on('message', function(data) {
    // data はメッセージ内容
    console.log(data);
});

ヒント
上記の例で subscribe はチャンネルのサブスクリプションを実現し、message friendApply はチャンネル上のイベントです。チャンネルおよびイベントは任意の文字列で、サーバー側で事前に設定する必要はありません。

サーバ推送 (PHP)

use Webman\Push\Api;
$api = new Api(
    // webman 下では直接 config から設定を取得でき、非 webman 環境では手動で相応の設定を書く必要がある
    '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'  => 'こんにちは、これがメッセージ内容です'
]);

プライベートチャンネル

上記の例では、どのユーザーでも 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' // サブスクリプション認証（プライベートチャンネルのみ）
});

// 仮にユーザー uid は 1 とする
var uid = 1;
// ブラウザが private-user-1 プライベートチャンネルのメッセージをリッスン
var user_channel = connection.subscribe('private-user-' + uid);

クライアントがプライベートチャンネル（private- で始まるチャンネル）をサブスクライブすると、ブラウザは ajax 認証リクエストを発起します（ajax アドレスは new Push 時の auth パラメータ設定されているアドレス）。開発者はここで、現在のユーザーがこのチャンネルをリッスンする権限があるかどうかを判断できます。これにより、サブスクリプションの安全性が保証されます。

認証については config/plugin/webman/push/route.php のコードを参照してください。

クライアントプッシュ

上記の例は、クライアントが特定のチャンネルをサブスクライブし、サーバーが API インターフェースを呼び出してプッシュします。webman/push もクライアントから直接メッセージをプッシュすることをサポートしています。

注意
クライアント間プッシュはプライベートチャンネル（private- で始まるチャンネル）のみをサポートし、クライアントは client- で始まるイベントのみをトリガーできます。

クライアントがイベントプッシュをトリガーする例

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"});

注意
上記のコードは全ての（現在のクライアントを除く）private-user-1 をサブスクライブしているクライアントに client-message イベントのデータをプッシュします（プッシュされたクライアントは自分がプッシュしたデータを受け取らない）。

webhooks

webhook はチャンネルのいくつかのイベントを受信するために使用されます。

現在主に 2 つのイベントがあります：

1、channel_added
あるチャンネルにクライアントがオンラインからオフラインに移行する際にトリガーされるイベント、あるいはオンラインイベントです。
2、channel_removed
あるチャンネルの全てのクライアントがオフラインになった場合にトリガーされるイベント、あるいはオフラインイベントです。

ヒント
これらのイベントはユーザーのオンライン状態を維持するのに非常に有用です。

注意
webhook アドレスは config/plugin/webman/push/app.php に設定されています。
webhook イベントの受信処理に関するコードは config/plugin/webman/push/route.php 内のロジックを参考にしてください。
ページをリフレッシュすることによってユーザーが短期間オフラインになることはオフラインとしてカウントされるべきではなく、webman/push は遅延判断を行うため、オンライン/オフラインイベントには 1-3 秒の遅延があることに注意してください。

wss プロキシ（SSL）

https では ws 接続を使用できず、wss 接続を使用する必要があります。この場合、nginx を使用して wss をプロキシできます。設定は次のようになります：

server {
    # .... 他の設定は省略 ...

    location /app/<app_key>
    {
        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;
    }
}

注意上記の設定の <app_key> は config/plugin/webman/push/app.php から取得

nginx を再起動した後は、以下の方法でサーバーに接続します。

var connection = new Push({
    url: 'wss://example.com',
    app_key: '<app_key、config/plugin/webman/push/app.php から取得>',
    auth: '/plugin/webman/push/auth' // サブスクリプション認証（プライベートチャンネルのみ）
});

注意

リクエストアドレスは wss で始まる必要があります。

ポートは記述しないでください。

SSL 証明書に対応するドメイン で接続する必要があります。

push-vue.js 使用説明

1、ファイル push-vue.js をプロジェクトディレクトリにコピーします。例：src/utils/push-vue.js

2、vue ページ内でインポートします。


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

onMounted(() => {
  console.log('コンポーネントがマウントされました') 

  // 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: '/plugin/webman/push/auth' // サブスクリプション認証（プライベートチャンネルのみ）
  });

  // 仮にユーザー uid は 1 とする
  var uid = 1;
  // ブラウザが user-1 チャンネルのメッセージをリッスン、すなわちユーザー uid が 1 のユーザーのメッセージ
  var user_channel = connection.subscribe('user-' + uid);

  // user-1 チャンネルに message イベントのメッセージがある時
  user_channel.on('message', function (data) {
    // data はメッセージ内容
    console.log(data);
  });
  // user-1 チャンネルに friendApply イベントのメッセージがある時
  user_channel.on('friendApply', function (data) {
    // data は友達申請に関する情報
    console.log(data);
  });

  // 群の id は 2 とする
  var group_id = 2;
  // ブラウザが group-2 チャンネルのメッセージをリッスン、すなわち群 2 のグループメッセージをリッスン
  var group_channel = connection.subscribe('group-' + group_id);
  // 群 2 に message メッセージイベントがある時
  group_channel.on('message', function (data) {
    // data はメッセージ内容
    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/