mcpField
A
action-cable

action-cable

github.com/rolemodel開発738 回インストール1 日前に更新
リポジトリ

action-cable について

Rails アプリで ActionCable を設定するガイドです。認証付き WebSocket 接続、チャンネル、Turbo Streams によるブロードキャストを扱い、リアルタイム更新の実装に役立ちます。

主な機能

  1. 01ActionCable の接続とチャンネル設定
  2. 02Devise/Warden による接続認証
  3. 03Turbo Streams による更新配信
  4. 04Cable アダプターとルートの設定
  5. 05接続状態の確認とログ有効化

活用シーン

  1. 01アプリへのリアルタイム通知の追加
  2. 02組織単位でのタイマー更新配信
  3. 03WebSocket 接続のトラブルシューティング

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/rolemodel/rolemodel-skills --skill action-cable

インストール後、Claude Code で/action-cableを入力して読み込まれたか確認します。

詳細

ActionCable のセットアップ

概要

ActionCable は WebSocket を Rails と統合し、リアルタイム機能を実現します。このガイドでは、このアプリケーションでの基本的なセットアップについて説明します。

主なコンポーネント

1. 接続(app/channels/application_cable/connection.rb)

接続では、Devise/Warden を使用して WebSocket 接続の認証と認可を行います。

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private

    def find_verified_user
      if verified_user = env['warden'].user
        verified_user
      else
        reject_unauthorized_connection
      end
    end
  end
end
2. チャネル(app/channels/application_cable/channel.rb)

アプリケーション内のすべてのチャネルの基底クラスです。

module ApplicationCable
  class Channel < ActionCable::Channel::Base
  end
end
3. JavaScript のセットアップ(app/javascript/initializers/actioncable.js)

クライアント側で ActionCable コンシューマーを初期化します。

import * as ActionCable from '@rails/actioncable'

ActionCable.logger.enabled = false

更新のブロードキャスト

Turbo Streams を使用する場合(推奨)

ビューでストリームを購読します。

= turbo_stream_from record
= turbo_stream_from [record, "channel_name"]

コントローラーまたはバックグラウンドジョブから Turbo Stream の更新をブロードキャストします。

# Append content to a target
Turbo::StreamsChannel.broadcast_append_to(
  [record, "channel_name"],
  target: "dom_id",
  partial: "path/to/partial",
  locals: { record: record }
)

# Replace content
Turbo::StreamsChannel.broadcast_replace_to(
  [record, "channel_name"],
  target: "dom_id",
  partial: "path/to/partial",
  locals: { record: record }
)

# Remove element
Turbo::StreamsChannel.broadcast_remove_to(
  [record, "channel_name"],
  target: "dom_id"
)
例:組織単位の通知

ビュー:

= turbo_stream_from current_organization, "timers"

#notifications

コントローラー:

def start_timer
  # ... create timer logic ...

  Turbo::StreamsChannel.broadcast_append_to(
    [current_organization, "timers"],
    target: "notifications",
    partial: "timers/notification",
    locals: { timer: @timer }
  )
end

設定

Cable URL(config/cable.yml)
development:
  adapter: async

test:
  adapter: test

production:
  adapter: solid_cable
  connects_to:
    database:
      writing: cable
  polling_interval: 0.1.seconds
  message_retention: 1.day
ルート(config/routes.rb)

ActionCable は /cable に自動的にマウントされます。

Rails.application.routes.draw do
  mount ActionCable.server => '/cable'
end

デバッグ

開発環境でロギングを有効にします。

// app/javascript/initializers/actioncable.js
ActionCable.logger.enabled = true

接続ステータスを確認します。

const subscription = consumer.subscriptions.create("ExampleChannel", {
  connected() {
    console.log("Connected to ExampleChannel")
  }
})

console.log(subscription)

セキュリティに関する考慮事項

  • ApplicationCable::Connection で必ず接続を認証してください
  • チャネルの購読時にパラメーターを検証してください
  • 可能であれば、自動的にスコープが設定される stream_from ではなく stream_for を使用してください
  • 検証せずにクライアント側のデータを信頼しないでください
  • クライアントメッセージを受け付けるチャネルでは、レート制限を検討してください

コメント