Rails6.0 | 仕事売買サイトの構築 | 50 | メッセージと会話| リアルタイムコメント - 学生向けプログラミング入門

[49]メッセージと会話| コメント << [ホームに戻る]　>> [51]メッセージと会話| コメントへのファイル添付

コメントがリアルタイムに反映するようにします。

コマンド
rails g channel Comment

「app\channels\comment_channel.rb」ファイルを以下のように編集します。

記述編集　app\channels\comment_channel.rb

class CommentChannel < ApplicationCable::Channel
  def subscribed
    order = Order.find params[:order]
    stream_for order
  end
end

「app\controllers\comments_controller.rb」ファイルを以下のように編集します。

記述編集　app\controllers\comments_controller.rb

13～15行目に記述を追加しています。
25行目、28行目をコメントアウトしています。
26、29行目に記述を追加しています。
35～37行目に記述を追加しています。

コードをコピーしてファイルの内容を置き換えて下さい。

class CommentsController < ApplicationController
    before_action :authenticate_user!
    before_action :is_valid_order

    def create
        order = Order.find(comment_params[:order_id])

        if comment_params[:content].blank?
            # 「無効なメッセージ」とアラートを返す
            return render json: {success: false}
        end

        if order.buyer_id != current_user.id && order.seller_id != current_user.id
            return render json: {success: false}
        end

        @comment = Comment.new(
            user_id: current_user.id,
            order_id: order.id,
            content: comment_params[:content],
    
        )

        if @comment.save
            #redirect_to request.referrer, notice: "コメントを送りました"
            CommentChannel.broadcast_to order, message: render_comment(@comment)
        else
            #redirect_to request.referrer, alert: "コメントすることができません"
            return render json: {success: false}    
        end
    end

    private

    def render_comment(comment)
        self.render_to_string partial: 'orders/comment', locals: {comment: comment}
    end

    def comment_params
        params.require(:comment).permit(:content, :order_id, :attachment_file)
    end

    def is_valid_order
        redirect_to dashboard_path, alert: "無効です" unless Order.find(comment_params[:order_id]).present?
    end
end

「app\javascript\channels\comment_channel.js」ファイルを以下のように編集します。

記述編集　app\javascript\channels\comment_channel.js

import consumer from "./consumer"

$(document).on('turbolinks:load', () => {
  $('[data-channel-subscribe="order"]').each(function(index, element) {
      var $element = $(element),
          $chatList = $('#comment-list'),
          $form = $('#new-comment'),
          order_id = $element.data('order-id')

      consumer.subscriptions.create(
          {
              channel: "CommentChannel",
              order: order_id
          },
          {
              received: function(data) {
                  console.log(data.message)
                  $chatList.append(data.message)

                  $form[0].reset();
                  $chatList.animate({ scrollTop: $chatList.prop("scrollHeight") }, 1000)
              }
          }
      )
  });
});