Exploring the Power of Turbo Streams & Action Cable | RailsConf2023

&YQMPSJOHUIF1PXFSPG5VSCP 4USFBNT"DUJPO$BCMF

"MBHBËTJB

3VCZPO3BJMT

3VCZPO3BJMT "DUJPO$BCMF

3VCZPO3BJMT "DUJPO$BCMF 5VSCP4USFBNT

5JD 5BD

5JD 5BD 5PF

&YQMPSJOHUIF1PXFSPG5VSCP 4USFBNT"DUJPO$BCMF

8IPBN*

,FWJO-JFCIPM[

,FWJO-JFCIPM[ 4PGUXBSF&OHJOFFS!

,FWJO-JFCIPM[ 'JSTUUBML😱

The Inheritance Cycle by Christopher Paolini

5VSCP4USFBNT "DUJPO$BCMF

5VSCP4USFBNT "DUJPO$BCMF .JTTJOHFYBNQMFT

5VSCP4USFBNT "DUJPO$BCMF .JTTJOHFYBNQMFT 4QBSLJOH*NBHJOBUJPO

*OHSFEJFOUT &YQMPSJOHUIF 5IFPSZ

$POTUSVDUJPO #VJMEJOHUIF (BNF *OHSFEJFOUT &YQMPSJOHUIF 5IFPSZ

*OHSFEJFOUT &YQMPSJOHUIF 5IFPSZ 4QFMM 8BUDIJOHUIF&QJD (BNF $POTUSVDUJPO #VJMEJOHUIF (BNF

*OHSFEJFOUT &YQMPSJOHUIF5IFPSZ

8FC4PDLFUT

SFBMUJNF 8FC4PDLFUT

DMJFOU VT TFSWFS IFBERVBSUFS 8FC4PDLFUT

DMJFOU VT TFSWFS IFBERVBSUFS DMJFOU TDPVU 8FC4PDLFUT

TFSWFS IFBERVBSUFS DMJFOU VT 8FC4PDLFUT

TFSWFS IFBERVBSUFS DMJFOU VT DMJFOU TDPVU 8FC4PDLFUT

"DUJPO$BCMF

"DUJPO$BCMFTFBNMFTTMZ JOUFHSBUFT 8FC4PDLFUT XJUIUIFSFTU PGZPVS3BJMTBQQMJDBUJPO*UBMMPXT GPSSFBMUJNFGFBUVSFTUPCFXSJUUFO JO3VCZJOUIFTBNFTUZMFBOEGPSN BTUIFSFTUPGZPVS3BJMTBQQMJDBUJPO XIJMFTUJMMCFJOHQFSGPSNBOUBOE
TDBMBCMF*UTBGVMMTUBDLPGGFSJOH UIBUQSPWJEFTCPUIBDMJFOUTJEF +BWB4DSJQUGSBNFXPSLBOEBTFSWFS TJEF3VCZGSBNFXPSL:PVIBWF BDDFTTUPZPVSFOUJSFEPNBJONPEFM XSJUUFOXJUI"DUJWF3FDPSEPSZPVS 03.PGDIPJDF

"DUJPO$BCMFTFBNMFTTMZ JOUFHSBUFT 8FC4PDLFUT XJUIUIFSFTU PGZPVS3BJMTBQQMJDBUJPO*UBMMPXT GPSSFBMUJNFGFBUVSFTUPCFXSJUUFO JO3VCZJOUIFTBNFTUZMFBOEGPSN BTUIFSFTUPGZPVS3BJMTBQQMJDBUJPO XIJMFTUJMMCFJOHQFSGPSNBOUBOE
TDBMBCMF*UTBGVMMTUBDLPGGFSJOH UIBUQSPWJEFTCPUIBDMJFOUTJEF +BWB4DSJQUGSBNFXPSLBOEB TFSWFS TJEF3VCZGSBNFXPSL:PVIBWF BDDFTTUPZPVSFOUJSFEPNBJONPEFM XSJUUFOXJUI"DUJWF3FDPSEPSZPVS 03.PGDIPJDF

5VSCP4USFBNT #SPBEDBTUJOH

5VSCP4USFBNT #SPBEDBTUJOH BCTUSBDUUIFBCTUSBDUJPO

5VSCP4USFBNT #SPBEDBTUJOH # app/models/concerns/turbo/broadcastable.rb module Turbo::Broadcastable extend ActiveSupport::Concern module
ClassMethods def broadcast_remove_to # arguments # code end def broadcast_update_to # arguments # code end # even more methods end end UVSCPSBJMTHFN

5VSCP4USFBNT #SPBEDBTUJOH UVSCPSBJMTHFN # lib/turbo/engine.rb initializer "turbo.broadcastable" do ActiveSupport.on_load(:active_record)
do include Turbo::Broadcastable end end

QMVHQMBZ

QMVHQMBZ FBTZUPVTF

QMVHQMBZ FBTZUPVTF BVUPNBUJD%0.VQEBUFT

$POTUSVDUJPO #VJMEJOHUIF(BNF

UJDUBDUPF

HBNF TLFMFUPO

HBNF TLFMFUPO # @name, @character class Player < ApplicationRecord
CHARACTERS = %w[dragon sword].freeze belongs_to :game before_create :assign_character # more code end

HBNF TLFMFUPO # @field1, @field2, …, @field9 class Game
< ApplicationRecord has_many :players end

DPOTUSBJOU

DMJFOUTJOWPMWFE

FGGFDUPGBDUJPO

6*EJGGFSFODFT

QMBZFST BDUJPOPGPQQPOFOU DPOTUSBJOU

DPOTUSBJOU

DPOOFDUTUSFBN OPUJGZPQQPOFOU DPOTUSBJOU

DPOOFDUTUSFBN OPUJGZPQQPOFOU # games/show.html.erb <%= turbo_stream_from @player, "board" %> DPOTUSBJOU

DPOOFDUTUSFBN OPUJGZPQQPOFOU # models/player.rb after_create :notify_opponent private def notify_opponent #
code end DPOTUSBJOU

DPOOFDUTUSFBN OPUJGZPQQPOFOU # models/player.rb after_create :notify_opponent private def notify_opponent broadcast_update_to
[opponent, 'board’], # more to come end DPOTUSBJOU

[opponent, 'board’], # more code end # games/show.html.erb <%= turbo_stream_from @player, "board" %> DPOTUSBJOU

[opponent, 'board’], target: 'board’, # more code end DPOTUSBJOU

[opponent, 'board’], target: 'board’, partial: 'games/board’, # more code end DPOTUSBJOU

[opponent, 'board’], target: 'board’, partial: 'games/board’, locals: { … } # more code end DPOTUSBJOU

[opponent, 'board’], target: 'board’, partial: 'games/board’, locals: { … } broadcast_update_to [opponent, 'board’], target: 'opponent_name’, partial: 'games/opponent_name’, locals: { … } end DPOTUSBJOU

QMBZFST BDUJPOPGPQQPOFOU DPOTUSBJOU

DPOTUSBJOU

GJFME DPOTUSBJOU

# views/games/_field.html.erb <% if # character%> <%= # show character
%> <% else %> <%= form_with model: game do |f| %> <%= f.hidden_field :field_nr, value: field_nr %> <%= f.hidden_field :player_id, value: player.id %> <%= f.submit '' %> <% end %> <% end %> GJFME DPOTUSBJOU

# views/games/_field.html.erb <%= turbo_frame_tag "field#{field_nr}" do %> <% if #
already ticket %> <%= # show character %> <% else %> <%= form_with model: game do |f| %> <%= f.hidden_field :field_nr, value: field_nr %> <%= f.hidden_field :player_id, value: player.id %> <%= f.submit '' %> <% end %> <% end %> <% end %> GJFME DPOTUSBJOU

# controllers/games_controller.rb def update @player = game.players.find(games_params[:player_id]) game.update("field#{games_params[:field_nr]}” # more
code end (BNFT$POUSPMMFS VQEBUF GJFME TVCNJU DPOTUSBJOU

(BNFT$POUSPMMFS VQEBUF GJFME TVCNJU HBNFVQEBUFT DPOTUSBJOU

(BNFT$POUSPMMFS VQEBUF GJFME TVCNJU HBNFVQEBUFT DPOTUSBJOU PXO6*DIBOHFT

# controllers/games_controller.rb def update @player = game.players.find(games_params[:player_id]) game.update("field#{games_params[:field_nr]}” render partial:
‘field', locals: # some locals end (BNFT$POUSPMMFS VQEBUF GJFME TVCNJU DPOTUSBJOU

(BNFT$POUSPMMFS VQEBUF GJFME TVCNJU HBNFVQEBUFT DPOTUSBJOU PXO6*DIBOHFT

(BNFT$POUSPMMFS VQEBUF GJFME TVCNJU HBNFVQEBUFT PQQPOFOU6* DIBOHFT PXO6*DIBOHFT DPOTUSBJOU

# models/game.rb class Game < ApplicationRecord after_update :broadcast_tick_to_opponent def broadcast_tick_to_opponent
# guard for when it was not a field update broadcast_replace_to [player.opponent, 'board’], target: field_tag_id, partial: 'games/opponent_tick’, locals: # some locals end end HBNFVQEBUFT DPOTUSBJOU

(BNFT$POUSPMMFS VQEBUF GJFME TVCNJU HBNFVQEBUFT PQQPOFOU6* DIBOHFT PXO6*DIBOHFT DPOTUSBJOU

PQQPOFOU6* DIBOHFT PXO6*DIBOHFT DPOTUSBJOU

DPOTUSBJOU

DPOTUSBJOU 0/-:QMBZFST

DPOTUSBJOU

DPOTUSBJOU "DUJPO$BCMF$POOFDUJPO

DPOTUSBJOU TFSWFS IFBERVBSUFS DMJFOU VT DPOOFDUJPO

DPOOFDUJPO DPOTUSBJOU TFSWFS IFBERVBSUFS DMJFOU VT

DPOTUSBJOU # controllers/games_controller.rb def show if player cookies[:player_id] =
player.id else # some other code end end

DPOTUSBJOU # channels/application_cable/connection.rb module ApplicationCable class Connection < ActionCable::Connection::Base
def connect player = Player.find_by(id: cookies['player_id’]) reject_unauthorized_connection unless allow?(player) end end end

DPOTUSBJOU

FOEHBNFXIFOQMBZFSMFBWFT

DPOTUSBJOU

DPOTUSBJOU "DUJPO$BCMF$IBOOFM

DPOTUSBJOU TFSWFS IFBERVBSUFS DMJFOU VT DPOOFDUJPO DIBOOFM DIBOOFM DIBOOFM

DPOTUSBJOU # channels/application_cable/channels.rb module ApplicationCable class Channel < ActionCable::Channel::Base
end end

DPOTUSBJOU # channels/turbo/streams_channel.rb class Turbo::StreamsChannel < ActionCable::Channel::Base extend Turbo::Streams::Broadcasts,
Turbo::Streams::StreamName include Turbo::Streams::StreamName::ClassMethods # more code end UVSCPSBJMTHFN

DPOTUSBJOU # channels/turbo/streams_channel.rb class Turbo::StreamsChannel < ActionCable::Channel::Base extend Turbo::Streams::Broadcasts,
Turbo::Streams::StreamName include Turbo::Streams::StreamName::ClassMethods def subscribed if stream_name = verified_stream_name_from_params stream_from stream_name else reject end end end UVSCPSBJMTHFN

DPOTUSBJOU # channels/game_channel.rb class GameChannel < ActionCable::Channel::Base extend Turbo::Streams::StreamName
extend Turbo::Streams::Broadcasts include Turbo::Streams::StreamName::ClassMethods def subscribed # some subscribed logic that turbo wants end end

DPOTUSBJOU

DPOTUSBJOU DPOOFDU

DPOTUSBJOU DPOOFDU (BNF$IBOOFM TVCTDSJCF

DPOTUSBJOU DPOOFDU (BNF$IBOOFM TVCTDSJCF (BNF$IBOOFM TVCTDSJCFE

DPOTUSBJOU DPOOFDU (BNF$IBOOFM TVCTDSJCF (BNF$IBOOFM TVCTDSJCFE MFBWF

DPOTUSBJOU DPOOFDU (BNF$IBOOFM TVCTDSJCF (BNF$IBOOFM TVCTDSJCFE MFBWF (BNF$IBOOFM VOTVCTDSJCF

(BNF$IBOOFM VOTVCTDSJCFE

(BNF$IBOOFM VOTVCTDSJCFE QMBZFS CSPBEDBTU

(BNF$IBOOFM VOTVCTDSJCFE PQQPOFOU6* DIBOHF QMBZFS CSPBEDBTU

DPOTUSBJOU # views/games/show.html.erb <%= turbo_stream_from @player, "board", channel: GameChannel
%>

def connect player = Player.find_by(id: cookies['player_id’]) reject_unauthorized_connection unless allow?(player) end end end

identified_by :player def connect self.player = Player.find_by(id: cookies['player_id’]) reject_unauthorized_connection unless allow?(player) end end end

extend Turbo::Streams::Broadcasts include Turbo::Streams::StreamName::ClassMethods def subscribed # some subscribed logic that turbo wants end end

extend Turbo::Streams::Broadcasts include Turbo::Streams::StreamName::ClassMethods def subscribed # some subscribed logic that turbo wants end def unsubscribed player.broadcast_unsubsciption end end

DPOTUSBJOU # models/player.rb class Player < ApplicationRecord def broadcast_unsubsciption
broadcast_update_to [opponent, 'board’], target: 'board’, html: 'Your opponent left the game. Be careful of surprise attacks’ end end

4QFMM 8BUDIJOHUIF&QJD(BNF

3BJMTJDB

3BJMTJDB 5VSCPSJB

3BJMTJDB 5VSCPSJB 5JDr 5BDr 5PFSJDB

DBTUJOH TVNNBSZ

DBTUJOH TVNNBSZ 8FC4PDLFUT à "DUJPO$BCMF à 5VSCP4USFBN

DBTUJOH TVNNBSZ CBTJDCSPBEDBTUJOH

DBTUJOH TVNNBSZ "DUJPO$BCMF$POOFDUJPOBEBQUJPO

DBTUJOH TVNNBSZ "DUJPO$BCMF$IBOOFMBEBQUJPO

$SFEJUT

,FWJO-JFCIPM[ (JU)VCLFWLFW -JOLFE*OLFWJOMJFCIPM[ 5XJUUFS!,FWJO-JFCIPM[ SVCZTPDJBM!,FWJO-JFCIPM[ IUUQTHJUIVCDPNLFWLFWUVSCPTUSFBNBEWBODFE

(JU)VCLFWLFW -JOLFE*OLFWJOMJFCIPM[ 5XJUUFS!,FWJO-JFCIPM[ SVCZTPDJBM!,FWJO-JFCIPM[ IUUQTHJUIVCDPNLFWLFWUVSCPTUSFBNBEWBODFE 5IF&OE

Exploring the Power of Turbo Streams & Action Cable | RailsConf2023

Exploring the Power of Turbo Streams & Action Cable | RailsConf2023

More Decks by Kevin Liebholz

Other Decks in Programming

Featured

Transcript