Canadian Devです！Railsでリアルタイム更新するアプリケーションを作ったことがありますか？ロビーで、新しい参加者が入る瞬間に他の参加者のブラウザーもリアルタイムに反映されるアプリケーションを作ってみました。HTTP request-response cycleはウェブ開発の基礎のコンセプトの一つですね。クライアントがリクエストをすると、レスポンスが返ってくるというものです。

WebSocketsとはブラウザーとサーバーの間に通信を開ける技術仕様です。HTTP request-response cycleと違って、サーバからの返事を待たずにサーバへメッセージを送ったりレスポンスを受けたりすることができます。

ActionCableはWebSocketsを実装するRails 5のツールです。ActionCableの設置には幾つかのステップが必要なんですが、設定するとRailsリアルタイム開発はもっと楽しくなります。

目標

ゲームでもチャットルームでも使えるロビーで、ユーザーがそのロビーに入ると他のユーザーのブラウザにもそのユーザーが見える。

設定: サーバー側の接続

1. まず、ActionCableはredisが必要とされるので、Gemfileにredisを指定する。
2. ルーティングでソケットリクエストが繋げられるルーティングを作る。

   mount ActionCable.server => "/cable"

設定：クライアント側の接続 (JavaScript)

1. app/assets/javascriptsのフォルダの中に、cable.jsというファイルが作られています。このファイルの中でcreateCustomer()というActionCableメソッドでWebSocketと接続するインスタンスを作成する。

チャンネルとサブスクリプション

ActionCableにはチャンネル(channel)とサブスクリプション(subscription)という概念があります。この二つのものでリアルタイム更新ができるのです。チャンネルは日本語で言うと「経路」で、サブスクリプションは「購読」みたいなものです。クライアントがあるチャンネルに購読すると、ずっとサーバと開いた接続ができます。つまり、毎回新しいリクエストを送る必要がなくなります。便利ですね！まず、チャンネルを作りましょう。

チャンネルの作成

チャンネルクラスとメソッドはapp/assets/channelsというフォルダの中に作成します。このファイルの中にUsersChannelという参加者チャンネルを作って、そのクラスの購読メソッドを作りましょう。

class UsersChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'users'
  end
end

アクションの作成

チャンネルは作ったけど、そのチャンネルがいつ使われるのかということを決めましょう。作成したチャンネルをコントローラに指定します。例えばロビーに参加者が入ったり(join)出たり(leave)するときにチャンネルを使用したい場合は：

class RoomController < ApplicationController
  def join
    @user = current_user
    if @room = Room.find_by(room_code: params[:room_code])
      @room << @user
      ActionCable.server.broadcast(‘users’, users: @room.users)
      redirect_to room_path(@room)
    end
  end

  def leave
    @user = current_user
    @room = Room.find_by(room_code: params[:room_code])
    @room.users.delete(@user)
    ActionCable.server.broadcast(‘users’, users: @room.users)
    redirect_to root_path
  end
end

上記のコードで、ActionCable.server.broadcastの行が大事です。二つの引数が渡されています：UsersChannelのメソッドで指定した’users’と、更新したいJSONデータ。

サブスクリプションの作成

• クライアント側ではサブスクリプションを作成する必要があります。app/assets/javascripts/channelsというフォルダの中でjsファイルを作ります。サブスクリプションを作るシンタックスはApp.cable.subscriptions.createで、そのファンクションに二つの引数を渡します。１番目の引数はチャンネルのクラス名で、２番目の引数はreceivedというユーザーのデーターを受け取ってから呼ばれるファンクションです。このファンクションで下記のコードのようにDOMにいろいろな変更が行えます。

App.cable.subscriptions.create('UsersChannel', {
  received: function(data) {
    $('#name-list').html('');
    data.users.forEach(function(user) {
      $('#name-list').append(user.name)
    });
    return $('#name-list');
});

上記のコードだと、UsersChannelというチャンネルで受け取るデータに基づいて#name-listというエレメントの中に入っているユーザーリストを新しいJSONデータで更新します。

リアルタイムマジック

ActionCableでリアルタイムアプリケーションを作りましょう！Rails 5で新しいツールがたくさん導入されているので、どんどん使っていきましょう！

That’s all, folks!