質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

1回答

845閲覧

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

yamazamaki

総合スコア6

Action Cable

Action Cableは、WebSocketをRailsに組み込む機能。Rails4でオプションとして存在していたWebSocketをRails5で標準機能したものです。Railsアプリケーションと同様のスタイルで、Rubyを用いたリアルタイム機能を記述できます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

3グッド

4クリップ

投稿2020/04/05 13:00

編集2022/01/12 10:55

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

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

画像1
イメージ説明
画像2
画像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

Ruby

1class ChatRoomChannel < ApplicationCable::Channel 2 def subscribed 3 stream_for "chat_room_#{params[:room_id]}" 4 end 5 6 def unsubscribed 7 # Any clkanup needed when channel is unsubscribed 8 end 9 10 def speak(data) 11 message = ChatMessage.create(chat_room_id: data['room_id'], user_id: data['user_id'], message: data['message']) 12 ChatRoomChannel.broadcast_to "chat_room_#{data['room_id']}", content: render_message(message) 13 end 14 15 private 16 def render_message(message) 17 ApplicationController.renderer.render(partial: 'chat_messages/chat_message', locals: { chat_message: message, current_user: message.user }) 18 end 19end

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(); } }); }
iio, kimaiio, DrqYuto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

H4L

2020/04/05 13:30

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

2020/04/05 13:38

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

2020/04/05 13:40

そうです
guest

回答1

0

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

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

投稿2020/04/05 13:54

mackintosh

総合スコア228

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamazamaki

2020/04/05 14:09

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

2020/04/05 14:40 編集

_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

2020/04/05 14:45

あと本質問ではないので気にすべきところではありませんが相手からの応答の表示仕様はどうなってるのか気になるところではあります。 ブラウザ2つ立ち上げて確認したらわかりますが、相手からの応答もリアルタイムで表示したいならシステム構造やアーキから見直し必要もありそうです。 https://all-you-need-is-tuna.noplan.cc/
mackintosh

2020/04/06 05:14

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問