presence-room-42
リアルタイムチャット
presence チャンネル上のルーム、メンバーシップ、入力中の表示。
ユースケース
共同編集のインターフェース
同じものを二人で編集していると、絶えず 3 つの答えが要ります。他に誰がいるか、その人が今何をしたか、カーソルはどこか。presence とイベントとクライアントイベントが順にそれを答えます。
presence-doc-9f2
- presence チャンネル
- クライアントイベント
- イベント
- private-encrypted チャンネル
どう動くか
- 01文書に参加する文書ごとに presence チャンネルを 1 つ。subscribe の時点であなたのサーバーが認可します。
- 02誰がいるかを示すメンバー一覧はサブスクリプションとともに届き、イベントがアイコン表示を正直に保ちます。
- 03意図を配るカーソルと選択範囲はクライアントイベントです。頻度が高く、使い捨てで構いません。
- 04変更を確定する恒久的な編集はあなたのサーバーを通ってから publish されます。そうすれば全員が保存済みの状態に収束します。
知っておきたいこと
クライアントイベントはレート制限があり、保存もされません。カーソル向きであって、編集向きではありません。再読み込みしても残らねばならないものは、あなたのサーバーを通します。
コードで見る
doc.js
js
const doc = pusher.subscribe('presence-doc-9f2')// Ephemeral: straight between editors, never persisted.canvas.onpointermove = throttle((e) => { doc.trigger('client-cursor', { x: e.clientX, y: e.clientY })}, 50)// Durable: your server persisted it, then published it.doc.bind('block-updated', (block) => applyBlock(block))公式の Pusher ライブラリを、手を加えずに使って書いています。インストールする PushCaster 製のパッケージはありません。 ドキュメント全文
ほかにこんなものが作られています
すべてのユースケースprivate-user-1e9
通知
サーバーの 1 つのイベントが、ユーザーが開いているすべての面に届きます。
private-metrics
ライブダッシュボード
ポーリングで取りにいくのではなく、変わったそばから送る。