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

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

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

Q&A

解決済

javascriptでの画面自動更新について

tkd00
tkd00

総合スコア5

1回答

0グッド

0クリップ

187閲覧

投稿2022/11/28 05:59

前提

ruby on rails でwebサイトを作っています。
javascriptのsetInterval()メソッドを用いてページの自動更新を行っています(10秒毎に)。
こちらの記事を参考に自動更新処理を作成しました。
更新を行っているページ(以下ページA)は全ユーザ共通の画面です。

実現したいこと

ページAを100人のユーザが閲覧していると、10秒間に100回リクエストが発生します。
ページAは全ユーザ共通の画面のため、リクエスト回数を10秒ごとに1回としたいです。
考え方のヒントでも構いませんのでよろしくお願いします。

該当のソースコード

javascript

1$(function(){ 2 function buildMESSAGE(message) { 3 var messages = $('tbody').append('<tr class="messages" data-id=' + message.id + '><td>' + message.text + '</td><td><a href="/messages/' + message.id + '">Show</a></td><td><a href="/messages/' + message.id +'/edit">Edit</a></td><td><a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/messages/' + message.id + '">Destroy</a></td>'); 4 //'tbody'に'tr'以下のhtml全てをappendする 5 } 6 7 $(function(){ 8 setInterval(update, 10000); 9 //10000ミリ秒ごとにupdateという関数を実行する 10 }); 11 function update(){ //この関数では以下のことを行う 12 if($('.messages')[0]){ //もし'messages'というクラスがあったら 13 var message_id = $('.messages:last').data('id'); //一番最後にある'messages'というクラスの'id'というデータ属性を取得し、'message_id'という変数に代入 14 } else { //ない場合は 15 var message_id = 0 //0を代入 16 } 17 $.ajax({ //ajax通信で以下のことを行う 18 url: location.href, //urlは現在のページを指定 19 type: 'GET', //メソッドを指定 20 data: { //railsに引き渡すデータは 21 message: { id: message_id } //このような形(paramsの形をしています)で、'id'には'message_id'を入れる 22 }, 23 dataType: 'json' //データはjson形式 24 }) 25 .always(function(data){ //通信したら、成功しようがしまいが受け取ったデータ(@new_message)を引数にとって以下のことを行う 26 $.each(data, function(i, data){ //'data'を'data'に代入してeachで回す 27 buildMESSAGE(data); //buildMESSAGEを呼び出す 28 }); 29 }); 30 } 31});

補足情報(FW/ツールのバージョンなど)

ruby 2.5.3
Rails 5.2.8
jQuery 1.12.4

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

ページAは全ユーザ共通の画面のため、リクエスト回数を10秒ごとに1回としたいです。

CDNなどサーバサイドに仕掛けをする必要があります。

100人の閲覧者がいれば、各ブラウザは別々にデータを持っていますので、10秒おきに更新を行いたいのであればブラウザから10秒で100回のリクエストが行われるのは避けることができません。

投稿2022/11/28 06:13

maisumakun

総合スコア141550

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

maisumakun

2022/11/28 06:14

もしくは、WebSocketで能動的に更新情報を送るなど別な仕掛けを行うかです。
tkd00

2022/11/28 08:14

>各ブラウザは別々にデータを持っていますので 確かにおっしゃる通りです! 勉強もかねて、WebSocketによる通信を検討します。 ありがとうございました!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る