メニューを閉じる

テクノデジタルグループ

メニューを開く

2017.12.25

プログラミング

Rails 5のActionCableでリアルタイムアプリを作る!

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

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

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

目標

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

設定: サーバー側の接続

  1. まず、ActionCableredisが必要とされるので、Gemfileredisを指定する。
  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で、そのファンクションに二つの引数を渡します。1番目の引数はチャンネルのクラス名で、2番目の引数は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!


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事