チャット画面で文章を送信したときにif文が効かない

Question

チャットの画面で自分と相手のチャットを区別するために、それぞれの自分の発言は右に、相手の発言は左に表示しようとしたのですがうまく反映されません
if文を使い自分の発言と相手の発言を区別するため自分の発言にはmessage-me相手の発言にはmessage-youクラスをつけたのですが実際にチャットを送信すると自分の発言も相手の発言もクラス名がmessage-meになってしまい両方右側に表示されてしまいます。
ですが更新すると相手の発言のクラス名がmessage-youに変わり左側に表示されるようになります。

更新をせずに自分の投稿は右に、相手の投稿は左に表示するにはどうしたらいいのでしょうか。
足りない記述があれば付け足しさせていただきます。
詳しい方教えていただけると幸いです。

画像１

画像2

_chat_message.html.erb

<% if chat_message.user != current_user %>
<div class="message-you" 　id="parent">
    <img src="<%= chat_message.user.image %>" class="message-icon">
    <div class="chatUserName"><%= chat_message.user.username %></div>
    <a class="time-hover">
        <span class="dm-p"><%= time_ago_in_words(chat_message.created_at) %>前</span>
        <span class="hover-time"><%= time_tag(chat_message.created_at) %></span>
    </a>
    <div class="commonMessage-you">
        <div><%= chat_message.message %></div>
    </div>
</div>
<% else %>
<div class="message-me" 　id="parent">
    <img src="<%= chat_message.user.image %>" class="message-icon-me">
    <div class="m-chat-body">
    <div class="chatUserName-m"><%= chat_message.user.username %></div>
    <div class="dm-m-p">
    <a class="time-hover">
        <span class="dm-p"><%= time_ago_in_words(chat_message.created_at) %>前</span>
        <span class="hover-time"><%= time_tag(chat_message.created_at) %></span>
    </a>
    </div>
    <div class="commonMessage-me">
        <div><%= chat_message.message %></div>
    </div>
    </div>
</div>
<% end %>

chat_room_channel.rb

class ChatRoomChannel < ApplicationCable::Channel
  def subscribed
    stream_for "chat_room_#{params[:room_id]}"
  end

  def unsubscribed
    # Any clkanup needed when channel is unsubscribed
  end

  def speak(data)
    message = ChatMessage.create(chat_room_id: data['room_id'], user_id: data['user_id'], message: data['message'])
    ChatRoomChannel.broadcast_to "chat_room_#{data['room_id']}", content: render_message(message)
  end

  private
    def render_message(message)
      ApplicationController.renderer.render(partial: 'chat_messages/chat_message', locals: { chat_message: message, current_user: message.user })
    end
end

chat/show.html.erb

  <header class="header">
    <div class="chatPartner">
      <%= link_to chat_index_path(), method: :get do%>
      <span class="material-icons left">keyboard_arrow_left</span>
      <% end %>
      <div class="dm-username"><%= @chat_room_user.username %></div>
      <div class="dm-userid">@<%= @chat_room_user.user_id %></div>
    </div>
  </header>
<div class="messagesArea messages" id="scroll-inner">
<div class="area">
<%= render @chat_messages %>
</div>
</div>
  <div class="text-box">
  <form class="messageInputForm">
    <div class="messenger">
      <textarea type="text" data-behavior="room_speaker" class="messageInputForm_input" placeholder="メッセージを入力..."></textarea>
    </div>
  </form>
  </div>
</div>
</div>

###chat_controller.rb

