目的
Railsで作成したアプリに、Action Cableを用いてリアルタイムチャット機能を導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
- アプリの下準備としてチャット機能実装が実装されている。
【Rails】リアルタイムチャット機能実装（Action Cable）1/3
手順
はじめに
前回に引き続き、Action Cableを用いての実装を行っていきます。
そもそもAction Cableとは、Railsのアプリと同じ記述で、即時更新機能を実装できるフレームワークのことを指します。
実装内容としては、メッセージの保存や送信に必要なRubyのコーディングと、保存したメッセージを即時に表示させるJavaScriptのコーディングです。
また、即時更新機能を実現するサーバー側の仕組みとして、channelがあります。
channelはメッセージを即座に表示させるために、データの経路を設定したり、送られてきたデータを表示させるJavaScriptを記述したりします。
channelの作成
それでは早速始めていきます!
まず、下記コマンドを実行しチャネルに関するファイルを作成します。
% rails g channel message
生成された、app/channels/message_channel.rbとapp/javascript/channels/message_channel.jsが重要なファイルとなっています。
message_channel.rbは、クライアントとサーバーを結びつけるためのファイルで、
message_channel.jsが、サーバーから送られてきたデータをクライアントの画面に描画するためのファイルです。
message_channel.rbの編集
次はmessage_channel.rbの編集を行っていきます!
このファイルは、MVCでいうところのルーティングの機能を果たしています。
stream_fromメソッドを用いることで、サーバーとクライアントの関連付けを設定します。
class MessageChannel < ApplicationCable::Channel
def subscribed
stream_from "message_channel"
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
これでサーバーとクライアントを関連付けるための設定ができました!
stream_fromメソッドで関連付けられるデータの経路のことをbroadcastと呼び、broadcastを介してサーバーから送られるデータをクライアントに送信します。
コントローラーの編集
次にメッセージの保存が成功したときに、broadcastを介してメッセージが送信されるように記述します。
class MessagesController < ApplicationController
def new
@messages = Message.all
@message = Message.new
end
def create
@message = Message.new(text: params[:message][:text])
if @message.save
ActionCable.server.broadcast 'message_channel', content: @message
end
end
end
ActionCable.server.broadcast 'message_channel', content: @messageは、broadcastを通して、message_channelに向けて@messageを送信するという意味です。
message_channel.jsの編集
上記で送信され、message_channel.jsが受け取った情報は、receivedの引数dataに入ります。
このデータをテンプレートリテラルにして、new.html.erbに挿入します。
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
connected() {
// Called when the subscription is ready for use on the server
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
const html = `<p>${data.content.text}</p>`;
const messages = document.getElementById('messages');
const newMessage = document.getElementById('message_text');
messages.insertAdjacentHTML('afterbegin', html);
newMessage.value='';
}
});
{data.content.text}このcontentはコントローラーのcreateアクション内で指定したcontentからきています。
ここまで実装出来たら、実際にメッセージを送信して確かめてみます!
最後に
以上で、Action Cableを用いての実装は完了です。
次回は本番環境で実装するための設定を行っていきます.【Rails】リアルタイムチャット機能実装（Action Cable）3/3
では。