ActionCableを使用したWebSocketによるリアルタイムWeb環境を構築する手順を記載します。

Mac OS 10.12.16
bundle 1.16.0
ruby 2.4.2p198
Rails 5.1.4

以下の2つを参考に構築します。

https://blog.scimpr.com/2016/09/09/rails5%E3%81%A7ajax%E5%87%A6%E7%90%86%E3%82%92actioncable%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E5%90%8C%E6%9C%9F%E5%8C%96/
https://qiita.com/jnchito/items/aec75fab42804287d71b

Rails環境構築

大変優れた環境構築の記事があるので参考にします。
https://qiita.com/narikei/items/cd029911597cdc71c516

cd ~/work/action_cable_test
bundle init
echo 'gem "rails"' >> Gemfile
bundle install
rails new . -f
bundle install
git add .
git commit -m "Setup `rails --version`"

メッセージ表示機能の作成

0. サーバーの起動

先にサーバーをbgで立ち上げておきます。
ログの吐き先は適当ですが、指定しないと画面に出て邪魔になるので指定しましょう。

rails s >> log/server_message.log &

1. Messageモデルを作成する

別にモデルの存在は必須ではないかも

rails g model message context:text
rails db:migrate
git add .
git commit -m "Add message model"

２. Roomsコントローラの作成

今回のテストではshow操作だけで十分のため以下のコマンドで生成します。

rails g controller rooms show
git add .
git commit -m "Add controller & view"

3. Message表示機構の作成

app/controllers/rooms_controller.rb

class RoomsController < ApplicationController
  def show
    @messages = Message.all
  end
end

app/views/rooms/show.html.erb

<h1>Chat room</h1>

<div id="messages">
  <%= render @messages %>
</div>

rails g controller rooms show
git add .
git commit -m "Show message on room"

4. 稼働確認

チャンネルの作成

1. Roomチャンネル作成

rails g channel room speak
git add .
git commit -m "Add room channel"

次のファイルが生成されます。

app/channels/room_channel.rb
app/assets/javascripts/channels/room.coffee

この時点でApp.room.speak()と打てばサーバーログにメッセージが出ます。

2. フロードキャスト通信ロジックの実装

フロントエンド側
speak: 引数をmessageに格納してspeakでバックに送り込んでいます。
recieved: 受け取ったデータをアラートしています

app/assets/javascripts/channels/room.coffee

  received: (data) ->
    alert data['message']
  ...
  speak: (message) ->
    @perform 'speak', message: message

バックエンド側
stream_from句でroom_channelという名前のstreamを開いて、speakでroom_channelにフロントエンドから受け取った値を流し込んでいます。

app/channels/room_channel.rb

  def subscribed
    stream_from "room_channel"
  end
  ...

  def speak(data)
    ActionCable.server.broadcast 'room_channel', message: data['message']
  end

git commit -a -m "Add message broadcast logic"

ブラウザでApp.room.speak(xxx)と打てばサーバを経由してアラートが表示されるはずです。

フロントエンド側をViewと接続

CoffeeScriptでViewのHTMLで定義しているidmessagesに対して追記を行います。
Rails 5.1辺りからjQueryが切り離されたので、多少泥臭いですがAPIを生で叩きます。