javascriptのsetintervalの代用

Question

動作確認のために2窓で確認。
railsで非同期通信で要素を追加すると、1つの窓では動くけれども
2つの窓では要素が追加されません。（当たり前ですが）

その際に、ずっとsetIntervalを使用していました。
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval
5秒ごとに動く関数を書いて、監視する形ですね。

でもあんまりこれはよろしくないと思って、別の方法を模索しています。（何も変化なくても5秒ごとに関数が呼ばれるため）

Mutation observeという監視する方法があるみたいなのですが、2窓にすると動きませんでした。
setInterval以外の何かいい方法はないでしょうか？？

Comments

[yambejp]

> 2つの窓では要素が追加

がイメージできるソースを提示ください

[miyabi_pudding]

JSソースコードと、Railsが吐き出している実コードを記載ください。
また2窓とは、ブラウザウィンドウが二つ出ているということでしょうか？

[maisumakun]

> 2つの窓では要素が追加されません。（当たり前ですが）

それは本当に必要な要件なのでしょうか。

[dossy]

情報不足でしたね。
非同期を用いた、chatを作成しようと思っていました。

Answer 1

監視はブラウザ2からサーバに対してしているのでしょうか？
（setIntervalで「ブラウザ①の変化」を問い合わせている状況でしょうか？）

もし、そのような状況であればWebSocketを使用すれば解決しそうです。
WebSocketはいわゆる「チャット」などに用いられる技術で、双方向通信が可能になります。

以下関連サイトになります。
ここ(Qiita)を読んでから
Railsのドキュメントを読んでください。

（ここも参考になります）

（※Mutation.observerは同一窓内の要素しか監視できないと思われますので
不適かと思われます。親子関係のある窓であれば別ですが）

Comments

[dossy]

setIntervalで「ブラウザ①の変化」を問い合わせている状況です。まさしくその状態です。
websocketなるものがあるんですね。

Answer 2

少ない情報から推測して、検索しただけなので参考までに。
setintervalとTurbolinksのことだと思うのですが、下記のようなissueがあり、Backooさんが見つけた解決方法が記載されていました。
https://github.com/turbolinks/turbolinks/issues/448

Maybe I found a solution. In application.js I stated:

function setIntervalWithTurbolinks(intervalFunction, milliseconds) {
  var interval = setInterval(intervalFunction, milliseconds);

  $(document).on('turbolinks:before-cache turbolinks:before-render', function() {
    clearTimeout(interval)
  });
}

So, in my application, I use it this way:

setIntervalWithTurbolinks(fetchContent, 10000);