【Elixir】Phoenix push_event を活用してJavaScriptを実行する

ElixirのPhoenixフレームワークでは、サーバーからクライアントへのイベントをプッシュするためのpush_eventという機能が提供されています。
これを利用することで、サーバー側からクライント側のJavaScriptに対してイベントを発行し、特定の操作を行うことが可能になります。
push_event を活用してJavaScriptを実行してみます。

確認環境

• Elixir 1.14.2
• Phoenix 1.6.3

サーバーサイドのコード

まず、サーバーサイドで push_event を使用してイベントを発行します。
以下の例では、初期表示発の際に、"alert"というイベントをクライアントにプッシュしています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

defmodule SampleWeb.Live.Index do
  use SampleWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {
      :ok,
      |> push_event("alert", %{msg: "テスト"})
    }
  end
end

クライアントサイドのコード

次に、クライアントサイドでpush_eventから発行されたイベントを受け取ります。
以下のJavaScriptコードは、"alert"イベントを受け取ったときに、メッセージを表示します。

1
2
3
4

let liveSocket = new LiveSocket(...);
window.addEventListener(`phx:alert`, (e) => {
  alert(e.detail.msg)
})

このように、Phoenixのpush_eventを使用することで、サーバーからクライアントへの通信が可能になります。

参考

• Handling server-pushed events