실시간 대시보드와 지표

스스로 갱신되는 차트와 카운터. 페이지를 여는 순간 최신 값을 보여 주고, 열린 대시보드마다 폴링할 필요가 없습니다.

관리자 화면, 매출 대시보드, 모니터링 화면, 주식이나 암호화폐 시세판은 숫자가 최신이어야 쓸모가 있습니다. 1분마다 새로고침하면 사람들은 오래된 데이터로 판단하게 되고, 열린 대시보드마다 API를 폴링하면 한 번의 업데이트를 모두에게 푸시하는 것보다 훨씬 비쌉니다.

사용자가 얻는 것

주문, 가입, 측정값이 들어올 때마다 차트와 카운터가 알아서 움직입니다.
페이지를 여는 순간 최신 값. 다음 업데이트까지 빈 타일을 보여 주지 않습니다.
벽에 걸린 모니터도 새로고침 없이 하루 종일 실시간입니다.

사용하는 기능

캐시 채널(cache-, private-cache-): 마지막 이벤트를 30분 동안 보관하고 새 구독자에게 바로 넘겨 줍니다.
배치 API(triggerBatch): 여러 지표를 요청 하나로 보냅니다.
무료 팬아웃: 보는 사람이 10명이든 1만 명이든, 한 번 발행한 업데이트는 메시지 1건입니다.
cache_miss 웹훅: 새 시청자가 캐시를 찾지 못했을 때 서버에 알려 줍니다.

1단계: 백엔드에서 지표 발행

값이 바뀔 때 업데이트를 보내고, 빠르게 변하는 숫자는 짧은 간격으로 주기적으로 보냅니다. 여러 채널을 배치 하나로 묶으면 HTTP 호출은 한 번입니다.

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건이므로, 타일 두 개를 5초마다 갱신하면 하루 약 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단계: 누군가 오면 캐시 채우기

웹훅 엔드포인트에서 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 });
  }
}

팁

모든 것을 채널 하나에 넣지 말고 타일마다, 고객마다 채널을 나누세요. 시청자는 자기가 보는 것만 받습니다.
렌더링된 HTML이 아니라 숫자를 보내고, 업데이트 하나는 10 KB(Free 플랜은 4 KB) 이하로 유지하세요.
고객용 대시보드(내 SaaS의 분석 페이지 등)도 계정마다 채널을 두면 같은 방식으로 만들 수 있습니다: private-cache-account-123-usage.
간격을 조정할 때는 포털의 앱 페이지에서 내 메시지 수와 연결 수를 실시간으로 확인하세요.