軽量プロセスと Phoenix LiveView

2024年5月17日（木曜日）に東京浜松町・大門で開催されたElixir/Phoenix入門セミナー（daimon.ex）での発表です。

https://daimon-ex.connpass.com/event/312959/

Transcript

1. 軽量プロセスと Phoenix LiveView daimon.ex 2024-05-17
2. Linuxのプロセス • Linuxのプロセスとは、メモリ上に展開さ れた実行中のプログラムのこと。 • プログラムの本体はストレージ（HDDや SSDなど）に保管されている。 • プログラムが起動されると、プロセスが 生まれる。 • 同一のプログラムに対して複数個のプロ セスが生まれることもある。 プロセス プログラム ストレージ メモリ プロセス コンピューター
3. 仮想マシンBEAM • プログラミング言語Elixirで書かれたプロ グラムが起動されると、それは仮想マシ ンBEAMの中で動く。 • 仮想マシンBEAM自体は、Linuxのプロセ スである。 BEAM Elixirで書かれたプ ログラム ストレージ メモリ BEAM コンピューター プロセス プロセス
4. 軽量プロセス • Elixirの軽量プロセスは、仮想マシン BEAM（＝Linuxプロセス）の内部で生ま れる。 • 軽量（lightweight）と呼ばれる理由： ◦ 生成にかかる時間が短い。 ◦ メモリの使用量が少ない。 BEAM メモリ BEAM コンピューター 軽量プロセス 軽量プロセス
5. 軽量プロセスとLinuxスレッドの違い • Elixirの軽量プロセスは、メモリを共有し ない。 • Linuxスレッドはメモリを共有する。 • 複数のスレッドを利用したプログラミン グ（マルチスレッドプログラミング）で は、初心者泣かせ（難しい）。 • ほぼ同じタイミングで複数のスレッドが 同じメモリの領域に対して読み書きを行 うとき、期待した結果が得られないこと がある。 BEAM メモリ コンピューター 軽量プロセス 軽量プロセス プロセス スレッド スレッド
6. メッセージパッシング • 軽量プロセスは受信箱を持ち、互いの受 信箱に向けてメッセージを送り合うこと ができる（メッセージパッシング）。 • 軽量プロセスは受信箱に届いたメッセー ジを順に処理していく。 • メッセージの処理は逐次処理。先に届い たものの処理が終わるまで、次には進ま ない。排他制御が不要。 軽量プロセス 受信箱 軽量プロセス 受信箱 メッセージ メッセージ BEAM
7. レジストリ • 軽量プロセスが別の軽量プロセスにメッ セージを送るには、宛先のPIDを知る必要 がある。 • 軽量プロセスが自分のPIDに名前を付けて 登録できる場所としてレジストリという 仕組みが用意されている。レジストリ自 体も軽量プロセスである。 • レジストリに名前で問い合わせるとPIDが 得られる。 軽量プロセス 軽量プロセス 受信箱 メッセージ BEAM レジストリ 問い合わせ 登録
8. スーパーバイザー • スーパーバイザーは、複数個の軽量プロ セスの死活監視をして、異常終了したら 再起動を行う。 • Linuxのsystemdのような存在。 • スーパーバイザー自体も軽量プロセス。 軽量プロセス BEAM スーパーバイザー 死活監視 軽量プロセス 死活監視
9. LiveViewは軽量プロセスである • LiveViewを用いたPhoenixアプリケー ションでは、ブラウザ側のLiveSocketオ ブジェクトとサーバー側のLiveView（軽 量プロセス）がWebSocketで接続する。 • ブラウザの数と同じ数のLiveViewが作ら れる。 • LiveSocketオブジェクトはJavaScriptの オブジェクト。 • 両者はWebSocketで接続しているので、 常にどちらの方向に対してもメッセージ を送信できる。 BEAM サーバーコンピューター LiveView （軽量プロセス） ブラウザ LiveView （軽量プロセス） LiveSocket オブジェクト ••• ••• ブラウザ LiveSocket オブジェクト WebSocket 接続 WebSocket 接続
10. LiveViewソケットはアプリケーションの「状態」を持つ • 個々のLiveView（軽量プロセス）は、内 部に「LiveViewソケット」を持つ。 • LiveViewソケットはアプリケーションの 「状態」を保持する。 • アプリケーションの「状態」からブラウ ザの画面を描画するためのHTML文書を生 成できる。 BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 LiveView ソケット
11. 「状態」が変化するとHTML文書の差分情報がブラウザへ • LiveView（軽量プロセス）はLiveViewソ ケットが保持する「状態」が変化する と、HTML文書を再生成し、差分情報を WebSocket接続でブラウザ側へ送信す る。 • ブラウザ側ではLiveSocketオブジェクト が差分情報を受け取って、ブラウザの画 面を更新する。 BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 LiveView ソケット HTML差分情報
12. ブラウザ上で発生したイベントの情報はLiveViewへ • ブラウザ上でマウスクリックなどのイベ ントが発生すると、その情報が websocket接続に乗ってサーバー側に届 き、メッセージとしてLiveViewの受信箱 に入る。 • LiveViewはそのメッセージに応じて、 LiveViewソケットの「状態」を変更す る。 • LiveViewソケットの「状態」が変化する と、HTML文書が再生成され、差分情報が websocket接続に乗ってブラウザ側に届 き、画面が更新される。 BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 LiveView ソケット イベントの情報 受信箱
13. LiveViewから自分自身へ時間差でメッセージを送る • LiveView（軽量プロセス）から自分自身 へメッセージを待機時間指定付きで送る ことができる。 • そのメッセージを受けて行う処理の中で 再び自分自身へメッセージを待機時間指 定付きで送ることもできる。 • これらの機能を用いると、定期的に LiveViewソケットの状態を更新し、その 結果をブラウザの画面に反映させると いった仕組みを構築できる。 BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 LiveView ソケット 受信箱 N秒後
14. Hookオブジェクト • ブラウザとサーバーコンピューターの間 には地理的距離が存在するため、ブラウ ザ上で発生したイベントの情報を LiveViewに送ってから、HTMLの差分情 報を受け取るまでの間に、数百ミリ秒単 位の遅延が生じる。 • ブラウザの画面を更新するのに外部シス テム（データベースサーバーなど）への 問い合わせが不要であれば、JavaScript でHookオブジェクトを記述することによ り、その遅延を回避することができる。 BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 LiveView ソケット Hookオブジェクト Hookオブジェクト
15. LiveViewとReact: 状態を保持する場所が異なる Webアプリケーション サーバーコンピューター ブラウザ React BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 API API ••• HTTP接続 HTML差分情報 JSONデータ 状態 状態 JSONデータ
16. LiveViewとReact: プッシュ型／プル型 Webアプリケーション サーバーコンピューター ブラウザ React BEAM サーバーコンピューター LiveView ブラウザ LiveSocket オブジェクト WebSocket接続 API API ••• HTTP接続 HTML差分情報 JSONデータ 状態 状態 JSONデータ プッシュ プル