目的
Railsで作成したアプリに、Action Cableを用いてリアルタイムチャット機能を導入する。
開発環境
macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0
前提
アプリの下準備としてチャット機能実装が実装されている。
【Rails】リアルタイムチャット機能実装（Action Cable）1/3
手順
はじめに
channelの作成
message_channel.rbの編集
コントローラーの編集
message_channel.jsの編集
はじめに
前回に引き続き、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メソッドを用いることで、サーバーとクライアントの関連付けを設定します。
app/channels/message_channel.rb
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を介してメッセージが送信されるように記述します。
app/controller/messages_controller.rb
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に挿入します。
app/javascript/channels/message_channel.js
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を用いての実装は完了です。
次回は本番環境で実装するための設定を行っていきます.
では。
ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running? If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
sudo docker-compose run web rails new . --force --no-deps --database=postgresql --skip-bundle
コンテナを作成しようとしたところ、以下のエラーが発生しました。
ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?
If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
原因
結論から申し上げますと、今回の場合はdockerのサービスを開始していなかったのが原因でした。
解決策
sudo systemctl start docker
を行ない、docker サービスを起動させ、再度
sudo docker-compose run web rails new . --force --no-deps --database=postgresql --skip-bundle
を実行したら解決しました。
補足
権限によっても同様のエラーが出る場合もあるようです。
その場合はDockerとdocker-composeにそれぞれ権限を付与する必要があります。
sudo usermod -aG docker $USER
sudo chmod +x /usr/local/bin/docker-compose
実行後、設定を反映させるために一度ログアウトする必要があるようです。
Exit
参考
参考にさせていただきました。ありがとうございます。
