戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク8-6   リアルタイムコメント

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




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


コマンド
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) 
              } 
          } 
      ) 
  }); 
}); 




この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146