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
160
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
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
3.1k
テストライブラリによってコンポーネントテストの実行時間はどう変わるか / component-test-performance-by-library
da1chi
0
94
Blue/Greenデプロイの導入による 運用フローの改善
da1chi
1
1.1k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Building an army of robots
kneath
305
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
Designing for Performance
lara
610
69k
A designer walks into a library…
pauljervisheath
209
24k
Building Applications with DynamoDB
mza
96
6.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Git: the NoSQL Database
bkeepers
PRO
431
66k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
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 を利用しているので、接続の 確立と切断を最小限に抑えて、リソースを節約する実装 をしましょう まとめ