リアルタイムのダッシュボードと指標

自動で更新されるグラフとカウンター。ページを開いた瞬間に最新の値を表示し、開いているダッシュボードごとのポーリングは不要です。

管理画面、売上ダッシュボード、監視画面、株価や暗号資産のティッカーは、数字が最新でなければ意味がありません。1 分ごとの再読み込みでは古いデータで判断することになり、開いているダッシュボードごとに API をポーリングすれば、1 回の更新を全員にプッシュするよりはるかに高くつきます。

ユーザーにとっての価値

注文、登録、計測値が入るたびに、グラフとカウンターが自動で動きます。
ページを開いた瞬間に最新の値。次の更新まで空のタイルを見せません。
壁に掛けたモニターも、再読み込みなしで一日中リアルタイムのまま。

使う機能

キャッシュチャンネル（cache-、private-cache-）。最後のイベントを 30 分保持し、新しい購読者にすぐ渡します。
バッチ API（triggerBatch）。複数の指標を 1 回のリクエストで送ります。
無料のファンアウト：見ている人が 10 人でも 1 万人でも、1 回の配信は 1 メッセージです。
cache_miss Webhook。新しい閲覧者がキャッシュを見つけられなかったことをサーバーに知らせます。

ステップ 1：バックエンドから指標を配信する

値が変わったときに更新を送り、変化の速い数字は短い間隔で定期的に送ります。複数のチャンネルを 1 つのバッチにまとめれば、HTTP 呼び出しは 1 回です：

setInterval(async () => {
  const stats = await metrics.snapshot();
  await pusher.triggerBatch([
    { channel: 'private-cache-dash-sales', name: 'update', data: { revenue: stats.revenue, orders: stats.orders } },
    { channel: 'private-cache-dash-signups', name: 'update', data: { today: stats.signups } },
  ]);
}, 5000);

バッチ内のチャンネルはそれぞれ 1 メッセージなので、2 つのタイルを 5 秒ごとに更新すると 1 日約 35,000 メッセージです。値が変わったときだけ送れば、もっと少なくなります。

ステップ 2：ダッシュボードで購読する

const sales = pusher.subscribe('private-cache-dash-sales');
sales.bind('update', ({ revenue, orders }) => {
  revenueTile.set(revenue);
  ordersChart.push(orders);
});

// Nothing published in the last 30 minutes: load the value from your API once
sales.bind('pusher:cache_miss', async () => {
  revenueTile.set(await fetch('/api/stats/revenue').then((r) => r.json()));
});

private- プレフィックスにより、各ダッシュボードを誰が見られるかは認可ルートが決めます。たとえばスタッフだけ、あるいはそのアカウントの顧客だけ、というように。

ステップ 3：誰かが来たらキャッシュを埋める

Webhook のエンドポイントで cache_miss を受け取り、キャッシュが空のダッシュボードを誰かが開いたら現在の値を配信します。その後の閲覧者はキャッシュから受け取ります：

for (const e of webhook.getEvents()) {
  if (e.name === 'cache_miss' && e.channel === 'private-cache-dash-sales') {
    const s = await metrics.snapshot();
    await pusher.trigger(e.channel, 'update', { revenue: s.revenue, orders: s.orders });
  }
}

ヒント

すべてを 1 つのチャンネルに入れず、タイルごと、顧客ごとにチャンネルを分けましょう。閲覧者は見ているものだけを受け取ります。
レンダリング済みの HTML ではなく数値を送り、1 回の更新は 10 KB（Free プランは 4 KB）以内に。
顧客向けのダッシュボード（自社 SaaS の分析ページなど）も、アカウントごとのチャンネルで同じように作れます：private-cache-account-123-usage。
間隔を調整するときは、ポータルのアプリページで自分のメッセージ数と接続数をリアルタイムで確認できます。