Action Cable for real-time updates in Ruby on Rails - Step-by-Step Execution

Concept Flow - Action Cable for real-time updates

Client connects to WebSocket

↓

Subscribe to a Channel

↓

Server receives subscription

↓

Server streams data to client

↓

Client receives data

↓

Client updates UI in real-time

↓

Client can send data back to server

↓

Server processes and broadcasts updates

This flow shows how a client connects via WebSocket, subscribes to a channel, receives real-time data from the server, updates the UI, and can send data back for broadcasting.

Execution Sample

Ruby on Rails

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_room"
  end

  def receive(data)
    ActionCable.server.broadcast("chat_room", data)
  end
end

This code defines a channel that streams messages to clients subscribed to "chat_room" and broadcasts received messages to all subscribers.

Execution Table

Step	Action	Server State	Client State	Result
1	Client opens WebSocket connection	Waiting for subscription	Connecting	WebSocket connection established
2	Client subscribes to ChatChannel	Subscription registered for chat_room	Subscribed to chat_room	Ready to receive messages
3	Server streams from "chat_room"	Streaming enabled for chat_room	Listening for messages	Client will get broadcasted messages
4	Client sends message {text: "Hi"}	Received message {text: "Hi"}	Message sent	Server prepares to broadcast
5	Server broadcasts {text: "Hi"} to chat_room	Broadcast sent to chat_room subscribers	Received message {text: "Hi"}	Client UI updates with new message
6	Client UI updates with new message	No change	Message displayed in chat window	Real-time update visible
7	Client sends another message {text: "Hello again"}	Received message {text: "Hello again"}	Message sent	Server prepares to broadcast
8	Server broadcasts {text: "Hello again"}	Broadcast sent to chat_room subscribers	Received message {text: "Hello again"}	Client UI updates again
9	Client disconnects WebSocket	Subscription removed	Disconnected	Real-time updates stop

💡 Client disconnects, ending the WebSocket connection and stopping real-time updates

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	After Step 7	After Step 8	Final
WebSocket Connection	Closed	Open	Open	Open	Open	Open	Closed
Subscription Status	None	Subscribed to chat_room	Subscribed	Subscribed	Subscribed	Subscribed	None
Server Broadcast Queue	Empty	Empty	{text: "Hi"}	Empty	{text: "Hello again"}	Empty	Empty
Client Received Messages	[]	[]	[]	[{text: "Hi"}]	[{text: "Hi"}]	[{text: "Hi"}, {text: "Hello again"}]	[{text: "Hi"}, {text: "Hello again"}]

Key Moments - 3 Insights

Why does the client need to subscribe to a channel after opening the WebSocket?

Opening the WebSocket only creates a connection; subscribing tells the server which stream of data the client wants. See execution_table step 2 where subscription registers the client to receive messages.

How does the server send messages to all subscribed clients?

The server uses ActionCable.server.broadcast to send data to the channel's stream. This is shown in execution_table steps 5 and 8 where the server broadcasts messages to all subscribers.

What happens if the client disconnects the WebSocket?

The subscription is removed and the client stops receiving updates. This is shown in execution_table step 9 where the connection closes and real-time updates stop.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. What is the server state after receiving the client's message?

A Broadcast sent to chat_room subscribers

B Received message {text: "Hi"}

C Subscription registered for chat_room

D No change

💡 Hint

Check the 'Server State' column at step 4 in the execution_table.

At which step does the client first receive a message from the server?

A Step 3

B Step 7

C Step 5

D Step 9

💡 Hint

Look for when 'Client Received Messages' changes in variable_tracker and 'Client State' shows receiving a message.

If the client never subscribes to the channel, what will happen?

A Client will not receive any messages

B Client will still receive messages

C Server will broadcast messages anyway

D WebSocket connection will close automatically

💡 Hint

Refer to execution_table step 2 where subscription is required to receive messages.

Concept Snapshot

Action Cable enables real-time updates via WebSockets.
Clients open a WebSocket and subscribe to channels.
Server streams data to subscribed clients.
Clients receive and update UI instantly.
Clients can send data back to server for broadcast.
Disconnecting stops real-time updates.

Full Transcript

Action Cable in Rails allows real-time updates by opening a WebSocket connection between client and server. The client subscribes to a channel to receive streamed data. The server broadcasts messages to all subscribed clients. Clients update their UI immediately when messages arrive. Clients can also send data back to the server, which broadcasts it to others. When the client disconnects, the subscription ends and updates stop.

Practice

1. What is the main purpose of Action Cable in a Rails application?

easy

A. To add real-time features allowing live updates without page reloads

B. To manage database migrations automatically

C. To handle background jobs and scheduling

D. To style the application with CSS frameworks

Solution

1. Step 1: Understand Action Cable's role

   Action Cable integrates WebSockets into Rails to enable live, real-time communication.

