Tag: Rails/ActionCable
bin/rails g channel room speak
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
<div class="message"> <p><%= message.content %></p> </div>
<h1>Chat room</h1> <div id="messages"> <%= render @messages %> </div> <form> <label>Say something:</label><br> <input type="text" data-behavior="room_speaker"> </for
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}); } });
ActionCable.server.broadcast("room_channel", {message: render_message(message)})