ActionCableのクライアント作りたいけど、クライアント側はRailsから切り離したいと思ったので、調査してみた

1. ActionCableの
クライアントは
Rails外から利用できるのか
株式会社エクストーン
豊田陽一

2. 発端
• 勤怠管理システムを作ることになった
• 社員の出勤状況のステータスを表示するタブレット画面作りたい
• バックエンドはRails

3. ActionCable
• Rails5から追加された機能
• サーバーサイドプッシュをフルスタックで作れる
• Pub/Sub型モデル
• メッセージの送信者 (Publisher) は受信者を指定せずにメッセージを送る
• メッセージの宛先にはトピックを指定
• メッセージの受信者はトピックを購読 (Subscribe) する
• 受け取るメッセージをどのトピックを購読するかで選択する
• WebSocketによる接続

4. やりたいこと
• サーバー側だけRailsで作りたい
• クライアント側のコード管理は外でやりたい
• Webpackで静的なHTML+JSとか

5. できるのか

6. 懸念点
• フルスタックフレームワーク
• 基本的にはフロントエンドもバックエンドもRails内で開発する
• rails g channel ... でコードのひな型が自動生成される
• Ruby
• CoffeeScript
• 切り離して開発できるのか？
• ハマりどころはないのか？

7. やってみた

8. Channelの作成
• Channel
• 論理的な作業単位
• トピックの購読
• トピックの購読解除
• クライアント側からのメソッド呼び出し
• 主にメッセージ送信に関する処理
class AttendanceChannel <
ApplicationCable::Channel
def subscribed
stream_from
"attendance:message"
end
def speak(data)
AttendanceChannel.broadcast_to(
'message', data
);
end
def unsubscribed
end
end

9. Channelの作成
• subscribed
• クライアントからChannelに接続した際
に呼び出されるメソッド
• クライアント側に購読するトピックの情
報を通知する処理を書く
class AttendanceChannel <
ApplicationCable::Channel
def subscribed
stream_from
"attendance:message"
end
def speak(data)
AttendanceChannel.broadcast_to(
'message', data
);
end
def unsubscribed
end
end

10. Channelの作成
• stream_from
• ストリームの提供
• 送信側: ストリーム名を指定してブロード
キャスト
• 受信側: ストリーム名を指定して購読
class AttendanceChannel <
ApplicationCable::Channel
def subscribed
stream_from
"attendance:message"
end
def speak(data)
AttendanceChannel.broadcast_to(
'message', data
);
end
def unsubscribed
end
end

11. Channelの作成
• Channel.broadcast_to
• ストリームを指定してメッセージ送信
• ストリーム名は<チャンネル名>:<名前>
• この場合、’attendance:message’に送信
される
• 要はこのチャンネルに接続した人全員に
メッセージを送る
class AttendanceChannel <
ApplicationCable::Channel
def subscribed
stream_from
"attendance:message"
end
def speak(data)
AttendanceChannel.broadcast_to(
'message', data
);
end
def unsubscribed
end
end

12. 購読側
• npmでactioncableをインストール
• node.js向けにActionCableのクライアン
トライブラリが提供されている
• これを利用することで、Railsから独立し
てクライアント側を実装できる
$ yarn add actioncable
yarn add v1.12.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ actioncable@5.2.2
info All dependencies
└─ actioncable@5.2.2
Done in 0.23s.

13. 購読側
• ActionCable.createConsumer
• Rails側のエンドポイントに接続
const endpoint =
'ws:localhost:3000/cable'
const cable =
ActionCable.createConsumer(endpoint
)
const channel =
cable.subscriptions.create(
"AttendanceChannel", {
connected: () => {
},
received: (data) => {
}
}
);
channel.perform('speak', 'Hello!');

14. 購読側
• subscriptions.create
• チャンネルに対して購読を開始する
• チャンネル名
• 接続時のイベント処理
• メッセージ受信時のイベント処理
• チャンネルに対するメソッド呼び出し
const endpoint =
'ws:localhost:3000/cable'
const cable =
ActionCable.createConsumer(endpoint
)
const channel =
cable.subscriptions.create(
"AttendanceChannel", {
connected: () => {
},
received: (data) => {
}
}
);
channel.perform('speak', 'Hello!');

15. 購読側
• perform
• Rails側のチャンネルに定義されたメソッ
ドを呼び出す
• 呼び出されるコード
const endpoint =
'ws:localhost:3000/cable'
const cable =
ActionCable.createConsumer(endpoint
)
const channel =
cable.subscriptions.create(
"AttendanceChannel", {
connected: () => {
},
received: (data) => {
}
}
);
channel.perform('speak', 'Hello!');
def speak(data)
AttendanceChannel.broadcast_to(
'message', data
);
end

16. webpack + vue.jsによる
ActionCableクライアント実装
デモ

17. 結論

18. できました

19. まとめ
• ActionCable
• Rails5から導入されたサーバーサイドプッシュのフレームワーク
• Pub/Sub
• Websocket
• クライアント側の実装
• actioncableというモジュールを利用する
• クライアントはRailsの外側でも実装可能
• 実装自体はとても簡単