실시간 대시보드

서버가 지표를 밀어 주기

실시간 대시보드는 ‘서버가 밀고 클라이언트가 그린다’는 전형적인 사례야. 데이터는 서버에 있고 차트는 클라이언트에 있어. 차트 갱신 속도에 맞춰 보내면 돼. 대부분의 대시보드는 초당 한 번이면 충분하고, 100ms 마다 보내는 건 네트워크 처리량이나 오디오 파형 같은 고해상도 데이터를 보여 줄 때뿐이야.

SSE 가 더 잘 맞을 수도 있어

사용자가 확대와 이동 말고는 상호작용하지 않는 읽기 전용 대시보드라면 SSE 가 WebSocket 보다 단순해. 자동 재연결이 기본이고 일반 HTTP 를 쓰며 움직이는 부품도 적지. 필터 변경, 경보 확인, 상세 보기 전환 같은 명령까지 사용자가 보낸다면 WebSocket 이 알맞아.

Code

서버에서 지표 밀어 주기·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)

클라이언트: 실시간 차트·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;
});

Exercise

최근 60초를 움직이는 선 그래프로 CPU, 메모리, 평균 부하를 보여 주는 작은 대시보드를 만들어. 초당 한 번 보내고 기기 세 대에서 열어 동기화가 유지되는지 확인해. 서버를 10초 멈췄다가 다시 시작해 차트가 이상한 흔적 없이 이어지는지도 봐.

서버가 지표를 밀어 주기

SSE 가 더 잘 맞을 수도 있어

Code

External links

Exercise

Progress

댓글 0