teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Railsの自動更新機能ができない

編集履歴

質問編集履歴

5

autoReload.jsのurl指定部分をlocation.hrefに変更

2020/09/23 11:33

投稿

tomoZQ
tomoZQ

スコア14

test CHANGED
@@ -1 +1 @@
1
- Railsの自動更新機能
1
+ Railsの自動更新機能ができない
test CHANGED
@@ -18,61 +18,39 @@
18
18
 
19
19
  ### 発生している問題・エラーメッセージ
20
20
 
21
- エラーは出ていませんが、2画面立ち上げるとターミナルには、autoReload.jsで設定している7秒ごとに
21
+ コンソールにもターミナルにもエラーが出ていないように見えますが、autoReload.jsのdoneの処理にデータが入りません。
22
-
22
+
23
- ```
23
+ ```
24
-
24
+
25
- Started GET "/gossips/4/chats/api/chats?id=28" for ::1 at 2020-09-21 15:35:28 +0900
25
+ Started GET "/gossips/4/chats/new?id=56" for ::1 at 2020-09-23 20:17:42 +0900
26
-
26
+
27
- Processing by Api::ChatsController#new as JSON
27
+ Processing by ChatsController#new as JSON
28
-
28
+
29
- Parameters: {"id"=>"4"}
29
+ Parameters: {"id"=>"56", "gossip_id"=>"4"}
30
-
30
+
31
- User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
31
+ User Load (0.5ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
32
-
32
+
33
- Gossip Load (0.5ms) SELECT `gossips`.* FROM `gossips` LIMIT 1
33
+ Gossip Load (0.4ms) SELECT `gossips`.* FROM `gossips` WHERE `gossips`.`id` = 4 LIMIT 1
34
-
34
+
35
- ↳ app/controllers/api/chats_controller.rb:4:in `new'
35
+ ↳ app/controllers/chats_controller.rb:35:in `set_gossip'
36
-
36
+
37
- Rendering api/chats/new.json.jbuilder
37
+ Rendering chats/new.html.haml within layouts/application
38
-
38
+
39
- Chat Load (0.4ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 1 AND (id > 4)
39
+ Chat Load (0.6ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 4
40
-
40
+
41
- ↳ app/views/api/chats/new.json.jbuilder:1
41
+ ↳ app/views/chats/new.html.haml:12
42
+
42
-
43
+ User Load (0.4ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1
44
+
45
+ ↳ app/views/chats/new.html.haml:12
46
+
43
- Rendered api/chats/new.json.jbuilder (Duration: 1.8ms | Allocations: 768)
47
+ Rendered chats/new.html.haml within layouts/application (Duration: 17.9ms | Allocations: 10829)
44
-
48
+
45
- Completed 200 OK in 9ms (Views: 2.1ms | ActiveRecord: 1.5ms | Allocations: 3880)
49
+ Completed 200 OK in 40ms (Views: 33.4ms | ActiveRecord: 1.9ms | Allocations: 34969)
46
-
50
+
51
+
52
+
47
- ```
53
+ ```
48
-
49
- ```
50
-
51
- Started GET "/gossips/4/chats/api/chats?id=30" for ::1 at 2020-09-21 15:35:33 +0900
52
-
53
- Processing by Api::ChatsController#new as JSON
54
-
55
- Parameters: {"id"=>"4"}
56
-
57
- User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
58
-
59
- Gossip Load (0.4ms) SELECT `gossips`.* FROM `gossips` LIMIT 1
60
-
61
- ↳ app/controllers/api/chats_controller.rb:4:in `new'
62
-
63
- Rendering api/chats/new.json.jbuilder
64
-
65
- Chat Load (0.5ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 1 AND (id > 4)
66
-
67
- ↳ app/views/api/chats/new.json.jbuilder:1
68
-
69
- Rendered api/chats/new.json.jbuilder (Duration: 1.7ms | Allocations: 768)
70
-
71
- Completed 200 OK in 9ms (Views: 2.0ms | ActiveRecord: 1.5ms | Allocations: 3874)
72
-
73
- ```
74
-
75
- が交互に出力されている状態で、チャットの自動更新がされません。
76
54
 
77
55
  ### 該当のソースコード
78
56
 
@@ -96,15 +74,15 @@
96
74
 
97
75
  resources :chats, only: [:index, :create, :new]
98
76
 
99
- # namespace :api do
77
+ namespace :api do
100
-
78
+
101
- # resources :chats, only: :new, defaults: { format: 'json' }
79
+ resources :chats, only: :new, defaults: { format: 'json' }
102
-
80
+
103
- # end
81
+ end
104
82
 
105
83
  end
106
84
 
107
- get "/gossips/:id/chats/api/chats", action: :new, controller: 'api/chats'
85
+
108
86
 
109
87
  resources :movies do
110
88
 
@@ -124,18 +102,28 @@
124
102
 
125
103
  class Api::ChatsController < ApplicationController
126
104
 
105
+ before_action :set_gossip
106
+
107
+
108
+
127
109
  def new
128
110
 
111
+ # ルーティングでの設定によりparamsの中にgroup_idというキーでグループのidが入るので、これを元にDBからグループを取得する
112
+
129
113
  gossip = Gossip.find(params[:gossip_id])
130
114
 
115
+ # ajaxで送られてくる最後のメッセージのid番号を変数に代入
116
+
131
117
  last_chat_id = params[:id].to_i
132
118
 
119
+ # 取得したグループでのメッセージ達から、idがlast_message_idよりも新しい(大きい)メッセージ達のみを取得
120
+
133
- @chats = gossip.chats.includes(:user).where("id > ?", last_chat_id)
121
+ @chats = @gossip.chats.includes(:user).where("id > ?", last_chat_id)
134
-
135
- chat = Chat.new
136
122
 
137
123
  end
138
124
 
125
+
126
+
139
127
  end
140
128
 
141
129
  ```
@@ -246,7 +234,9 @@
246
234
 
247
235
  let html =
248
236
 
237
+ `
238
+
249
- `<div class="chat" data-chat-id=${chat.id}>
239
+ <div class="chat" data-chat-id=${chat.id}>
250
240
 
251
241
  <div class="chat__in">
252
242
 
@@ -294,7 +284,9 @@
294
284
 
295
285
  </div>
296
286
 
297
- </div>`
287
+ </div>
288
+
289
+ `
298
290
 
299
291
  return html;
300
292
 
@@ -302,53 +294,57 @@
302
294
 
303
295
  let html =
304
296
 
297
+ `
298
+
305
- `<div class="chat" data-chat-id=${chat.id}>
299
+ <div class="chat" data-chat-id=${chat.id}>
306
-
300
+
307
- <div class="chat__in">
301
+ <div class="chat__in">
308
-
302
+
309
- <div class="chat__in__left">
303
+ <div class="chat__in__left">
310
-
304
+
311
- <div class="chat__in__left__userIcon">
305
+ <div class="chat__in__left__userIcon">
312
-
306
+
313
- <img src="${chat.user_image_url}">
307
+ <img src="${chat.user_image_url}">
308
+
309
+ </div>
314
310
 
315
311
  </div>
316
312
 
313
+ <div class="chat__in__right">
314
+
315
+ <div class="chat__in__right__top">
316
+
317
+ <div class="chat__in__right__top__userName">
318
+
319
+ ${chat.user_name}
320
+
321
+ </div>
322
+
323
+ <div class="chat__in__right__top__createdTime">
324
+
325
+ ${chat.created_at}
326
+
327
+ </div>
328
+
329
+ </div>
330
+
331
+ <div class="chat__in__right__bottom">
332
+
333
+ <div class="chat__in__right__bottom__content">
334
+
335
+ ${chat.content}
336
+
337
+ </div>
338
+
339
+ </div>
340
+
341
+ </div>
342
+
317
343
  </div>
318
344
 
319
- <div class="chat__in__right">
320
-
321
- <div class="chat__in__right__top">
322
-
323
- <div class="chat__in__right__top__userName">
324
-
325
- ${chat.user_name}
326
-
327
- </div>
328
-
329
- <div class="chat__in__right__top__createdTime">
330
-
331
- ${chat.created_at}
332
-
333
- </div>
334
-
335
- </div>
336
-
337
- <div class="chat__in__right__bottom">
338
-
339
- <div class="chat__in__right__bottom__content">
340
-
341
- ${chat.content}
342
-
343
- </div>
344
-
345
- </div>
346
-
347
- </div>
348
-
349
345
  </div>
350
346
 
351
- </div>`
347
+ `
352
348
 
353
349
  return html;
354
350
 
@@ -358,32 +354,48 @@
358
354
 
359
355
  let reloadChats = function() {
360
356
 
357
+ //カスタムデータ属性を利用し、ブラウザに表示されている最新メッセージのidを取得
358
+
361
359
  let last_chat_id = $('.chat:last').data("chat-id") || 0;
362
360
 
363
361
  $.ajax({
364
362
 
363
+ //ルーティングで設定した通り/groups/id番号/api/messagesとなるよう文字列を書く
364
+
365
- url: 'api/chats',
365
+ url: location.href,
366
+
367
+ //ルーティングで設定した通りhttpメソッドをgetに指定
366
368
 
367
369
  type: 'get',
368
370
 
369
371
  dataType: 'json',
370
372
 
373
+ //dataオプションでリクエストに値を含める
374
+
371
375
  data: {id: last_chat_id}
372
376
 
373
377
  })
374
378
 
375
379
  .done(function(chats) {
376
380
 
381
+ // 更新するメッセージがなかった場合は.doneの後の処理が動かないようにする
382
+
377
383
  if (chats.length !== 0) {
378
384
 
385
+ //追加するHTMLの入れ物を作る
386
+
379
387
  let insertHTML = '';
380
388
 
389
+ //配列messagesの中身一つ一つを取り出し、HTMLに変換したものを入れ物に足し合わせる
390
+
381
391
  $.each(chats, function(i, chat) {
382
392
 
383
393
  insertHTML += buildHTML(chat)
384
394
 
385
395
  });
386
396
 
397
+ //メッセージが入ったHTMLに、入れ物ごと追加
398
+
387
399
  $('.chat_new__wrapper__chatsIndex').append(insertHTML);
388
400
 
389
401
  $('.chat_new__wrapper__chatsIndex').animate({ scrollTop: $('.chat_new__wrapper__chatsIndex')[0].scrollHeight});
@@ -394,7 +406,9 @@
394
406
 
395
407
  .fail(function() {
396
408
 
409
+
410
+
397
- alert('やビャー');
411
+ console.log('Error');
398
412
 
399
413
  });
400
414
 
@@ -412,8 +426,6 @@
412
426
 
413
427
  json.array! @chats do |chat|
414
428
 
415
- json.gossip_id chat.gossip.id
416
-
417
429
  json.user_name chat.user.name
418
430
 
419
431
  json.created_at chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
@@ -436,9 +448,9 @@
436
448
 
437
449
  ### 試したこと
438
450
 
451
+ autoReload.jsのurl:部分をapi/chatsからlocation.hrefに変更
452
+
439
- ルーティング、コントローラー、jsファイル、jbuilderの各ID取得部分を見直し
453
+ エラーは表示されなくなったが、autoReload.jsのfailの処理にしか行えない。
440
-
441
- 間違って取得している部分は無いように見えました。
442
454
 
443
455
 
444
456
 

4

状況説明文追記

2020/09/23 11:33

投稿

tomoZQ
tomoZQ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -72,7 +72,7 @@
72
72
 
73
73
  ```
74
74
 
75
- が交互に出力されている状態です。
75
+ が交互に出力されている状態で、チャットの自動更新がされません。
76
76
 
77
77
  ### 該当のソースコード
78
78
 

3

発生状況追記

2020/09/23 07:15

投稿

tomoZQ
tomoZQ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  ### 発生している問題・エラーメッセージ
20
20
 
21
- エラーは出ていませんが、ターミナルには、autoReload.jsで設定している7秒ごとに
21
+ エラーは出ていませんが、2画面立ち上げるとターミナルには、autoReload.jsで設定している7秒ごとに
22
22
 
23
23
  ```
24
24
 

2

エラーが出力されなくなったが、ターミナルの出力がおかしいので出力内容を記述しました。

2020/09/21 06:57

投稿

tomoZQ
tomoZQ

スコア14

test CHANGED
@@ -1 +1 @@
1
- 404 (Not Found) Railsの自動更新機能　ルーティングエラー？
1
+ Railsの自動更新機能
test CHANGED
@@ -18,33 +18,61 @@
18
18
 
19
19
  ### 発生している問題・エラーメッセージ
20
20
 
21
+ エラーは出ていませんが、ターミナルには、autoReload.jsで設定している7秒ごとに
22
+
21
- ```
23
+ ```
24
+
22
-
25
+ Started GET "/gossips/4/chats/api/chats?id=28" for ::1 at 2020-09-21 15:35:28 +0900
26
+
27
+ Processing by Api::ChatsController#new as JSON
28
+
29
+ Parameters: {"id"=>"4"}
30
+
31
+ User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
32
+
33
+ Gossip Load (0.5ms) SELECT `gossips`.* FROM `gossips` LIMIT 1
34
+
35
+ ↳ app/controllers/api/chats_controller.rb:4:in `new'
36
+
37
+ Rendering api/chats/new.json.jbuilder
38
+
39
+ Chat Load (0.4ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 1 AND (id > 4)
40
+
41
+ ↳ app/views/api/chats/new.json.jbuilder:1
42
+
43
+ Rendered api/chats/new.json.jbuilder (Duration: 1.8ms | Allocations: 768)
44
+
23
- Failed to load resource: the server responded with a status of 404 (Not Found)
45
+ Completed 200 OK in 9ms (Views: 2.1ms | ActiveRecord: 1.5ms | Allocations: 3880)
24
-
46
+
25
- ```
47
+ ```
26
-
27
-
28
-
48
+
29
- ```
49
+ ```
30
-
50
+
31
- http://localhost:3000/gossips/3/chats/new/api/chats?id=139
51
+ Started GET "/gossips/4/chats/api/chats?id=30" for ::1 at 2020-09-21 15:35:33 +0900
52
+
32
-
53
+ Processing by Api::ChatsController#new as JSON
54
+
55
+ Parameters: {"id"=>"4"}
56
+
57
+ User Load (0.6ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
58
+
59
+ Gossip Load (0.4ms) SELECT `gossips`.* FROM `gossips` LIMIT 1
60
+
61
+ ↳ app/controllers/api/chats_controller.rb:4:in `new'
62
+
33
- 404 (Not Found)
63
+ Rendering api/chats/new.json.jbuilder
64
+
34
-
65
+ Chat Load (0.5ms) SELECT `chats`.* FROM `chats` WHERE `chats`.`gossip_id` = 1 AND (id > 4)
66
+
67
+ ↳ app/views/api/chats/new.json.jbuilder:1
68
+
69
+ Rendered api/chats/new.json.jbuilder (Duration: 1.7ms | Allocations: 768)
70
+
71
+ Completed 200 OK in 9ms (Views: 2.0ms | ActiveRecord: 1.5ms | Allocations: 3874)
72
+
35
- ```
73
+ ```
36
-
37
- コンソールに上記2つのエラーが表示されます。
74
+
38
-
39
- また、ターミナルには
40
-
41
- ```
42
-
43
- ActionController::RoutingError (No route matches [GET] "/gossips/1/chats/api/chats"):
44
-
45
- ```
46
-
47
- が表示されます。
75
+ が交互に出力されている状態です。
48
76
 
49
77
  ### 該当のソースコード
50
78
 
@@ -76,7 +104,7 @@
76
104
 
77
105
  end
78
106
 
79
- get "/gossips/:id/chats/new/api/chats", action: :new, controller: 'api/chats'
107
+ get "/gossips/:id/chats/api/chats", action: :new, controller: 'api/chats'
80
108
 
81
109
  resources :movies do
82
110
 
@@ -334,7 +362,7 @@
334
362
 
335
363
  $.ajax({
336
364
 
337
- url: 'new/api/chats',
365
+ url: 'api/chats',
338
366
 
339
367
  type: 'get',
340
368
 
@@ -378,13 +406,41 @@
378
406
 
379
407
  ```
380
408
 
409
+ ```ruby
410
+
411
+ #new.json.jbuilder
412
+
413
+ json.array! @chats do |chat|
414
+
415
+ json.gossip_id chat.gossip.id
416
+
417
+ json.user_name chat.user.name
418
+
419
+ json.created_at chat.created_at.strftime("%Y年%m月%d日 %H時%M分")
420
+
421
+ json.content chat.content
422
+
423
+ json.image chat.image_url
424
+
425
+ json.user_id chat.user.id
426
+
427
+ json.user_image_url chat.user.image_url
428
+
429
+ json.id chat.id
430
+
431
+ end
432
+
433
+ ```
434
+
381
435
 
382
436
 
383
437
  ### 試したこと
384
438
 
385
- 最初はroutes.rbのコメントアウト部分でルーティングをしていたが、Routing Errorが出たので、現在のルーティングに変更。変化なし。
439
+ ルーティング、コントローラー、jsファイル、jbuilderの各ID取得部分を見直し
386
-
440
+
387
- autoReload.jsのajax記述部分のurlをapi/chatsからnew/api/chatsに変更したが変化なし。（エラーに表示されるurlが変わるだけ）
441
+ 間違って取得している部分は無いように見えました。
442
+
443
+
388
444
 
389
445
  ### 補足情報（FW/ツールのバージョンなど）
390
446
 

1

ターミナルのエラー文を追加

2020/09/21 06:43

投稿

tomoZQ
tomoZQ

スコア14

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,15 @@
36
36
 
37
37
  コンソールに上記2つのエラーが表示されます。
38
38
 
39
-
39
+ また、ターミナルには
40
+
41
+ ```
42
+
43
+ ActionController::RoutingError (No route matches [GET] "/gossips/1/chats/api/chats"):
44
+
45
+ ```
46
+
47
+ が表示されます。
40
48
 
41
49
  ### 該当のソースコード
42
50