ActionCableを用いているのに、画面がリロードされて困っています。

Question

前提・実現したいこと

現在、ActionCableを用いたコメント機能の実装を行っているのですが、
コメントを入力後画面が一度リロードされてからコメントの表示がされており、即時更新ができず困っています。
原因がお分かりになる方、いらっしゃいましたらご教授お願い致します。

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

デスクトップ上にエラーメッセージは表示されていませんが rails sでサーバーを起動させた際、ターミナルに
CommentChannel is transmitting the subscription confirmation
CommentChannel is streaming from comment_channel
と出力されています。

挙動的には、コメントの投稿後に即時更新でコメントの表示を行いたいところ
現在、コメント⇨画面が自動リロードされてからコメントが表示されている状態です。

該当のソースコード

comments_controller

class CommentsController < ApplicationController
 
  def create
    @comment = Comment.create(comment_params)
    #redirect_to "/recipes/#{@comment.recipe_id}"
    if @comment.save
      ActionCable.server.broadcast 'comment_channel', content: @comment
    end
  end

  private
  def comment_params
    params.require(:comment).permit(:comment).merge(user_id: current_user.id, recipe_id: params[:recipe_id])
  end
end

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

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.comment}</p>`;
    const comments = document.getElementById('comments');
    const newComment = document.getElementById('recipe_comment_comment');
    comments.insertAdjacentHTML('afterbegin', html);
    newComment.value = '';
   }
});

show.html.erb

~~~省略~~~

  <%# コメント投稿機能 %>
    <div class="comment__container">
      <% if user_signed_in? %>
        <%= form_with(model: [@recipe, @comment], local: true) do |f| %>
          <%= f.text_area :comment, placeholder: "コメントする", rows: "2" %>
          <%= f.submit '送信' %>
        <% end %>
      <% else %>
        <strong><p>※※※ コメントの投稿には新規登録/ログインが必要です ※※※</p></strong>
      <% end %>

        <div class="comments">
          <h4>＜コメント一覧＞</h4>
            <% @comments.each do |comment| %>
            <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>：</strong>
              <p><%= comment.comment %></p>
            <% end %>
        </div>
    </div>

試したこと

javascript/channels/comment_channel.js の newComment の定義部分が comment_comment　となっていたため、recipe_comment_comment へ記述変更しましたが、即時更新機能の実現には至りませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

ざっとコードを見て気になった点を記載しています。手元で動かしていないので、直らなかったらすみません。

show.html.erb

form_with(model: [@recipe, @comment], local: true)

local: true だと通常のPOSTリクエストを送信して返ってきたHTMLを表示する挙動になるので、今回のようにページ遷移を伴わない更新をする場合は false が良いかと思います。

参考: https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with-label-form_with+options

Comments

[qwertyuiopp]

有難うございます。
試してみましたが、直りませんでした。。