前提・実現したいこと

現在Channelを用いてjsを記述しています。コメントの送信するボタンを押すと入力された内容が即時で画面に表示されるよう実装したいです。

発生している問題・エラーメッセージ

現在の状況としては送信するボタンを押しても即時で入力内容が表示されず、画面をリロードするとコメントが反映される状況です。

該当のソースコード

app/views/posts/show.html.erb
1        <div class="comment-form">
2          <% if user_signed_in? %>
3            <%= form_with model: [@post, @comment], id: "comment-form" do |f| %>
4              <div class="field">
5                <%= f.label :content, "コメント" %><br />
6                <%= f.text_field :content, id:"comment_content" %>
7              </div>
8              <div class="actions">
9                <%= f.submit "送信する", class: :form__btn  %>
10              </div>
11            <% end %>
12          <% else %>
13              <strong><p>※※※ コメントの投稿には新規登録/ログインが必要です ※※※</p></strong>
14          <% end %> 
15        </div>
16        <div id="comments">
17          <h4>＜コメント一覧＞</h4>
18          <ul class="comments_lists">
19            <% @post.comments.each do |comment| %>
20              <div class="comment">
21                <li class="comment_list">
22                  <%= "・#{comment.content}" %>
23                  <%= link_to comment.user.nickname, user_path(@post.user), class: :comment_user %>
24                </li>
25              </div>
26            <% end %>
27          </ul>
28        </div>

app/javascript/channels/comment_channel.js
1import consumer from "./consumer"
2
3if(location.pathname.match(/\/items\/\d/)){
4
5  consumer.subscriptions.create({
6    channel: "CommentChannel",
7    post_id: location.pathname.match(/\d+/)[0]
8  }, {
9
10    connected() {
11      // Called when the subscription is ready for use on the server
12    },
13
14    disconnected() {
15      // Called when the subscription has been terminated by the server
16    },
17
18    received(data) {
19      console.log(data) 
20      const html = `
21      <div class="comment">
22        <li class="comment_list">
23         ・${data.comment.content}
24          <a class="comment_user" href="/users/user.id">${data.user.nickname}</a>
25        </li>
26      </div>`
27      const comments = document.getElementById("comments")
28      comments.insertAdjacentHTML('beforeend', html)
29      const commentForm = document.getElementById("comment-form")
30      commentForm.reset();
31    }
32  })
33}
34

app/channels/comment_channel.rb
1class CommentChannel < ApplicationCable::Channel
2  def subscribed
3    @post = Post.find(params[:post_id])
4    stream_for @post
5  end
6
7  def unsubscribed
8    # Any cleanup needed when channel is unsubscribed
9  end
10
11end
12```app/controllers/posts_controller.rb
13  def create
14    @post = Post.new(post_params)
15    if @post.save
16      redirect_to root_path
17    else
18      render :new
19    end
20  end
21
22  def show
23    @post = Post.find(params[:id])
24    @comments = @post.comments.includes(:user)
25    @comment = Comment.new
26  end
27```app/controllers/comments_controller.rb
28  def create
29    @post = Post.find(params[:post_id])
30    @comment = Comment.new(comment_params)
31    if @comment.save
32      CommentChannel.broadcast_to @post, { comment: @comment, user: @comment.user }
33    end
34  end