teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

7

タイトル・内容の変更

2021/02/23 15:28

投稿

Aki-F
Aki-F

スコア0

title CHANGED
File without changes
body CHANGED
@@ -9,74 +9,6 @@
9
9
  下記Gifのような現象が発生しています。
10
10
  [リアルタイムチャット](https://user-images.githubusercontent.com/75027499/108735166-8b148a00-7573-11eb-9699-76536a22ad0b.gif)
11
11
  ### 該当するソースコード
12
- ```Ruby
13
- -- Message_controller.rb --
14
- class MessagesController < ApplicationController
15
- before_action :set_message, only: %i[index create]
16
-
17
- def index
18
- @user = @room.user_id
19
- @messages = @room.messages.includes(:user).order(:id)
20
- @message = current_user.messages.build
21
- end
22
-
23
- def create
24
- @message = Message.create!(message_params)
25
- ActionCable.server.broadcast 'message_channel', content: @message, user: current_user,
26
- time: @message.created_at.strftime('%Y/%m/%d %H:%M:%S')
27
- end
28
-
29
- private
30
-
31
- def message_params
32
- params.require(:message).permit(:content, :image).merge(user_id: current_user.id, room_id: params[:room_id])
33
- end
34
-
35
- def set_message
36
- @room = Room.find(params[:room_id])
37
- end
38
- end
39
- ```
40
-
41
- ```ruby
42
- -- _message.html.erb --
43
- <div class="message" id="message">
44
- <% @messages.each do |message| %>
45
- <% if current_user.id == message.user_id %>
46
- <div class="my-content" id="my-message">
47
- <div class="my-message">
48
- <div class="my-message-date">
49
- <%= l message.created_at %>
50
- </div>
51
- <div class="my-message-content" >
52
- <%= simple_format(h message.content) %>
53
- </div>
54
- <%# <%= image_tag message.image.variant(resize: '500x500'), class: 'my-message-image' if message.image.attached? %>
55
- </div>
56
- </div>
57
- <% else %>
58
- <div class="content">
59
- <div class="upper-message">
60
- <div class="message-user">
61
- <%= message.user.nickname %>
62
- </div>
63
- </div>
64
- <div class="lower-message">
65
- <div class="message-content" >
66
- <%= simple_format(h message.content) %>
67
- </div>
68
- <div class="message-date">
69
- <%= l message.created_at %>
70
- </div>
71
- <%# <%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>
72
- </div>
73
- </div>
74
- <% end %>
75
- <% end %>
76
- </div>
77
- ```
78
-
79
-
80
12
  ```javascript
81
13
  -- message_channel.js --
82
14
  import consumer from "./consumer"
@@ -176,5 +108,9 @@
176
108
  end
177
109
  ```
178
110
 
111
+ ### 行ったこと
179
- Messages_controllerにて、ActionCableに渡すインスタンスの変更、connection.rbでcurrent_userを定義したりを行いましたが、受信者と送信者でビューを変えることができませんでした
112
+ connection.rbでcurrent_userを定義しました。
113
+
114
+ ### 解決したいこと
115
+ 受信者と送信者のチャット画面でメッセージの表示位置を変えることができませんでした。
180
- 恐れ入りが、どなたかご教授いただきたいです。
116
+ 初学者のため拙いコードで申し訳ございせんが、どなたかご教授いただきたいです。

6

初心者マークを付与

2021/02/23 15:28

投稿

Aki-F
Aki-F

スコア0

title CHANGED
File without changes
body CHANGED
@@ -3,7 +3,7 @@
3
3
  リアルタイムチャット自体は実装できたのですが、別ブラウザで機能確認を行ったところ、ログイン中のユーザーidがうまく取得できず、送信側の表示になってしまいます。リロードを行うと送信(右側)受信(左側)それぞれ正常な位置に戻ります。
4
4
  送信者・受信者は、message_channel.jsファイルのreceived(date)で条件分岐を行っています。
5
5
 
6
- 解決方法をご教授いただきたいです。
6
+ どなたか解決方法をご教授いただきたいです。
7
7
 
8
8
  ### 発生している問題・エラー
9
9
  下記Gifのような現象が発生しています。

5

内容説明の補足

2021/02/23 10:45

投稿

Aki-F
Aki-F

スコア0

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,7 @@
1
1
  ### 解決したいこと
2
2
  Ruby on Railsで対話型のラインのようなチャット機能をActionCableを使用して作成しています。
3
3
  リアルタイムチャット自体は実装できたのですが、別ブラウザで機能確認を行ったところ、ログイン中のユーザーidがうまく取得できず、送信側の表示になってしまいます。リロードを行うと送信(右側)受信(左側)それぞれ正常な位置に戻ります。
4
+ 送信者・受信者は、message_channel.jsファイルのreceived(date)で条件分岐を行っています。
4
5
 
5
6
  解決方法をご教授いただきたいです。
6
7
 

4

タイトル・内容の変更

2021/02/23 08:27

投稿

Aki-F
Aki-F

スコア0

title CHANGED
@@ -1,1 +1,1 @@
1
- ActionCableでログイン中のユーザーの取得方法が知りたいです
1
+ ActionCableでcurrent_userIDを取得する方法をご教授いだきたいです
body CHANGED
@@ -1,28 +1,32 @@
1
1
  ### 解決したいこと
2
- Ruby on RailsのActionCableを使用して対話型のラインのようなチャット機能を作成しています。
2
+ Ruby on Rails対話型のラインのようなチャット機能をActionCableを使用して作成しています。
3
- リアルタイムチャット自体は実装できたのですが、別ブラウザ+別アカウントで機能確認を行ったところ、ログイン中のユーザーidうまく取得できていない様子で片方で送信したメッセージがどちらの画面でも送信側の表示になってしまいます。リロードを行うと送信受信それぞれ正常な位置に戻ります。
3
+ リアルタイムチャット自体は実装できたのですが、別ブラウザで機能確認を行ったところ、ログイン中のユーザーidうまく取得でき、送信側の表示になってしまいます。リロードを行うと送信(右側)受信(左側)それぞれ正常な位置に戻ります。
4
- 下記Gifのような現象が発生しています。
4
+
5
5
  解決方法をご教授いただきたいです。
6
6
 
7
7
  ### 発生している問題・エラー
8
+ 下記Gifのような現象が発生しています。
8
- [リアルタイムチャット画面](https://i.gyazo.com/45f5a2439c852f3abb962ce6ab66ba58.gif)
9
+ [リアルタイムチャット](https://user-images.githubusercontent.com/75027499/108735166-8b148a00-7573-11eb-9699-76536a22ad0b.gif)
9
-
10
10
  ### 該当するソースコード
11
11
  ```Ruby
12
+ -- Message_controller.rb --
12
13
  class MessagesController < ApplicationController
13
- before_action :set_message, only: [:index, :create]
14
+ before_action :set_message, only: %i[index create]
15
+
14
16
  def index
15
- @user = RoomUser.where(user_id: @room).first
17
+ @user = @room.user_id
16
18
  @messages = @room.messages.includes(:user).order(:id)
17
19
  @message = current_user.messages.build
18
20
  end
21
+
19
22
  def create
20
- @user = current_user
21
23
  @message = Message.create!(message_params)
22
- ActionCable.server.broadcast "message_channel", content: @message, user: @user, time: @message.created_at.strftime("%Y/%m/%d %H:%M:%S")
24
+ ActionCable.server.broadcast 'message_channel', content: @message, user: current_user,
25
+ time: @message.created_at.strftime('%Y/%m/%d %H:%M:%S')
23
26
  end
24
27
 
25
28
  private
29
+
26
30
  def message_params
27
31
  params.require(:message).permit(:content, :image).merge(user_id: current_user.id, room_id: params[:room_id])
28
32
  end
@@ -34,6 +38,7 @@
34
38
  ```
35
39
 
36
40
  ```ruby
41
+ -- _message.html.erb --
37
42
  <div class="message" id="message">
38
43
  <% @messages.each do |message| %>
39
44
  <% if current_user.id == message.user_id %>
@@ -45,7 +50,7 @@
45
50
  <div class="my-message-content" >
46
51
  <%= simple_format(h message.content) %>
47
52
  </div>
48
- <%= image_tag message.image.variant(resize: '500x500'), class: 'my-message-image' if message.image.attached? %>
53
+ <%# <%= image_tag message.image.variant(resize: '500x500'), class: 'my-message-image' if message.image.attached? %>
49
54
  </div>
50
55
  </div>
51
56
  <% else %>
@@ -62,7 +67,7 @@
62
67
  <div class="message-date">
63
68
  <%= l message.created_at %>
64
69
  </div>
65
- <%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>
70
+ <%# <%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>
66
71
  </div>
67
72
  </div>
68
73
  <% end %>
@@ -72,6 +77,7 @@
72
77
 
73
78
 
74
79
  ```javascript
80
+ -- message_channel.js --
75
81
  import consumer from "./consumer"
76
82
 
77
83
  consumer.subscriptions.create("MessageChannel", {
@@ -90,12 +96,11 @@
90
96
  const currentUser = `${data.user.id}`
91
97
  const sendUser = `${data.content.user_id}`
92
98
  if (currentUser == sendUser) {
93
- debugger
94
99
  const HTML = `
95
100
  <div class="my-content">
96
101
  <div class="my-message">
97
102
  <div class="my-message-date">
98
- ${messageData}
103
+ ${messageData}
99
104
  </div>
100
105
  <div class="my-message-content">
101
106
  ${content}
@@ -108,7 +113,6 @@
108
113
  messages.insertAdjacentHTML('beforeend', HTML)
109
114
  newMessage.value=''
110
115
  } else {
111
- debugger
112
116
  const HTML = `
113
117
  <div class="content">
114
118
  <div class="upper-message">
@@ -136,9 +140,10 @@
136
140
  ```
137
141
 
138
142
  ```ruby
143
+ -- message_channel.rb --
139
144
  class MessageChannel < ApplicationCable::Channel
140
145
  def subscribed
141
- stream_from "message_channel"
146
+ stream_from 'message_channel'
142
147
  end
143
148
 
144
149
  def unsubscribed
@@ -147,6 +152,28 @@
147
152
  end
148
153
  ```
149
154
 
155
+ ```ruby
156
+ -- application_cable/connection.rb --
157
+ module ApplicationCable
158
+ class Connection < ActionCable::Connection::Base
159
+ identified_by :current_user
160
+
161
+ def connect
162
+ self.current_user = find_verified_user
163
+ end
164
+
165
+ private
166
+
167
+ def find_verified_user
168
+ if verified_user = User.find_by(id: cookies.signed[:user_id])
169
+ verified_user
170
+ else
171
+ reject_unauthorized_connection
172
+ end
173
+ end
174
+ end
175
+ end
176
+ ```
177
+
150
- Messages_controllerにて、ActionCableに渡すインスタンスを様々な形にえてみたり行いましたが、解決できませんでした。
178
+ Messages_controllerにて、ActionCableに渡すインスタンス更、connection.rbでcurrent_userを定義したり行いましたが、受信者と送信者ビューを変えることができませんでした。
151
- 冗長になってしまい、申し訳ございません。
152
- 恐れ入りますが、どうぞよろしくお願致します。
179
+ 恐れ入りますが、どなたかご教授ただきたいです。

3

gifのリンクの編集

2021/02/22 16:20

投稿

Aki-F
Aki-F

スコア0

title CHANGED
@@ -1,1 +1,1 @@
1
- ActionCableでログイン中のユーザーの取得方法知りたいです。
1
+ ActionCableでログイン中のユーザーの取得方法知りたいです。
body CHANGED
@@ -1,11 +1,11 @@
1
1
  ### 解決したいこと
2
- Ruby on RailsのActionCable対話型のラインのようなチャット機能を作成しています。
2
+ Ruby on RailsのActionCableを使用して対話型のラインのようなチャット機能を作成しています。
3
- リアルタイムチャット自体は実装できたのですが、別ブラウザ+別アカウントで機能確認を行ったところ、ログイン中のユーザーidをうまく取得できていない様子で、片方で送信したがどちらも送信側の表示になってしまいます。リロードを行うと送信受信それぞれ正常な位置に戻ります。
3
+ リアルタイムチャット自体は実装できたのですが、別ブラウザ+別アカウントで機能確認を行ったところ、ログイン中のユーザーidをうまく取得できていない様子で、片方で送信したメッセがどちらの画面でも送信側の表示になってしまいます。リロードを行うと送信受信それぞれ正常な位置に戻ります。
4
4
  下記Gifのような現象が発生しています。
5
5
  解決方法をご教授いただきたいです。
6
6
 
7
7
  ### 発生している問題・エラー
8
- https://i.gyazo.com/45f5a2439c852f3abb962ce6ab66ba58.gif
8
+ [リアルタイムチャット画面](https://i.gyazo.com/45f5a2439c852f3abb962ce6ab66ba58.gif)
9
9
 
10
10
  ### 該当するソースコード
11
11
  ```Ruby

2

文法の修正

2021/02/20 14:27

投稿

Aki-F
Aki-F

スコア0

title CHANGED
@@ -1,1 +1,1 @@
1
- ActionCableでのチャット機能でログイン中のユーザー取得たい
1
+ ActionCableでログイン中のユーザー取得方法を知りたいです。
body CHANGED
@@ -148,4 +148,5 @@
148
148
  ```
149
149
 
150
150
  Messages_controllerにて、ActionCableに渡すインスタンスを様々な形に変えてみたりと行いましたが、解決できませんでした。
151
- 冗長になってしまい、申し訳ございません。どうぞよろしくお願い致します。
151
+ 冗長になってしまい、申し訳ございません。
152
+ 恐れ入りますが、どうぞよろしくお願い致します。

1

タイトル編集

2021/02/02 10:31

投稿

Aki-F
Aki-F

スコア0

title CHANGED
@@ -1,1 +1,1 @@
1
- ActionCableでのユーザー分岐
1
+ ActionCableでのチャット機能でログイン中のユーザーを取得したい
body CHANGED
File without changes