Action Cable意味なし

Question

実装したい機能

ライブのイベント投稿機能を備えたWebアプリケーションを
実装中です。
投稿されたあるイベントに対してコメント機能を
追加しようと試みました。
コメント機能は勉強も兼ねてAction Cableを
用いて実装しようと思っていました。

#　修正したい箇所
無事Action Cableを用いて実装できたと
思って挙動確認をしてみました。
railsのエラー表示は出ない。
でも、フォーム画面にコメントを記述し
送信ボタンを押しても記述したコメントが
画面に表示されません。

おかしいなと思って、command (⌘) + Rで
画面の更新を行うとコメントが表示されました。

そもそもAction Cableは非同期通信を用いて
送信ボタンを押した時点でコメントが表示される、
即時更新機能を吉相できるフレームワークのはずです。
自分でcommand (⌘) + Rを押さないと
コメントが更新されないのであれば
Action Cableを用いた意味がないなあと思いました。

どこに修正すべき箇所があるのかお教え頂けないでしょうか？

実装した箇所

アソシエーションの関係性は
Event has_many comments
Comment belongs_to event
です。

routes.rb

  resources :events do 
    resources :comments, only: :create
    collection do
      get "search"
    end
  end

comments_controller

  def create
    @comment = Comment.new(comment_params)
    if @comment.save
      ActionCable.server.broadcast 'comment_channel', content: @comment
    end
  end
  private
  def comment_params
    params.require(:comment).permit(:text).merge(event_id: params[:event_id])
  end

events_controller

コメントはイベントの詳細(showアクション)の
ビューで表示、投稿をさせたいです。

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

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 %>
  </div>
  <div id ='commments'>
    <h4>＜コメント一覧＞</h4>
    <% @comments.each do |comment| %>
      <p class="comment"><%= comment.text %></p>
    <% end %>
  </div>

app/channels/comment_channel.rb

class CommentChannel < ApplicationCable::Channel
  def subscribed
    stream_from "comment_channel"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

app/javascript/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 html = `<p>${data.content.text}</p>`;
    const comments = document.getElementById('comments');
    const newComment = document.getElementById('comment_text');
    comments.insertAdjacentHTML('afterbegin', html);
    newComment.value='';
  }
});

長文になり申し訳ありません。

Answer 1

とりあえず、

comment_channel.jsの

  received(data) {
    const html = `<p>${data.content.text}</p>`;
    const comments = document.getElementById('comments');
    const newComment = document.getElementById('comment_text');
    comments.insertAdjacentHTML('afterbegin', html);
    newComment.value='';
  }

ここにdebuggerかconsole.logを追記して、ここの処理が通るか確かめてみましょう。
もし通らなかった場合教えてください。