PhoenixのChannels/Presenceについて

サーバーでやること

• Endpointに`socket`のモジュールをリンク
• Socketでルームとしての`channel`やら`transport`をリンク
• Channelでやり取りするメッセージやらJOIN時のふるまいを定義

このあたりはサンプルも山ほどあるしすぐできる。

クライアントでやること

JavaScriptのたったこれだけでできちゃう！

import { Socket } from './phoenix.js';

// サーバー側で指定すればLongPollingにもできる
const socket = new Socket('ws://localhost:4000/socket');
socket.connect();

// `room:`から始まる名前じゃないとダメらしい
const channel = socket.channel('room:xxx');

// 見ての通り受け
channel.on('msg', payload => {
  console.log(payload);
});

// 送りたい時はこれ
channel.push('msg', { body: msg });

// 何はともあれ部屋に入る
channel.join()
  .receive('ok', resp => {
    console.log('Joined successfully', resp);
  })
  .receive('error', resp => {
    console.log('Unable to join', resp);
  });

まあそうですよねという感じ。

サーバーでやること

mix phx.gen.presence

これで`/channels`の下にファイルができる。
そしてこれを、ApplicationのSupervisorにぶら下げて起動するように。

って、↑のコマンドを叩いたら標準出力で教えてくれる。

あとはさっきのChannelsのサンプルに少し足す。

誰が接続してるのかを識別しないといけないので、それを見るように。

# user_socket.ex
def connect(params, socket) do
  {:ok, assign(socket, :user_id, params["user_id"])}
end

ちなみにトークンで接続時に認証かけたいときとかもココに書く。

あとはルーム側。

def join("room:xxx", _params, socket) do
  # これが↓のハンドラに飛ぶ
  send(self(), :after_join)
  {:ok, socket}
end

# ルームに接続した！タイミングのフック
def handle_info(:after_join, socket) do
  push(socket, "presence_state", Presence.list(socket))
  {:ok, _} = Presence.track(socket, socket.assigns.user_id, %{
    online_at: inspect(System.system_time(:seconds))
  })
  {:noreply, socket}
end

サーバーサイドはこれで以上。

クライアントでやること

import { Socket, Presence } from './phoenix.js';

const socket = new Socket('ws://localhost:4000/socket', {
  // 本来はちゃんとした一意に識別するなにか
  params: { user_id: window.location.hash, },
});
socket.connect();

const channel = socket.channel('room:xxx');

// Elixirが関数型な影響で、JavaScriptでもそう書いちゃうらしい
let presences = {};
// 初期の状態はこのイベント（一度きり）
channel.on('presence_state', state => {
  presences = Presence.syncState(presences, state);
  console.log('state', presences);
});
// 以降、なにか差分が出たらこっちのイベント
channel.on('presence_diff', diff => {
  presences = Presence.syncDiff(presences, diff);
  console.log('diff', presences);
});

channel.join()
  .receive('ok', resp => { console.log('Joined successfully', resp); })
  .receive('error', resp => { console.log('Unable to join', resp); });

`presence_diff`では、差分が`{ leaves: {}, joins: {} }`ってな感じで送られてくる。
なので`syncDiff()`に現状とあわせて渡すことで、`presence_state`時と同じようにたたんでくれる。

ちなみに、`Presence.list()`なるメソッドも用意されてる。

// ただfnでイテレートできるだけの関数
Presence.list(presences, fn);

自分たちで差分を管理するぜ！って場合は、`Precense`自体必要ない。
JavaScript側のコードが別に関数型を指向してないときは、なんかココ気持ち悪いな・・ってなる。