ポーリングでリアルタイム通信を実現する

Jun 26, 2019

昔ながらのポーリングでリアルタイム通信をするコードを書いたのでメモ。

ポーリングとは一定時間ごとにHTTP通信を繰り返し行うことを指します。何度も繰り返して通信することによってチャットのようなリアルタイム性を持ったアプリを実現できます。

実際にコードを書くと下のようになります。

const INTERVAL = 30 * 1000;

const load = () => {
	// ここにHTTP通信する処理を書く
}

setInterval(load, INTERVAL)

setInterval()を使うことでHTTP通信する関数load()を繰り返し実行しています。

しかし、これではタブがバックグラウンドにある場合でもload()が実行されるため、無駄な通信が起きてしまいます。対策として以下のことを考えます。

タブがバックグラウンドにいるときはHTTP通信をしない
タブがバックグラウンドからフォアグラウンドに移動したときload()を実行する

タブがバックグラウンドにあるかどうかはdocument.hiddenで判定できます。また、visibilitychangeイベントを使うことでタブの表示・非表示が入れ替わったときに処理を走らせることができます。

この2つを組み合わせることで無駄な通信のないポーリングが実現できます。コードは以下のようになります。

const INTERVAL = 30 * 1000;

const load = () => {
	if (document.hidden) {
		return;
	}
	// ここにHTTP通信する処理を書く
}

setInterval(load, INTERVAL)

document.addEventListener('visibilitychange', load);

Web Socketなどを使えばもっとスマートにリアルタイム通信を実現できるとが、ちょっとしたものだったらポーリングで十分実現できます。仕事でも実際のサービスに使っていますがちゃんと問題なく動いてくれています。