Devです!Railsでリアルタイム更新するアプリケーションを作ったことがありますか?ロビーで、新しい参加者が入る瞬間に他の参加者のブラウザーもリアルタイムに反映されるアプリケーションを作ってみました。cycleはウェブ開発の基礎のコンセプトの一つですね。クライアントがリクエストをすると、レスポンスが返ってくるというものです。WebSocketsとはブラウザーとサーバーの間に通信を開ける技術仕様です。cycleと違って、サーバからの返事を待たずにサーバへメッセージを送ったりレスポンスを受けたりすることができます。ActionCableの設置には幾つかのステップが必要なんですが、設定するとRailsリアルタイム開発はもっと楽しくなります。目標ゲームでもチャットルームでも使えるロビーで、ユーザーがそのロビーに入ると他のユーザーのブラウザにもそのユーザーが見える。サーバー側の接続まず、ActionCableはredisが必要とされるので、Gemfileにredisを指定する。ルーティングでソケットリクエストが繋げられるルーティングを作る。(JavaScript)app/assets/javascriptsのフォルダの中に、cable.jsというファイルが作られています。このファイルの中でcreateCustomer()というActionCableメソッドでWebSocketと接続するインスタンスを作成する。チャンネルとサブスクリプションActionCableにはチャンネル(channel)とサブスクリプション(subscription)という概念があります。この二つのものでリアルタイム更新ができるのです。チャンネルは日本語で言うと「経路」で、サブスクリプションは「購読」みたいなものです。クライアントがあるチャンネルに購読すると、ずっとサーバと開いた接続ができます。毎回新しいリクエストを送る必要がなくなります。便利ですね!まず、チャンネルを作りましょう。チャンネルの作成チャンネルクラスとメソッドはapp/assets/channelsというフォルダの中に作成します。このファイルの中にUsersChannelという参加者チャンネルを作って、そのクラスの購読メソッドを作りましょう。'users'endendアクションの作成チャンネルは作ったけど、そのチャンネルがいつ使われるのかということを決めましょう。作成したチャンネルをコントローラに指定します。root_pathendend上記のコードで、ActionCable.server.broadcastの行が大事です。二つの引数が渡されています:UsersChannelのメソッドで指定した’users’と、更新したいJSONデータ。サブスクリプションの作成クライアント側ではサブスクリプションを作成する必要があります。app/assets/javascripts/channelsというフォルダの中でjsファイルを作ります。サブスクリプションを作るシンタックスはApp.cable.subscriptions.createで、そのファンクションに二つの引数を渡します。1番目の引数はチャンネルのクラス名で、2番目の引数はreceivedというユーザーのデーターを受け取ってから呼ばれるファンクションです。このファンクションで下記のコードのようにDOMにいろいろな変更が行えます。$('#name-list');});上記のコードだと、UsersChannelというチャンネルで受け取るデータに基づいて#name-listというエレメントの中に入っているユーザーリストを新しいJSONデータで更新します。下記項目に1つでも当てはまる方は是非、詳細ページへ!自分でアプリを作ってみたいITで世の中にワクワクを生み出したい使いやすさ、デザインにこだわったWebサイトを開発したい採用情報の詳細はこちらQangaroo(カンガルー)徹底した見やすさと優れた操作性で、テストの「見える化」を実現。テストの進捗が見える。開発がスマートに進む。