# 【Elixir】Phoenix push_event を活用してJavaScriptを実行する
> Elixir push_event を活用してJavaScriptを実行する
- Canonical: https://c-a-p-engineer.github.io/elixir-phoenix-push_event/
- Published: 2023-06-26T09:50:00.000Z
- Modified: 2023-06-26T09:50:00.000Z
- Categories: JavaScript, Elixir
- Tags: JavaScript, Elixir, Phoenix

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

## 確認環境
* Elixir 1.14.2
* Phoenix 1.6.3

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

```elixir
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"`イベントを受け取ったときに、メッセージを表示します。

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

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


## 参考
* <a href="https://hexdocs.pm/phoenix_live_view/0.19.3/js-interop.html#handling-server-pushed-events" target="_blank" rel="nofollow noopener">Handling server-pushed events </a>