Ask A Question

Notifications

You’re not receiving notifications from this thread.

Not Rendering with Stimulus & ActionCable

Jim Miller asked in Javascript

Hi,
I'm having some issues with Stimulus and I was hoping that someone could review this code and see if they see anything that I missed.
The Rails part is working and saving to the db. I'm sure that I have a typo somewhere...

Here is what I have:

app/channels/message_channel.rb

class MessageChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'message_channel'
  end

  def unsubscribed
    stop_all_streams
  end
end

app/javascript/controllers/message_list_controller.js

import { Controller } from "stimulus";
import consumer from "../channels/consumer";

export default class extends Controller {
  static targets = ["input", "messages"];
  connect() {
    this.channel = consumer.subscriptions.create("MessageChannel", {
      connected: this._cableConnected.bind(this),
      disconnected: this._cableDisconnected.bind(this),
      received: this._cableReceived.bind(this),
    });
  }

  clearInput() {
    this.inputTarget.value = "";
  }

  _cableConnected() {}

  _cableDisconnected() {}

  _cableReceived() {
    this.messagesTarget.innerHTML += data.message;
  }
}

app/controllers/messages_controller.rb

class MessagesController < ApplicationController
  before_action :set_message, only: [:show, :edit, :update, :destroy]

  def index
    @messages = Message.all
  end

  def create
    @message = Message.new(params.require(:message).permit(:content))
    @message.save!
    ActionCable.server.broadcast('message_channel', message: (render @message))
    head :ok
  end


  private
  def set_message
    @message = Message.find(params[:id])
  end

  def message_params
    params.require(:message).permit(:content)
  end
end

app/views/messages/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Messages</h1>

<div data-controller='message-list'>
  <div data-target='message-list.messages'>
    <%= render @messages %>
  </div>

  <%= form_with(model: Message.new, 
                data: { action: 'ajax:success->message-list#clearInput' }) do |form| %>
                <%= form.text_area :content, 
                  data: { target: 'message-list.input' }, rows: 1, autofocus: true %>
                <%= form.submit class: "btn btn-default" %>
              <% end %>
</div>

Gist of Logfile

Thanks!

Reply

In case someone stumbles across this and needs an answer. Modify message_list_controller:

app/javascript/controllers/message_list_controller.js

_cableReceived(data) {
    this.messagesTarget.innerHTML += data.message;
  }
Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 78,890+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.