Exploring the Power of Turbo Streams and ActionCable
summary
Builds a real-time tic-tac-toe using Turbo Streams and ActionCable, with turbo frames for local updates and HTML-over-the-wire broadcasts. Demonstrates three incremental constraints: require two players, reject a third connection via a customized ActionCable connection, and end the game on unsubscribe to notify the opponent. Shows broadcasting from models and replacing specific DOM targets, wires cookies for player IDs, and runs the demo live so the game works end to end.
AI-written summary · about
chapters (19)
- 0:00Welcome
- 2:27Speaker and talk story
- 4:32Turbo Streams vs Action Cable
- 6:38WebSockets explained in simple terms
- 8:03Action Cable with WebSockets
- 9:26Turbo Streams magic
- 11:11Tic-Tac-Toe setup
- 13:20Adding players
- 15:30WebSocket client connection
- 17:16Opponent join notification
- 19:42Making moves visible
- 22:32Opponent UI update
- 23:37Two-player limit
- 25:04Action Cable connection custom
- 27:39Player disconnections
- 29:05Game logic channels
- 31:15Game end on leave
- 33:23Live demo
- 35:34Summary
related talks
32mRevisiting the Hotwire Landscape after Turbo 8
34mUnraveling the Cable: How ActionCable works
28mReal-time collaboration with Rails
36mThe pitfalls of realtime-ification
35mThe Action Cable Symphony - An Illustrated Musical Adventure
38mMaking a difference with Turbo
39mActionCable for Not-Another-Chat-App-Please
37mDungeons & Dragons & Rails