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
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.
