2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2017.12.25
プログラミングRails 5のActionCableでリアルタイムアプリを作る!
Canadian Devです!Railsでリアルタイム更新するアプリケーションを作ったことがありますか?ロビーで、新しい参加者が入る瞬間に他の参加者のブラウザーもリアルタイムに反映されるアプリケーションを作ってみました。HTTP request-response cycleはウェブ開発の基礎のコンセプトの一つですね。クライアントがリクエストをすると、レスポンスが返ってくるというものです。
WebSocketsとはブラウザーとサーバーの間に通信を開ける技術仕様です。HTTP request-response cycleと違って、サーバからの返事を待たずにサーバへメッセージを送ったりレスポンスを受けたりすることができます。
ActionCableはWebSocketsを実装するRails 5のツールです。ActionCableの設置には幾つかのステップが必要なんですが、設定するとRailsリアルタイム開発はもっと楽しくなります。
ゲームでもチャットルームでも使えるロビーで、ユーザーがそのロビーに入ると他のユーザーのブラウザにもそのユーザーが見える。
mount ActionCable.server => "/cable"
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.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つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索