メッセージをリアルタイムで送りあうことができるようにします。
コマンド
rails g channel Message
ルートの設定をします。
記述追加 config\routes.rb
6行目に「mount ActionCable.server => '/cable'」の記述を追加しています。
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' mount ActionCable.server => '/cable' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show', as: 'users' get '/myprojects' => 'project#list' get 'settings/payment', to: 'users#payment', as: 'settings_payment' get '/conversations', to: 'conversations#list', as: "conversations" get '/conversations/:id', to: 'conversations#show', as: "conversation_detail" post '/users/edit', to: 'users#update' post '/free' => 'charge#free' post '/settings/payment', to: 'users#update_payment', as: "update_payment" post '/reviews', to: 'reviews#create' post 'messages', to: 'messages#create' resources :project do resources :task, only: [:show] resources :reviews, only: [:create, :destroy] end # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
「app\channels\message_channel.rb」ファイルの記述を以下のように変更します。
記述変更 app\channels\message_channel.rb
class MessageChannel < ApplicationCable::Channel def subscribed conversation = Conversation.find params[:conversation] stream_for conversation end end
「app\controllers\messages_controller.rb」ファイルに記述を追加します。
1.18行目から22行目の記述を以下の記述に置き換えます。
if @message.save conversation.update!(updated_at: @message.created_at) receiver = conversation.sender.id == current_user.id ? conversation.receiver : conversation.sender MessageChannel.broadcast_to conversation, sender_id: current_user.id, sender: render_message(@message, current_user), receiver: render_message(@message, receiver) if URI(request.referrer).path == conversation_detail_path(id: receiver.id) return render json: {success: true} end redirect_to request.referrer, notice: "メッセージを送りました" else redirect_to request.referrer, alert: "メッセージを送れませんでした" end
2.40行目にプライベートメソッド「render_message()」を追加します。
def render_message(message, user) self.render_to_string partial: 'conversations/message', locals: {m: message, user: user} end
記述追加 app\controllers\messages_controller.rb
class MessagesController < ApplicationController def create if current_user.id == message_params[:receiver_id] redirect_to request.referrer, alert: "自分にメッセージを送ることはできません" end conversation = Conversation.where("(sender_id = ? AND receiver_id = ?) OR (sender_id = ? AND receiver_id = ?)", current_user.id, message_params[:receiver_id], message_params[:receiver_id], current_user.id ).first if !conversation.present? conversation = Conversation.create(sender_id: current_user.id, receiver_id: message_params[:receiver_id]) end @message = Message.new(user_id: current_user.id, conversation_id: conversation.id, content: message_params[:content] ) if @message.save conversation.update!(updated_at: @message.created_at) receiver = conversation.sender.id == current_user.id ? conversation.receiver : conversation.sender MessageChannel.broadcast_to conversation, sender_id: current_user.id, sender: render_message(@message, current_user), receiver: render_message(@message, receiver) if URI(request.referrer).path == conversation_detail_path(id: receiver.id) return render json: {success: true} end redirect_to request.referrer, notice: "メッセージを送りました" else redirect_to request.referrer, alert: "メッセージを送れませんでした" end end private def message_params params.require(:message).permit(:content, :receiver_id) end def render_message(message, user) self.render_to_string partial: 'conversations/message', locals: {m: message, user: user} end end
「app\javascript\channels\message_channel.js」ファイルを以下のように編集します。
記述編集 app\javascript\channels\message_channel.js
import consumer from "./consumer" $(document).on('turbolinks:load', () => { $('[data-channel-subscribe="conversation"]').each(function(index, element) { var $element = $(element), $chatList = $('#message_list'), $form = $('#new_message'), conversation_id = $element.data('conversation-id'), user_id = $element.data('user-id') consumer.subscriptions.create( { channel: "MessageChannel", conversation: conversation_id }, { received: function(data) { if (data.sender_id == user_id) { $chatList.append(data.sender) } else { $chatList.append(data.receiver) } $form[0].reset(); $chatList.animate({ scrollTop: $chatList.prop("scrollHeight") }, 1000) } } ) }); });
ブラウザ確認
http://localhost:3000/conversations
メッセージを送るとリアルタイムで表示できるようになりました。