WebSockets and Action Cable in Rails 5

Ruby on Rails Lisbon meetup. June 6, 2016.

Transcript

1. IMAGINARYCLOUD A C T I O N C A B L E by Mario Cardoso
2. A G E N D A • WebSockets • Action Cable • Why we may need WebSockets • Different solutions • How Action Cable works
3. W E B S O C K E T S
4. "WebSockets are those cool things the Node people get to use, right?” "I heard WebSockets are The Future™"
5. W E B S O C K E T S • WebSockets connections are stateful. • Connection between a client and a server remains constant and connected • Direct interaction between browser and server • Enables simultaneous communication (full duplex)
6. A C T I O N C A B L E
7. A C T I O N C A B L E • Integrated WebSockets for Rails • Real-time features written in Ruby in the same style and form as the rest of the Rails application • Provides both the client-side JS framework and a server-side Ruby framework. • Access to domain model written with Active Record
8. A C T I O N C A B L E • Cable or Connection - single Websocket connection from client to server • Channels - one Cable connection has many Channels • Broadcastings - one Channel can be streaming from zero or more broadcastings • Broadcaster - Action Cable has its own server (we need to run another server process). Uses Redis pubsub functions to keep track of what’s been broadcasted on what cable and to whom.
9. W H Y W E M AY N E E D W E B S O C K E T S
10. P R O B L E M S T H AT M AY N E E D W E B S O C K E T S A S A S O L U T I O N • Clients needs to exchange (send and receive) rapidly data with the server • Streaming • “Live” data or “Live” elements
11. D I F F E R E N T S O L U T I O N S T O T H E S E P R O B L E M S
12. D I F F E R E N T S O L U T I O N S T O T H E S E P R O B L E M S • Polling "Hey! Hey server! You got any new data? Server? SERVER!.”
13. D I F F E R E N T S O L U T I O N S T O T H E S E P R O B L E M S • Polling • Polling involves the client asking the server, on a set interval if there is any new data • The advantage of polling is that it's rock-solid and extremely simple to set up • The disadvantage is that it adds considerable load to the servers • HTTP caching is a very good to alleviate the load, but the server still has to respond to every client every • It is ok for comments sections but not ok for rapid back- and-forth or streaming data
14. D I F F E R E N T S O L U T I O N S T O T H E S E P R O B L E M S • Long-polling • Client sends a request to the server for new data and waits for the server response until they have new data • Falls apart if data changes often • Server-sent Events (SSEs) • One-way connection from the server to the client • Clients can't use SSEs to send data back to the server • Not so well supported (Ex: Heroku and Internet Explorer)
15. H O W A C T I O N C A B L E W O R K S
16. H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E • app/channels • cable • app/assets/javascripts/channels
17. • Channel • Similar role to the controller in a regular MVC setup 
 (like the Rails controllers) • Can be subscribed by multiple clients (consumers) • Each channel can be streaming zero or more broadcastings • A broadcasting is a pubsub link where anything transmitted by the broadcaster is sent directly to the channel subscribers who are streaming that named broadcasting H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
18. • app/channels/application_cable/channel.rb • app/channels/application_cable/connection.rb H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
19. • app/channels/application_cable/connection.rb H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
20. • app/channels/application_cable/channel.rb H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
21. • app/channels/appearance_channel.rb H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
22. • app/channels/room_channel.rb H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E
23. H O W A C T I O N C A B L E W O R K S : S E R V E R S I D E • app/models/message.rb • app/jobs/message_broadcast_job.rb
24. • app/assets/javascripts/cable.coffee • This is the file defines the cable, that creates the connection between client and server 
 H O W A C T I O N C A B L E W O R K S : C L I E N T S I D E
25. H O W A C T I O N C A B L E W O R K S • app/assets/javascripts/channels/appearance.coffee 

26. H O W A C T I O N C A B L E W O R K S • app/assets/javascripts/channels/room_channel.coffee 

27. H O W A C T I O N C A B L E W O R K S
28. Demo