安全に更新する方法がわかりません。

Question

function doReload() {
window.location.reload();
}
window.addEventListener('load', function () {
setTimeout(doReload, 5000);
});

このようにしていたのですが、ものすごくサーバーに負荷がかかってしまいます。

前のhtmlと現在のhtmlを比較して異なれば再読み込みさせるという方法をやりたいのですが、どうすればいいですか?

Comments

[miyabi_pudding]

そのHTMLの違い（前と現在）は何が違うのでしょうか？
というのも、その違いが何が違うかによっては（DBから情報を取得して更新したい、リアルタイムチャットを実装したいなど）もっと有効な方法（なるたけサーバーに負担をかけない方法）があるからです。
ですが、何がどう違うかわからないと、その方法を回答しようがありません。

[m.ts10806]

ものすごくってどういうレベルでしょう。
それに対し、具体的にどれくらいを目指しているのでしょう

Answer 1

前のhtmlと現在のhtmlを比較して異なれば再読み込みさせる

通常は**サーバー応答を変化させる「キャッシュ制御（ブラウザキャッシュの制御）」**を使います。
ブラウザはサーバー上のファイルがいつアップデートされたか、再アクセスするまで知ることができないためです。

---

ETag の例をざっくり書くと、こんな感じです。

1. ブラウザからサーバーへの(初回)要求。
2. サーバーは、応答ヘッダ ETag: "token" を含めて200 OKを応答。

（ブラウザは応答内容をトークンを含めて覚える：キャッシュする）
3. ブラウザからサーバーへの(2回目以降の)要求するとき、
以前、知った"token"を 要求ヘッダ If-None-Match: "token" に含めて要求
(「もし、違っていたら更新情報を応答して！以前のは覚えてる」という意味) 。
4. サーバーは、"token" から、2回以上アクセスしてきたブラウザだと判断して新旧を比較。
内容が変わってないなら、エラー 304 Not Modified(覚えているのを使ってね)を応答。
変わっていると、2.と同様に応答ヘッダに ETag: "token2" （新しいトークン）を含め、更新内容 を200 OKで応答。（ブラウザは応答内容を新しいトークンを含めて覚えなおす：キャッシュ更新する）

これの繰り返しになります。

---

ものすごくサーバーに負荷がかかってしまいます

当然です。

示されたコードは、5秒毎に強制的に再リクエストする実装ですから。
閲覧者にとっても、5秒後にスクロールがリセットされてしまうページになっています。

追記）
サーバー側プログラムを弄るときに「キャッシュ制御という方法がある」と覚えておけばいいと思います。

ブラウザ側だけで実装する仕様は無くはないのです（アプリケーションキャッシュ）。
が、仕様もWD（作業草案）のまま放置され、実装されている内容は、キャッシュの削除が厄介で、とても「安全」とは言えない状態です。このため、ブラウザ側だけで安全に更新状態を判断する手段は無いと考えてください。

Answer 2

ajaxを使ってみたら上手く行けました。

Answer 3

Cookieにバージョンなどを表すデータを保存し、HTML側が更新されるたびにその値を更新するようにすればいかがでしょうか。

HTMLの読み込み時にCookieの値を確認し、最新の値と異なる場合はリロードする。って感じです。

Comments

[AkitoshiManabe]

> HTMLの読み込み時にCookieの値を確認し、最新の値と異なる場合はリロードする
ブラウザ実装におけるプリフライトなしの要求を視野に入れてください。この場合、Cookieが確認できるのはHTML読み込み完了後であり、最新であろうが無かろうがリロードされています。

Answer 4

SPAのあるライブラリをインストールしてみては？

Comments

[miyabi_pudding]

要件定義や、質問者さんの技術レベルが不明瞭な中、
単にSPAを勧めるのは危険というか、問題が余計に複雑になったり、質問者さんがさらに混乱する可能性があり、適当ではないと思います。