typescript ruby 59 lines · 3 tabs

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.

Related snips

ruby

class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

System test: asserting Turbo Stream responses

rails hotwire turbo

by codesnips 4 tabs

ruby

class Post < ApplicationRecord
  belongs_to :author, class_name: 'User'
  has_many :comments, dependent: :destroy

  scope :published, -> { where.not(published_at: nil).where('published_at <= ?', Time.current) }
  scope :draft, -> { where(published_at: nil) }

ActiveRecord scopes for reusable query logic

rails activerecord patterns

by Alex Kumar 1 tab

ruby

module Api
  module V1
    class UsersController < BaseController
      def show
        user = User.includes(:profile).find(params[:id])

ETags for conditional requests and caching

rails caching http-caching

by Alex Kumar 1 tab

ruby

class PostsController < ApplicationController
  def index
    @posts = Post.includes(:author)
                 .order(created_at: :desc)
                 .page(params[:page])
                 .per(10)

Turbo Frames: infinite scroll with lazy-loading frame

rails turbo hotwire

by codesnips 4 tabs

ruby

require "csv"

class PeopleCsvStream
  include Enumerable

  HEADERS = %w[id full_name email signed_up_at plan].freeze

Resilient CSV Export as a Streamed Response

rails performance streaming

by codesnips 3 tabs

erb

<form data-controller="query-sync" data-action="change->query-sync#apply">
  <select name="status" class="rounded border p-2">
    <option value="">Any</option>
    <option value="open">Open</option>
    <option value="closed">Closed</option>
  </select>

Filter UI that syncs query params via Stimulus (no front-end router)

rails hotwire stimulus

by Henry Kim 2 tabs

Share this code

Here's the card — post it anywhere.

WebSocket integration with Action Cable — share card

Link copied