react actioncable websockets rails realtime

WebSocket integration with Action Cable

Maya Patel Jan 2026

3 tabs

import { createConsumer, Cable } from '@rails/actioncable'

let cable: Cable | null = null

export function getCable(): Cable {
  if (!cable) {
    const token = localStorage.getItem('authToken')
    const url = `${import.meta.env.VITE_WS_URL || 'ws://localhost:3000/cable'}?token=${token}`
    cable = createConsumer(url)
  }
  return cable
}

export function disconnectCable() {
  if (cable) {
    cable.disconnect()
    cable = null
  }
}

import { useEffect } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { getCable } from '@/services/cable'

export function useNotifications(userId: string) {
  const queryClient = useQueryClient()

  useEffect(() => {
    const cable = getCable()

    const subscription = cable.subscriptions.create(
      { channel: 'NotificationsChannel', user_id: userId },
      {
        received: (data) => {
          console.log('Received notification:', data)

          // Invalidate notifications query to refetch
          queryClient.invalidateQueries({ queryKey: ['notifications'] })

          // Show toast notification
          window.toast?.info(data.message)
        },
      }
    )

    return () => {
      subscription.unsubscribe()
    }
  }, [userId, queryClient])
}

class NotificationsChannel < ApplicationCable::Channel
  def subscribed
    user = User.find(params[:user_id])
    stream_for user
  end

  def unsubscribed
    stop_all_streams
  end
end

3 files · typescript, ruby Explain with highlit

Real-time features like live notifications or collaborative editing require WebSockets. Rails Action Cable provides a WebSocket server, and the @rails/actioncable client connects from React. I create a singleton cable instance and export subscription functions for different channels. React components subscribe in useEffect and clean up on unmount to prevent memory leaks. Received messages trigger state updates via React Query's cache invalidation or direct state setters. For authentication, I pass the JWT token as a query parameter when connecting. The cable reconnects automatically on disconnect. This integration enables real-time UIs without polling, reducing server load and improving user experience for collaborative features.