リアルタイム Web アプリケーション

ユーザ操作に依存せず、クライアントサイドにサーバサイドの最新情報を動悸させる Web アプリケーション

リアルタイム Web アプリケーション の実装方法

1. ポーリング 最もシンプルな方法。一定間隔で WebAPI 呼び出しを繰り返し、定期的にサーバと同期する。

2. ロングポーリング HTTP リクエストを受け取ったサーバが、データの更新を待ってレスポンスを返すことでリアルタイム性を実現する。 即時にレスポンスを返す API データの更新を監視する API の療法が必要となる。

3. Server Sent Events(SSE) 一度確立した HTTP 接続を保持したまま、データ更新が発生するたびにサーバからクライアントにデータを一方向に送信する方法のこと。 Content-Type は text/event-stream とする。

MDN の Server-sent events や Server-Sent Events の利用 が参考になる。

送信するデータ形式についても イベントストリームの形式 に詳しい。

デモプログラム

Server Sent Events アプリケーションのためのディレクトリを作成し、開発環境を整える。

'use strict';
const express = require('express');
const app = express();

let i = 0;
const send = (res) => {
  const usedMem = process.memoryUsage();
  const date = new Date();
  res.write(`id: ${i++}\ndata: ${date.toISOString()}\ndata: ${JSON.stringify(usedMem)}\n\n`);
  setTimeout(() => send(res), 5000);
};

app.get('/', (req, res) => res.send('hello world'));

app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  send(res);
});

app.listen(3000, () => console.log('Sever running'));

process.memoryUsage()

The process.memoryUsage() method returns an object describing the memory usage of the Node.js process measured in bytes.

取得できたメモリ使用量をリアルタイムでグラフ化できるパッケージに渡せば、見た目もそれなりの今風のWebアプリになりそうです。

でも今のところは、思いつきだけで具体化する方法はわからない。

開発者ツールのコンソールに以下を入力。

const sse = new EventSource('http://localhost:3000/sse');
sse.onmessage = console.log;

NetWork -> EventStream を確認する。

ブラウザでの確認j結果。

リアルタイムWebアプリ