Live Dashboard

~11 min · app, dashboard, metrics

Level 0Poller

0 XP0/60 lessons0/10 achievements

0/120 XP to next level120 XP to go0% complete

서버 push metric

Live dashboard 는 'server push, client render' 의 정통 use case. 서버에 data, 클라에 chart. chart update rate 매칭하는 빈도로 push — 대부분 dashboard 엔 초당 한 번 ok, 100ms 마다는 network throughput 이나 audio waveform 같은 고해상도 data 보일 때만.

SSE 가 더 fit 일 수도

Dashboard 가 read-only — user 가 zoom/pan 외 interact 안 함 — 면 SSE 가 WebSocket 보다 단순. Auto-reconnect 무료, plain HTTP, 움직이는 부품 적음. user 가 command 도 보내면 (필터 변경, 알람 ack, drilldown toggle) WebSocket 손 가.

Code

서버쪽 metric push·python

import asyncio, psutil, time
from datetime import datetime

async def metrics_pusher(manager):
    while True:
        await manager.broadcast('dashboard', {
            'type': 'metrics.update',
            'data': {
                'cpu':            psutil.cpu_percent(interval=None),
                'memory_percent': psutil.virtual_memory().percent,
                'load':           psutil.getloadavg()[0],
                'connections':    manager.total_connections,
                'ts':             datetime.utcnow().isoformat() + 'Z',
            },
        })
        await asyncio.sleep(1.0)

클라쪽: live chart·javascript

ws.on('metrics.update', (data) => {
  cpuChart.addPoint(new Date(data.ts), data.cpu);
  memGauge.setValue(data.memory_percent);
  loadIndicator.textContent = data.load.toFixed(2);
  connCounter.textContent = data.connections;
});

External links

psutil — process & system utility

Exercise

60초 sliding line chart 로 CPU, memory, load average 보여주는 작은 dashboard 짜. 초당 push. 세 device 에서 열고 sync 유지 확인. 서버 10초 멈추고 재시작 — chart 가 artifact 없이 재개.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousCollaborative Editing Next →Notification 시스템

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.