[SF Ruby] Presence ain't perfect

Exploring patterns & pitfalls of presence tracking in Ruby on Rails applications with Action Cable and AnyCable.

Transcript

1. PRESENCE AIN'T PERFECT Vladimir Dementyev Evil Martians / AnyCable SF Ruby Feb'25
2. Real-Time Web Applications
3. Real-Time Web Applications with Ruby on Rails
4. Real-Time Web Applications with Ruby on Rails Action Cable Hotwire AnyCable Patterns & Pitfalls Not Coming Soon
5. Real-Time Web Applications with Ruby on Rails Not Coming Soon Patterns & Pitfalls Action Cable Hotwire AnyCable
6. Patterns & Pitfalls evilmartians.com/events/the-pitfalls-of-realtime-ification
7. Patterns & Pitfalls evilmartians.com/events/the-pitfalls-of-realtime-ification
8. Patterns & Pitfalls evilmartians.com/events/the-pitfalls-of-realtime-ification
9. Patterns & Pitfalls evilmartians.com/events/the-pitfalls-of-realtime-ification
10. PRESENCE
11. Presence
12. Presence
13. class OnlineChannel < ApplicationCable::Channel def subscribed stream_from "online" broadcast_to( "online", {user:, event: "join"} ) end def unsubscribed broadcast_to( "online", {user:, event: "leave"} ) end end app/channels/online_channel.rb online_channel.rb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19
14. In the post-ICQ era, multiple sessions (tabs, devices) per user are common
15. class OnlineChannel < ApplicationCable::Channel def subscribed stream_from "online" user.online_sessions.create!(session_id:) broadcast_to("online", {user:, event: "join"}) if user.online_sessions.size.one? end def unsubscribed user.online_sessions.where(session_id:) .delete_all broadcast_to("online", {user:, event: "leave"}) unless user.online_sessions.any? end end app/channels/online_channel.rb online_channel.rb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20
16. class OnlineChannel < ApplicationCable::Channel def subscribed stream_from "online" user.online_sessions.create!(session_id:) broadcast_to("online", {user:, event: "join"}) if user.online_sessions.size.one? end def unsubscribed user.online_sessions.where(session_id:) .delete_all broadcast_to("online", {user:, event: "leave"}) unless user.online_sessions.any? end end app/channels/online_channel.rb online_channel.rb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Problem solved?
17. Web Server Connection Client Socket WebSocket Channel Worker Pool HTTP CLOSE #disconnect #unsubscribed The route of #unsubscribed
18. Web Server Connection Client Socket WebSocket Channel Worker Pool CLOSE #disconnect #unsubscribed The route of #unsubscribed: happy path
19. Web Server Connection Client Socket WebSocket Channel Worker Pool WRITE ERROR #disconnect #unsubscribed The route of #unsubscribed: abnormal closure ping retry retry ~15min unless tcp_retries2 is tuned
20. Web Server Connection Client Socket WebSocket Channel Worker Pool HTTP The route of #unsubscribed: server crash / forceful termination
21. WebSocket The route of #unsubscribed: server crash / forceful termination No #disconnect at all!
22. PRESENCE IN THE WILD
23. stanko.io/tracking-online-presence-with-actioncable-ukEi6sUZ98Bz
24. stanko.io/tracking-online-presence-with-actioncable-ukEi6sUZ98Bz
25. stanko.io/tracking-online-presence-with-actioncable-ukEi6sUZ98Bz
26. stanko.io/tracking-online-presence-with-actioncable-ukEi6sUZ98Bz
27. https://once.com/campfire
28. https://rails.chat
29. Campfire Presence PresenceChannel callbacks (#after_subscribe, #after_unsubscribe) PresenceChannel#refresh (every 50s) Membership#connected_at
30. Presence patterns Channel subscription callbacks Expiration-based presence (#connected_at, Redis sorted sets) Application-level heartbeat (pong, #refresh)
31. Presence patterns Channel subscription callbacks Expiration-based presence (#connected_at, Redis sorted sets) Application-level heartbeat (pong, #refresh) To much cere-meow-ny!
32. PRESENCE IN ANYCABLE
33. https://blog.anycable.io
35. class OnlineChannel < ApplicationCable::Channel def subscribed stream_from "online_users" join_presence( id: user.id, info: {name: user.username} ) end end app/channels/online_channel.rb online_channel.rb 1 2 3 4 5 7 8 9 10 11 12 Online indicators AnyCable Presence API
36. import { Controller } from "@hotwired/stimulus" import cable from "cable" export default class extends Controller { static targets = ["user"]; async connect() { this.channel = cable.subscribeTo("OnlineChannel"); this.channel.on("presence", this.handlePresence); this.userTargets.forEach(this.userTargetConnected); } async userTargetConnected(el) { const presence = await this.channel.presence.info(); if (presence[userId]) { el.classList.add("online"); } } handlePresence(event) { this.userTargets.forEach(el => { if (el.dataset.id === event.id) { el.classList.toggle("online", event.type === "join"); } }); } } app/javascript/controllers/online_controller.js online_controller.js 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Stimulus target callback AnyCable Presence API
37. Pub/sub Engine Presence Engine AnyCable WebSocket AnyCable Presence Rails (AnyCable RPC)
38. Pub/sub Engine Presence Engine AnyCable WebSocket Channel #join_presence AnyCable Presence Rails (AnyCable RPC) SUBSCRIBE join presence subscribe WebSocket WebSocket {type: "join", ...} {type: "join", ...}
39. Pub/sub Engine Presence Engine AnyCable WebSocket AnyCable Presence Rails (AnyCable RPC) presence ping keep-alive AnyCable PONG extension takes care of abnormal closures pong
40. Pub/sub Engine Presence Engine AnyCable WebSocket AnyCable Presence Rails (AnyCable RPC) WebSocket WebSocket {type: "leave", ...} {type: "leave", ...}
41. Pub/sub Engine Presence Engine AnyCable WebSocket AnyCable Presence subscribe
42. Pub/sub Engine Presence Engine AnyCable WebSocket AnyCable Presence presence WebSocket WebSocket {type: "join", ...} {type: "join", ...} join subscribe Client can join presence on his own (no RPC required)
43. HOT- HOTWIRE PRESENCE
44. <turbo-cable-presence-source signed-stream-name="<%= signed_stream_name([channel, :presence]) %>" presence-id="<%= dom_id(user, :presence) %>" ignore-self> <div> <span data-presence-counter>0</span> <div> <div id="<%= dom_id(channel, :presence) %>"> </div> </div> </div> <template> <%= turbo_stream.append dom_id(channel, :presence) do %> <div id="<%= dom_id(user, :presence) %>" class="u-<%=user.color %>"> @<%= user.username %> </div> <% end %> </template> </turbo-cable-presence-source> app/views/channels/_presence.html.erb _presence.html.erb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
45. <turbo-cable-presence-source signed-stream-name="<%= signed_stream_name([channel, :presence]) %>" presence-id="<%= dom_id(user, :presence) %>" ignore-self> <div> <span data-presence-counter>0</span> <div> <div id="<%= dom_id(channel, :presence) %>"> </div> </div> </div> <template> <%= turbo_stream.append dom_id(channel, :presence) do %> <div id="<%= dom_id(user, :presence) %>" class="u-<%=user.color %>"> @<%= user.username %> </div> <% end %> </template> </turbo-cable-presence-source> app/views/channels/_presence.html.erb _presence.html.erb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Custom element similar to Turbo Stream source
46. <turbo-cable-presence-source signed-stream-name="<%= signed_stream_name([channel, :presence]) %>" presence-id="<%= dom_id(user, :presence) %>" ignore-self> <div> <span data-presence-counter>0</span> <div> <div id="<%= dom_id(channel, :presence) %>"> </div> </div> </div> <template> <%= turbo_stream.append dom_id(channel, :presence) do %> <div id="<%= dom_id(user, :presence) %>" class="u-<%=user.color %>"> @<%= user.username %> </div> <% end %> </template> </turbo-cable-presence-source> app/views/channels/_presence.html.erb _presence.html.erb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Special selector to show the total number of present users
47. <turbo-cable-presence-source signed-stream-name="<%= signed_stream_name([channel, :presence]) %>" presence-id="<%= dom_id(user, :presence) %>" ignore-self> <div> <span data-presence-counter>0</span> <div> <div id="<%= dom_id(channel, :presence) %>"> </div> </div> </div> <template> <%= turbo_stream.append dom_id(channel, :presence) do %> <div id="<%= dom_id(user, :presence) %>" class="u-<%=user.color %>"> @<%= user.username %> </div> <% end %> </template> </turbo-cable-presence-source> app/views/channels/_presence.html.erb _presence.html.erb 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Presence info is just a Turbo Action (executed on join)
48. AnyCable Presence No application-level heartbeats and state maintenance logic Minimalistic API (both client and server side) Let the server take care of all the pitfalls!
49. AnyCable Presence API to get presence information from your application Webhooks to get notified of "join"-s and "leave"-s Coming soon
50. Beyond chats
51. THANK YOU docs.anycable.io/edge/anycable-go/presence anycasts-demo.fly.dev Vladimir Dementyev Evil Martians / AnyCable SF Ruby Feb'25