Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hotwireで簡単に非同期処理のユーザー通知を作る / broadcast using Turbo
Search
Daichi KUDO
August 07, 2025
1
150
Hotwireで簡単に非同期処理のユーザー通知を作る / broadcast using Turbo
https://roppongirb.connpass.com/event/363297/
Omotesando.rb#112 での発表資料
Daichi KUDO
August 07, 2025
Tweet
Share
More Decks by Daichi KUDO
See All by Daichi KUDO
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.1k
テストライブラリによってコンポーネントテストの実行時間はどう変わるか / component-test-performance-by-library
da1chi
0
93
Blue/Greenデプロイの導入による 運用フローの改善
da1chi
1
1.1k
自作OSSで仕事を楽にする
da1chi
0
63
Featured
See All Featured
Designing for humans not robots
tammielis
254
25k
Writing Fast Ruby
sferik
629
62k
A Modern Web Designer's Workflow
chriscoyier
697
190k
For a Future-Friendly Web
brad_frost
180
9.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Rails Girls Zürich Keynote
gr2m
95
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
It's Worth the Effort
3n
187
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Six Lessons from altMBA
skipperchong
28
4k
Designing Experiences People Love
moore
142
24k
Transcript
Hotwireで実装する非同期処理のユーザー通知 Roppongi.rb#33 Omotesando.rb#112 2025-08-07 @平和不動産
Hotwire(Turbo Stream)を使うことで 簡単に非同期処理のユーザー通知を実現できた ので紹介します
daichi (DAICHI Kudo) 普段は Startup Angular 運営 @da1chi24 所属
• 1000名単位のユーザーに提出物を配信する機能 • 完了まで数分かかるので非同期処理で実行される • 配信処理の進捗をユーザーに通知する 実際に利用したユースケース
• Turbo Streams のビューヘルパー #turbo_stream_from を 利用 • 内部的には Action
Cable で WebSocket を利用し、サーバー からクライアントに通知している • 仕組みや他の機能は話さないので、詳しく知りたい方はこちらの記 事がおすすめです Turbo Streams(WebSocket)|猫でもわ かるHotwire入門 Turbo編 どう実現したのか
• インフラ ◦ Pub/Sub 用の Redis • クライアント ◦ 利用する画面に
turbo_stream_from ヘルパーを設定 • サーバー ◦ Turbo::StreamsChannel で送信(ブロードキャスト) 必要な設定
Action Cable で Redis を設定する config/cable.yml
クライアント(view)でチャンネルを設定する • ストリーム名を指定する • サーバーで同じストリーム名のクライアントに送信する • このヘルパーが読み込まれると WebSocket の接続 の確立とストリームの購読を行う
サーバーからクライアントに送信する • クライアントと同じストリーム名にする
デモ (動画) ref. https://github.com/kudoas/enjoy-hotwire-broadcast
WebSocket を無闇に接続し続けると、問題が発生する可 能性がある • CPUやメモリなどのマシンリソースを使いすぎる • サーバーやロードバランサの同時接続数の上限に抵触す る ユースケースを満たすだけならこれで良いが...
1. 必要なタイミングからWebSocketの接続を確立する 2. 処理終了後に接続を切断する 実際に運用する上で必要なこと
• Turbo Streams のヘルパーは画面単位で接続する • 今回は画面単位ではなく、機能単位の接続を確立したい • Rails のセッションを利用し、ヘルパーの表示・非表示を 出し分けることで操作する
1. 必要なタイミングで接続を確立する
サーバーで session を設定する クライアントで表示・非表示を切り替える
• 一度WebSocketの接続が確立されるとページ遷移し ても、切断されない • Turbo によるページ遷移の際に JavaScript の インスタンスを保持し続ける 2.
利用し終えたら接続を切断する
明示的にWebSocketの接続を切断する クライアントで切断する実装例 ref. Action Cable の概要 \- Railsガイド
• Hotwireを利用することで、サーバーからユーザに通知 を送る実装が簡単にできます • 内部的には Websocket を利用しているので、接続の 確立と切断を最小限に抑えて、リソースを節約する実装 をしましょう まとめ