Building a Real-Time Dashboard with WebSockets and Next.js

Real-time dashboards are one of those features that sound simple but have a surprising amount of depth once you get into the weeds. This post walks through how I built a live machine-metrics dashboard from scratch.

The Problem

We needed to display live CPU, memory, and network stats from a fleet of machines — updating every second without hammering the server with HTTP polls.

WebSocket Architecture

The server broadcasts a compact JSON payload over a single WebSocket connection per client. Each message carries a machine ID, metric type, and value with a timestamp.

{ "id": "machine-42", "metric": "cpu", "value": 67.3, "ts": 1715500000 }

React State Design

The key insight: don't store raw events. Store a rolling window (last 60 data points) per machine per metric. This keeps memory bounded and makes chart rendering trivial.

AWS Deployment

WebSocket connections don't work well behind standard HTTP load balancers. We used an Application Load Balancer with sticky sessions to ensure each client reconnects to the same server instance.

The result: a dashboard that handles 200 machines with sub-100ms latency on a single t3.medium.