Action Cableについてまとめ

RailsのAction Cableについて概要のまとめとして備忘録。

●Action Cableとは

Railsで即時更新機能を実装できるフレームワークのこと

利用にはチャネルが必要

●Channel（チャネル）とは

即時更新機能を実施するサーバ側の仕組みのこと

データの送受信の設定などを行う

・チャネルの作成

messageチャネルを作成するとしたらターミナルにて

rails g channel message

を実施

●message_channel.rbについて

app/channels/message_channel.rbに生成できたファイルについて

このファイルはサーバーとクライアントを繋ぐファイル。stream_fromメソッドを用いることで、サーバーとクライアントの関連付けを設定する。

・stream_from

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とは、サーバーから送られるデータの経路のことを指す
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

broadcastを通して、'message_channel'に向けて@messageを送信するという意味送信された情報は、message_channel.jsで受けとる

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='';
}
});

こちらで簡易的な非同期の通信ができる。