RubyのAction Cableで簡易チャットの作成(Ruby関西)

Ruby関西というイベントに参加してきました

そこで講演の１つにActionCableを使ってライブ配信にチャット機能をつけた話があったのでそれについて

youtube.Liveやその他サービスではチャット付きライブ配信であんまり良くないらしい、なので配信システムを自作したというお話でした

概要としては

HLS + video.js で動画配信
RailsのActionCableを使いチャット機能を作る
という感じ

・環境構築
Rails6は正式リリースまだだけど使ってみる

$gem install rails --pre

yarnも入れておく

・rails new

$rails new chat -$(date+%Y%m%d) --webpack=react

rails newの後で

$bin/rails webpacker:install:react

・埋め込みページ作成

$rails g controller pages index

routes変更

root to: 'pages/index'

app/views/pages/index.html.erbにReactの呼び出し埋め込み

<%= javascript_pack_tag 'hello react' %>

・channelの作成

$rails g channel chat

ChatChannelクラスができる

$rails g channel chat speak

などでメソッドも生成可能

・送受信準備(Rails)
ChatChannelに

def receive(data)

を追加

ActionCable.server.broadcast('chat_chnnel',data)

subscriveで

stream_from 'chat_channel'

・送受信準備(JS)
chat_channel.jsにて
received(data)に

console.log(data)

consoleから送信を確認できる

・アイコン表示
おなじみgravater

・モデル

$rails g model message name body sent_at:timestamp
$rails g job MessageBroadcast

broadcastをjob経由に

こんな感じ行けるらしい