Hotwireで実装する非同期処理のユーザー通知 / broadcast using Turbo

https://roppongirb.connpass.com/event/363297/
Omotesando.rb#112 での発表資料

Transcript

1. Hotwireで実装する非同期処理のユーザー通知 Roppongi.rb#33 Omotesando.rb#112 2025-08-07 @平和不動産
2. Hotwire（Turbo Stream）を使うことで 簡単に非同期処理のユーザー通知を実現できた ので紹介します
3. daichi （DAICHI Kudo） 普段は Startup Angular 運営 @da1chi24 所属
4. • 1000名単位のユーザーに提出物を配信する機能 • 完了まで数分かかるので非同期処理で実行される • 配信処理の進捗をユーザーに通知する 実際に利用したユースケース
5. • Turbo Streams のビューヘルパー #turbo_stream_from を 利用 • 内部的には Action Cable で WebSocket を利用し、サーバー からクライアントに通知している • 仕組みや他の機能は話さないので、詳しく知りたい方はこちらの記 事がおすすめです Turbo Streams（WebSocket）｜猫でもわ かるHotwire入門 Turbo編 どう実現したのか
6. • インフラ ◦ Pub/Sub 用の Redis • クライアント ◦ 利用する画面に turbo_stream_from ヘルパーを設定 • サーバー ◦ Turbo::StreamsChannel で送信（ブロードキャスト） 必要な設定
7. Action Cable で Redis を設定する config/cable.yml
8. クライアント（view）でチャンネルを設定する • ストリーム名を指定する • サーバーで同じストリーム名のクライアントに送信する • このヘルパーが読み込まれると WebSocket の接続 の確立とストリームの購読を行う
9. サーバーからクライアントに送信する • クライアントと同じストリーム名にする
10. デモ　（動画） ref. https://github.com/kudoas/enjoy-hotwire-broadcast
11. WebSocket を無闇に接続し続けると、問題が発生する可 能性がある • CPUやメモリなどのマシンリソースを使いすぎる • サーバーやロードバランサの同時接続数の上限に抵触す る ユースケースを満たすだけならこれで良いが...
12. 1. 必要なタイミングからWebSocketの接続を確立する 2. 処理終了後に接続を切断する 実際に運用する上で必要なこと
13. • Turbo Streams のヘルパーは画面単位で接続する • 今回は画面単位ではなく、機能単位の接続を確立したい • Rails のセッションを利用し、ヘルパーの表示・非表示を 出し分けることで操作する 1. 必要なタイミングで接続を確立する
14. サーバーで session を設定する クライアントで表示・非表示を切り替える
15. • 一度WebSocketの接続が確立されるとページ遷移し ても、切断されない • Turbo によるページ遷移の際に JavaScript の インスタンスを保持し続ける 2. 利用し終えたら接続を切断する
16. 明示的にWebSocketの接続を切断する クライアントで切断する実装例 ref. Action Cable の概要 \- Railsガイド
17. • Hotwireを利用することで、サーバーからユーザに通知 を送る実装が簡単にできます • 内部的には Websocket を利用しているので、接続の 確立と切断を最小限に抑えて、リソースを節約する実装 をしましょう まとめ