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

Server-pushed metrics

A live dashboard is the canonical "server pushes, client renders" use case. The server has the data; the client has the chart. Push at a frequency that matches the chart update rate — once per second is fine for most dashboards, every 100ms only if you are showing high-resolution data like network throughput or audio waveforms.

SSE may be a better fit

If the dashboard is read-only — the user does not interact with it beyond zooming and panning — SSE is simpler than WebSocket. Auto-reconnect free, plain HTTP, fewer moving parts. Reach for WebSocket when the user can also send commands (filter changes, alert acknowledgements, drilldown toggles).

Code

Server-side 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)

Client-side: live charts·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 and system utilities

Exercise

Build a small dashboard that shows CPU, memory, and load average over 60 seconds as a sliding line chart. Push every second. Open it on three devices; confirm they all stay synchronized. Now stop the server for 10 seconds and restart — confirm the chart resumes without artifacts.