action-cable について
Rails アプリで ActionCable を設定するガイドです。認証付き WebSocket 接続、チャンネル、Turbo Streams によるブロードキャストを扱い、リアルタイム更新の実装に役立ちます。
主な機能
- 01ActionCable の接続とチャンネル設定
- 02Devise/Warden による接続認証
- 03Turbo Streams による更新配信
- 04Cable アダプターとルートの設定
- 05接続状態の確認とログ有効化
活用シーン
- 01アプリへのリアルタイム通知の追加
- 02組織単位でのタイマー更新配信
- 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を使用してください - 検証せずにクライアント側のデータを信頼しないでください
- クライアントメッセージを受け付けるチャネルでは、レート制限を検討してください
コメント
Markdown 対応