Rails/ActionCable

ジェネレータでAction Cable用のファイルを作る
```
bin/rails g channel room speak
```
app/channels/room_channel.rbがサーバーサイドの処理を、app/javascript/channels/rooms_channel.jsがそれぞれサーバー側、クライアント側の処理を受けもつ。

↑

サーバーサイドのコードを実装†

room_channel.rbの実装。

class RoomChannel < ApplicationCable::Channel
  def subscribed
    stream_from "room_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def speak(data)
    message = Message.create(content: data["message"])
    ActionCable.server.broadcast("room_channel", {message: render_message(message)})
  end

  def render_message(message)
    ApplicationController.render(partial: "messages/message", locals: {message: message})
  end
end

_message.html.erb

<div class="message">
  <p><%= message.content %></p>
</div>

show.html.erb

<h1>Chat room</h1>

<div id="messages">
  <%= render @messages %>
</div>

<form>
  <label>Say something:</label><br>
  <input type="text" data-behavior="room_speaker">
</for

↑

クライアントサイドのコードを実装†

room_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("RoomChannel", {
  connected() {
    document.querySelector('input[data-behavior="room_speaker"]').addEventListener('keypress', (event) => {
      if (event.key == 'Enter') {
        this.speak(event.target.value);
        event.target.value = '';
        return event.preventDefault();
      }
    });
  },

  disconnected() {
  },

  received(data) {
    const element = document.querySelector("#messages");
    element.insertAdjacentHTML('beforeend', data['message']);
  },

  speak: function(message) {
    return this.perform('speak', {message: message});
  }
});

↑

説明†

入力ボックスに文字列に入力して「Enter」を押す。
jsのspeak=>room_channel.rbのspeak。以下のメソッドでメッセージがブロードキャスト。
```
ActionCable.server.broadcast("room_channel", {message: render_message(message)}) 
```
jsのreceivedにデータが送られてきて(renderによって生成されたHTMLコード)、表示されているHTMLが書き換えられる。

↑

目次†

関連ページ†

参考情報†

基本的情報†

簡単なサンプル†

手順†

ファイルの生成†

サーバーサイドのコードを実装†

クライアントサイドのコードを実装†

説明†

Contents

メニュー

配布物

ゲーム

ショートカット

今日の20件

最新の20件