2. Step 2: Compare options with Action Cable's purpose

   Only To add real-time features allowing live updates without page reloads describes real-time updates without page reloads, which is what Action Cable does.

3. Final Answer:

   To add real-time features allowing live updates without page reloads -> Option A

4. Quick Check:

   Real-time updates = To add real-time features allowing live updates without page reloads [OK]

Hint: Remember: Action Cable = live updates without refreshing [OK]

Common Mistakes:

• Confusing Action Cable with background job tools
• Thinking it manages database tasks
• Assuming it styles the app

2. Which of the following is the correct way to create a channel subscription in a Rails JavaScript client using Action Cable?

easy

A. App.cable.subscriptions.create('ChatChannel')

B. App.cable.subscribe('ChatChannel')

C. App.cable.connect('ChatChannel')

D. App.cable.open('ChatChannel')

Solution

1. Step 1: Recall Action Cable subscription syntax

   The correct method to subscribe to a channel is using subscriptions.create.

2. Step 2: Match options with correct method

   Only App.cable.subscriptions.create('ChatChannel') uses subscriptions.create('ChatChannel'), which is the correct syntax.

3. Final Answer:

   App.cable.subscriptions.create('ChatChannel') -> Option A

4. Quick Check:

   Subscription method = subscriptions.create [OK]

Hint: Use subscriptions.create to subscribe to channels [OK]

Common Mistakes:

• Using subscribe instead of subscriptions.create
• Using connect or open which are invalid methods
• Missing quotes around channel name

3. Given this channel code in Rails:

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'chat_room'
  end
end

And this JavaScript subscription:

App.cable.subscriptions.create('ChatChannel', {
  received(data) {
    console.log(data.message)
  }
})

What will happen when the server broadcasts { message: 'Hello!' } to 'chat_room'?

medium

A. Nothing will happen because the channel name is incorrect

B. The message 'Hello!' will be logged in the browser console

C. The message will be displayed as an alert popup

D. The server will throw an error due to missing perform method

Solution

1. Step 1: Understand the channel subscription and streaming

   The channel streams from 'chat_room', and the client subscribes to 'ChatChannel' with a received callback logging data.message.

2. Step 2: Analyze the broadcast effect

   When the server broadcasts { message: 'Hello!' } to 'chat_room', the client receives it and logs 'Hello!' to the console.

3. Final Answer:

   The message 'Hello!' will be logged in the browser console -> Option B

4. Quick Check:

   Broadcast to stream triggers received callback = The message 'Hello!' will be logged in the browser console [OK]

Hint: Broadcast to stream triggers received callback logging message [OK]

Common Mistakes:

• Confusing channel name with stream name
• Expecting alert instead of console log
• Thinking server errors without perform method

4. Identify the error in this Action Cable channel code:

class NotificationsChannel < ApplicationCable::Channel
  def subscribed
    stream_from notifications
  end
end

medium

A. The channel class should inherit from ApplicationController

B. The subscribed method is missing a call to reject unauthorized users

C. The stream_from argument should be a string, not a variable

D. The stream_from method is deprecated and should not be used

Solution

1. Step 1: Check the stream_from argument type

   The argument to stream_from must be a string representing the stream name, e.g., 'notifications'.

2. Step 2: Identify the error in the code

   The code uses notifications without quotes, treating it as a variable, which causes an error.

3. Final Answer:

   The stream_from argument should be a string, not a variable -> Option C

4. Quick Check:

   stream_from needs string argument [OK]

Hint: Always quote stream names in stream_from method [OK]

Common Mistakes:

• Forgetting quotes around stream name
• Inheriting from wrong class
• Assuming stream_from is deprecated

5. You want to broadcast a message to all users subscribed to 'notifications' channel whenever a new comment is created. Which code snippet correctly achieves this in Rails?

hard

A. ActionCable.broadcast('notifications', @comment.body)

B. NotificationsChannel.broadcast_to('notifications', { comment: @comment.body })

C. broadcast_to('notifications', { comment: @comment.body })

D. ActionCable.server.broadcast('notifications', { comment: @comment.body })

Solution

1. Step 1: Identify the correct broadcast method

   To send a message to all subscribers of a stream, use ActionCable.server.broadcast(stream, data).

2. Step 2: Analyze options for correct usage

   ActionCable.server.broadcast('notifications', { comment: @comment.body }) uses ActionCable.server.broadcast with stream name and data hash, which is correct.

3. Final Answer:

   ActionCable.server.broadcast('notifications', { comment: @comment.body }) -> Option D

4. Quick Check:

   Broadcast to stream uses ActionCable.server.broadcast [OK]

Hint: Use ActionCable.server.broadcast to send to all subscribers [OK]

Common Mistakes:

• Using broadcast_to without a model instance
• Calling broadcast on ActionCable directly
• Passing data without wrapping in a hash