Handling WebSockets in Rails + React

By the end of 2022, I was building apps that required real-time updates — chat systems, live notifications, dashboards that updated without refreshing. That’s when I started using WebSockets with Rails (ActionCable) and React.

Why WebSockets?

Traditional HTTP is request/response → the client always asks first.
With WebSockets, the server can push data instantly.

Use cases:

Chat applications
Live notifications (e.g., new order, status updates)
Real-time dashboards
Collaborative tools (documents, whiteboards)

WebSockets in Rails (ActionCable)

Rails has ActionCable built-in, which makes setting up WebSockets simple.

Channel Example

				
					# app/channels/chat_channel.rb
class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel"
  end

  def speak(data)
    ActionCable.server.broadcast("chat_channel", message: data["message"])
  end
end

This defines a ChatChannel where clients can subscribe and send messages.

Connecting from React

In React, I used @rails/actioncable to connect:

				
					import { createConsumer } from "@rails/actioncable";

const consumer = createConsumer("ws://localhost:3000/cable");

const channel = consumer.subscriptions.create("ChatChannel", {
  connected() {
    console.log("Connected to ChatChannel");
  },
  received(data) {
    console.log("New message:", data.message);
  },
  speak(message) {
    this.perform("speak", { message });
  },
});

// Example usage:
channel.speak("Hello, Rails + React!");

Real Example: Notifications

We had a dashboard where users needed instant updates on task status. Instead of polling every 5 seconds, I used:

				
					ActionCable.server.broadcast("notifications_#{user.id}", { text: "Task Completed!" })

And in React:

				
					const notifChannel = consumer.subscriptions.create(
  { channel: "NotificationsChannel", user_id: currentUser.id },
  {
    received(data) {
      alert(data.text);
    },
  }
);

This gave instant notifications with almost no extra load.

Lessons Learned

Use Redis as ActionCable’s backend for scalability.
Authenticate connections → don’t allow anonymous access to private channels.
Handle disconnects gracefully → reconnect if socket drops.
Use WebSockets only where needed → don’t replace every request.

Final Thoughts

WebSockets (ActionCable + React) opened the door for me to build real-time, interactive apps.

By the end of 2022, I was comfortable building chat systems, notifications, and live dashboards. This was a big step from just serving static pages or APIs — it felt like moving from “apps you refresh” to “apps that talk back.”