メニューを閉じる

テクノモバイルグループ

メニューを開く

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. ルーティングでソケットリクエストが繋げられるルーティングを作る。

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

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

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

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

チャンネルの作成

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

アクションの作成

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

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

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

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

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

リアルタイムマジック

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

That’s all, folks!


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

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

採用情報の詳細はこちら


Qangaroo(カンガルー)

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

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE