コメント機能のエラー

Question

やろうとしていること

Ruby on Railsでオリジナルアプリケーションを作成中です。
投稿詳細ページにコメント機能をつけたいと思っています。
勉強も兼ねてActionCableで実装を試みています。

解決したいこと

ActionCableを用いた実装が終わったので挙動確認をしてみました。
フォームにテキストを入力してエンターキーを押しても
何の反応もしません。
エラーメッセージが表示されないので困っています。
どなたか解決へのアプローチや
原因についてお教えいただけませんか？

実装したこと

commentsコントローラー

class CommentsController < ApplicationController
  def create
    comment = Comment.new(comment_params)
    ActionCable.server.broadcast 'comment_channel', content: comment if comment.save
  end

  private

  def comment_params
    params.require(:comment).permit(:text).merge(event_id: params[:event_id])
  end
end

コメントはviews/events/show.html.erbで表示させたいので
eventsコントローラーでは以下のように記述しました。
関係ない部分は省略しております。

  def show
    @comment = Comment.new
    @comments = @event.comments.all.order('created_at DESC')
　　　　　　　　@event = Event.find(params[:id])
  end

views/events/show.html.erb

  <div class="comments-container">
    <%= form_with model: [@event, @comment], local: true do |f| %>
      <%= f.text_field :text, placeholder: "コメントする", rows:"2", id:"comment_text" %>
      <%= f.submit 'SEND' %>
    <% end %>
    <h4>＜コメント一覧＞</h4>
    <div id ='comments'>
      <% @comments.each do |comment| %>
        <p class = "latest_comment"><%= comment.created_at %></p>
        <p class="comment"><%= comment.text %></p>
      <% end %>
    </div>
  </div>
</div>

app/channels/comment_channel.js

import consumer from "./consumer"

consumer.subscriptions.create("CommentChannel", {
  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 time = `<p>${data.content.created_at}</p>`
    const text = `<p>${data.content.text}</p>`;
    const comments = document.getElementById('comments');
    const newComment = document.getElementById('comment_text');
    comments.insertAdjacentHTML('afterbegin', text);
    comments.insertAdjacentHTML('afterbegin', time);
    newComment.value='';
  }
});

Answer 1

action cableを利用せずに非同期通信を行いました！