ActionCableでcurrent_userIDを取得する方法をご教授いただきたいです
解決したいこと
Ruby on Railsで対話型のラインのようなチャット機能をActionCableを使用して作成しています。
リアルタイムチャット自体は実装できたのですが、別ブラウザで機能確認を行ったところ、ログイン中のユーザーidがうまく取得できず、送信側の表示になってしまいます。リロードを行うと送信（右側）受信（左側）それぞれ正常な位置に戻ります。
送信者・受信者は、message_channel.jsファイルのreceived(date)で条件分岐を行っています。
解決方法をご教授いただきたいです。
発生している問題・エラー
下記Gifのような現象が発生しています。
リアルタイムチャット
該当するソースコード
-- Message_controller.rb --
class MessagesController < ApplicationController
before_action :set_message, only: %i[index create]
def index
@user = @room.user_id
@messages = @room.messages.includes(:user).order(:id)
@message = current_user.messages.build
end
def create
@message = Message.create!(message_params)
ActionCable.server.broadcast 'message_channel', content: @message, user: current_user,
time: @message.created_at.strftime('%Y/%m/%d %H:%M:%S')
end
private
def message_params
params.require(:message).permit(:content, :image).merge(user_id: current_user.id, room_id: params[:room_id])
end
def set_message
@room = Room.find(params[:room_id])
end
end
-- _message.html.erb --
<div class="message" id="message">
<% @messages.each do |message| %>
<% if current_user.id == message.user_id %>
<div class="my-content" id="my-message">
<div class="my-message">
<div class="my-message-date">
<%= l message.created_at %>
</div>
<div class="my-message-content" >
<%= simple_format(h message.content) %>
</div>
<%# <%= image_tag message.image.variant(resize: '500x500'), class: 'my-message-image' if message.image.attached? %>
</div>
</div>
<% else %>
<div class="content">
<div class="upper-message">
<div class="message-user">
<%= message.user.nickname %>
</div>
</div>
<div class="lower-message">
<div class="message-content" >
<%= simple_format(h message.content) %>
</div>
<div class="message-date">
<%= l message.created_at %>
</div>
<%# <%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>
</div>
</div>
<% end %>
<% end %>
</div>
-- message_channel.js --
import consumer from "./consumer"
consumer.subscriptions.create("MessageChannel", {
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 nickName = `${data.user.nickname}`
const content = `${data.content.content}`
const messageData = `${data.time}`
const currentUser = `${data.user.id}`
const sendUser = `${data.content.user_id}`
if (currentUser == sendUser) {
const HTML = `
<div class="my-content">
<div class="my-message">
<div class="my-message-date">
${messageData}
</div>
<div class="my-message-content">
${content}
</div>
</div>
</div>
`
const messages = document.getElementById('message')
const newMessage = document.getElementById('content')
messages.insertAdjacentHTML('beforeend', HTML)
newMessage.value=''
} else {
const HTML = `
<div class="content">
<div class="upper-message">
<div class="message-user">
${nickName}
</div>
</div>
<div class="lower-message">
<div class="message-content" >
${content}
</div>
<div class="message-date">
${messageData}
</div>
</div>
</div>
`
const messages = document.getElementById('message')
const newMessage = document.getElementById('content')
messages.insertAdjacentHTML('beforeend', HTML)
newMessage.value=''
}
}
});
-- message_channel.rb --
class MessageChannel < ApplicationCable::Channel
def subscribed
stream_from 'message_channel'
end
def unsubscribed
# Any cleanup needed when channel is unsubscribed
end
end
-- application_cable/connection.rb --
module ApplicationCable
class Connection < ActionCable::Connection::Base
identified_by :current_user
def connect
self.current_user = find_verified_user
end
private
def find_verified_user
if verified_user = User.find_by(id: cookies.signed[:user_id])
verified_user
else
reject_unauthorized_connection
end
end
end
end
Messages_controllerにて、ActionCableに渡すインスタンスの変更、connection.rbでcurrent_userを定義したりを行いましたが、受信者と送信者でビューを変えることができませんでした。
恐れ入りますが、どなたかご教授いただきたいです。
0