前提・実現したいこと
基本的なコメント機能は実装済みで
さらにコメント機能をActionCableで非同期通信にする実装中です。
コメントを送信すると非同期でコメント欄に表示させるようにしたいのですが、
現状ではリロードを行わないと表示されません。
発生している問題・エラーメッセージ
コメント送信(画面はそのまま、コメントは反映されない)→リロード→コメント欄に表示される
という状況です。
jQueryは非導入です
該当のソースコード
ChannelJs
1import consumer from "./consumer" 2 3consumer.subscriptions.create("CommentChannel", { 4 5 received(data) { 6 const html = `<p>${data.content.text}</p>`; 7 const comments = document.getElementById('commentid'); 8 const newComment = document.getElementById('comment_text'); 9 messages.insertAdjacentHTML('afterbegin', html); 10 newComment.value=''; 11 } 12});
ChannelRb
1class CommentChannel < ApplicationCable::Channel 2 def subscribed 3 stream_from "comment_channel" 4 end 5end
CommentsController
1class CommentsController < ApplicationController 2 3 def create 4 @comment = Comment.new(comment_params) 5 if @comment.save 6 ActionCable.server.broadcast 'comment_channel', content: @comment 7 else 8 @item = @comment.item 9 @comments = @item.comments 10 render 'items/show' 11 end 12 end 13 14 private 15 def comment_params 16 params.require(:comment).permit(:text).merge(user_id: current_user.id, item_id: params[:item_id]) 17 end 18end
show
1<p class="comments">コメント一覧</p> 2<div class="comment-room", id="commentid"> 3 <% @comments.each do |comment| %> 4 <li class="comments-list"> 5 <%= link_to comment.user.nickname, root_path, class: :comment_user %> 6 <%= comment.text %> 7 <div class="comment-created-at"><%= l comment.created_at, format: :short %></div> 8 </li> 9 <% end %> 10</div> 11 12<div class="comment-box"> 13 <% if user_signed_in? && @item.purchase_history.nil? %> 14 <%= form_with(model: [@item, @comment], local: true) do |f| %> 15 <form> 16 <%= f.text_area :text, class: "comment-text" %> 17 <button class="comment-btn"> 18 <%= image_tag "comment.png" , class:"comment-flag-icon" , width:"20", height:"25" %> 19 <%= f.submit "コメントする", class: "comment-submit" %> 20 </button> 21 </form> 22 <% end %> 23 <% end %> 24</div>
補足情報(FW/ツールのバージョンなど)
rails 6.0.0
devise
ActiveStorage
あなたの回答
tips
プレビュー