ActionCable for real-time WebSocket communication

# app/channels/notifications_channel.rb
class NotificationsChannel < ApplicationCable::Channel
  def subscribed
    stream_for current_user
  end

  def unsubscribed
    stop_all_streams
  end

  def mark_as_read(data)
    notification = current_user.notifications.find(data['id'])
    notification.mark_as_read!
  end
end

# Broadcasting from model
class Notification < ApplicationRecord
  belongs_to :user

  after_create_commit do
    broadcast_notification
  end

  private

  def broadcast_notification
    NotificationsChannel.broadcast_to(
      user,
      {
        type: 'notification',
        notification: NotificationSerializer.new(self).as_json
      }
    )
  end
end

# Broadcasting from anywhere
class CommentService
  def create_comment(post, user, content)
    comment = post.comments.create!(user: user, content: content)

    # Notify post author
    notification = post.user.notifications.create!(
      message: "#{user.name} commented on your post",
      link: post_path(post)
    )

    # Real-time notification
    NotificationsChannel.broadcast_to(
      post.user,
      NotificationSerializer.new(notification).as_json
    )

    comment
  end
end

# Streaming from a model
class ActivityChannel < ApplicationCable::Channel
  def subscribed
    stream_from "activity:#{current_user.id}"
  end
end

# Broadcasting to stream
ActionCable.server.broadcast(
  "activity:#{user.id}",
  { type: 'new_follower', follower: follower.as_json }
)

# Periodic broadcasts (app/jobs/server_stats_job.rb)
class ServerStatsJob < ApplicationJob
  def perform
    stats = {
      users_online: User.online.count,
      cpu_usage: SystemStats.cpu_usage,
      memory_usage: SystemStats.memory_usage
    }

    ActionCable.server.broadcast('server_stats', stats)
  end
end

// app/javascript/channels/chat_channel.js
import consumer from "./consumer"

const chatChannel = consumer.subscriptions.create(
  {
    channel: "ChatChannel",
    room_id: document.getElementById('room-id').value
  },
  {
    connected() {
      console.log("Connected to chat channel")
    },

    disconnected() {
      console.log("Disconnected from chat")
    },

    received(data) {
      switch(data.type) {
        case 'message':
          this.appendMessage(data.message)
          break
        case 'typing':
          this.showTypingIndicator(data.user_name)
          break
        case 'user_joined':
          this.updateUsersCount(data.users_count)
          break
      }
    },

    send_message(message) {
      this.perform('receive', { message: message })
    },

    typing() {
      this.perform('typing')
    },

    appendMessage(message) {
      const messagesContainer = document.getElementById('messages')
      messagesContainer.insertAdjacentHTML('beforeend', message.html)
    },

    showTypingIndicator(userName) {
      // Show "{userName} is typing..."
    }
  }
)

// Send message on form submit
document.getElementById('message-form').addEventListener('submit', (e) => {
  e.preventDefault()
  const input = e.target.querySelector('input')
  chatChannel.send_message(input.value)
  input.value = ''
})