class ChatController < ApplicationController
  def create
    current_user_chat_rooms = ChatRoomUser.where(user_id: current_user.id).map(&:chat_room)
    chat_room = ChatRoomUser.where(chat_room: current_user_chat_rooms, user_id: params[:user_id]).map(&:chat_room).first
    if chat_room.blank?
      chat_room = ChatRoom.create
      ChatRoomUser.create(chat_room: chat_room, user_id: current_user.id)
      ChatRoomUser.create(chat_room: chat_room, user_id: params[:user_id])
    end
    redirect_to action: :show, id: chat_room.id
  end
  def index
    @current_user =  current_user
    chat_room = ChatRoom.find_by(id: params[:id])
    @chat_rooms = ChatRoom.joins(:chat_room_users).
      where("chat_room_users.user_id =?", @current_user.id).order(created_at: :desc)
    @chat_messages = ChatMessage.where("chat_room_users.user_id =?", @current_user.id)
  end


  def show
    chat_room = ChatRoom.find_by(id: params[:id])
    @current_user = User.find_by(id: session[:user_id])
    @chat_room_user = chat_room.chat_room_users.
      where.not(user_id: current_user.id).first.user
    @chat_room_myuser = chat_room.chat_room_users.
      where.not(user_id: current_user.id).last.user
    @chat_rooms = ChatRoom.joins(:chat_room_users).
      where("chat_room_users.user_id =?", @current_user.id)
    @chat_messages = ChatMessage.where(chat_room: chat_room).order(:created_at)
  end
end

###chat.js

if (/chat/.test(window.location.pathname)) {
  var path = window.location.pathname.split('/');
  var room_id = path[path.length - 1];
  App.chat_room = App.cable.subscriptions.create({
    channel: "ChatRoomChannel",
    room_id: room_id
  }, {
    connected: function () {},
    disconnected: function () {},
    received: function (data) {
      $('.messages').append(data['content']);
    },
    speak: function (message) {
      return this.perform('speak', {
        message: message,
        room_id: room_id,
        user_id: $('meta[name="current_user_id"]').attr('content')
      });
    }
  });
  $(document).on('keypress', '[data-behavior~=room_speaker]', function (event) {
    if (event.keyCode === 13) {
      App.chat_room.speak(event.target.value);
      event.target.value = '';
      return event.preventDefault();
    }
  });
}

Comments

[H4L]

添付画像とは反対に、
チャットの一番始めが相手の場合（message-youを期待する場合)どうなるか教えて欲しいです

[yamazamaki]

相手から発言した場合ということでしょうか

[H4L]

そうです

Answer 1

Rubyではありませんでしたが、前にこういうのやったことありますね。
Rubyがあまりわからないですが、ぱっと見、サーバー側で、自分と相手の切り分けをしていませんか？

取得するのはあくまでも、roomに対するMessagesで
自分のメッセージであるか相手のメッセージであるかはフロント側で切り分ける方が良いと思います。

Comments

[yamazamaki]

回答ありがとうございます。
_chat_message.html.erbで表示を切り替えている場合はサーバー側で切り替えていることになるのでしょうか

[mackintosh]

_chat_message.html.erbで表示を切り替えている場合はサーバー側で切り替えていることになるかどうかは提示コードだけでは情報が不足しているように思えるのであなたにしかわからないと思います。

多分、_chat_message.html.erbにアクセスしたらrender_messageを読み込んでて、
そこで locals: { chat_message: message, current_user: message.user }
となってて、ここでcurrent_user（自分自身？）を表していて
<% if chat_message.user != current_user %>
につながってますよね。

なので、更新したら、左右でわかれるようになりますが
更新しなくても分ける非同期な処理が抜けています。

> チャットを送信すると自分の発言も相手の発言もクラス名がmessage-meになってしまい両方右側に表示されてしまいます。

この、チャットを送信するとメッセージ一覧に表示される部分の処理を提示してください。
更新前の画像があるということは、その処理がどこかにあるはずです。

[mackintosh]

あと本質問ではないので気にすべきところではありませんが相手からの応答の表示仕様はどうなってるのか気になるところではあります。

ブラウザ２つ立ち上げて確認したらわかりますが、相手からの応答もリアルタイムで表示したいならシステム構造やアーキから見直し必要もありそうです。
https://all-you-need-is-tuna.noplan.cc/

[yamazamaki]

追記しました。

[mackintosh]

同じファイルがあるようですが、少なくとも質問のセルフチェック行って質問しませんか。