A browser can make sensor telemetry feel immediate, but a moving number is not necessarily a current or trustworthy measurement. A useful WebSocket dashboard exposes connection state, sample age, sequence gaps and device identity. If it can also send commands, authorization and safe device behavior matter more than the button animation.
For a local prototype, ESP-IDF's HTTP server can host WebSocket endpoints; an ESP32 can also use Espressif's WebSocket client to connect outward. Choose one topology deliberately. If a public web page is HTTPS, browsers generally need a secure WSS endpoint; do not mix an HTTPS page with an insecure socket. A gateway or backend is often easier to authenticate, scale and update than exposing a device directly to the internet.
Send typed messages such as telemetry, status, ack and error, each with schema version, device ID, sequence and timestamp. Include units and quality flags. Reject malformed, oversized or unexpected event types before rendering. The browser should not trust device-supplied HTML; render values as text and validate allowed ranges.
Keep telemetry frequency and payload size bounded. A dashboard rarely needs every high-rate sensor sample; aggregate or downsample at the edge/gateway and preserve a separate durable history for analysis. WebSocket delivery is a live transport, not a database.
Display connection state separately from data state. The socket can be open while a device has stopped reporting. Show last sample age, last sequence, missed intervals and the device's own health status. Mark charts with gaps rather than connecting across missing periods. On page visibility changes, decide whether to keep the socket, pause charts or fetch a current snapshot on return.
Use exponential backoff with jitter and cap the delay. Reset the delay only after a stable connection, not immediately after a brief handshake. Prevent duplicate timers and dispose listeners when the dashboard closes. On reconnect, request a fresh snapshot and sequence cursor; do not pretend that missed live frames were replayed unless the server actually buffered them. Rate-limit browsers and bound server queues so a slow tab cannot consume unbounded memory.
| State | UI evidence | System behavior |
|---|---|---|
| Connected, fresh | Socket open and recent sample age | Normal streaming |
| Connected, stale | Open socket but age threshold exceeded | Mark device data unhealthy |
| Disconnected | Explicit reconnecting state | Backoff and snapshot on recovery |
| Command pending | Pending/accepted/rejected/expired status | Correlate by command ID and deadline |
Do not treat possession of a WebSocket URL or a browser Origin header as authentication. Origin checks help defend browser sessions against cross-site use but non-browser clients can forge the header. Authenticate the user and session, authorize each device and command, validate the payload again on the backend and device, and log who requested what. Require an expiry and unique command ID so a delayed or repeated command cannot be mistaken for a fresh action.
For a physical actuator, show the expected effect and current device state, require confirmation for consequential actions, and report whether the device accepted and completed the command. The browser's send event only means bytes were handed to the socket stack. Local interlocks, safe defaults and manual stop remain device responsibilities.
Track connected sessions, message rate, queue depth, parse failures, stale-device count, reconnects and command acknowledgement latency. Test browser sleep/wake, Wi-Fi changes, server restarts, duplicate events, malformed JSON and a device that stays connected but freezes its sensor task. A dashboard that looks smooth in the happy path but lies during these cases is not operationally useful.
WebSockets are a good fit for responsive ESP32 views when the system defines event contracts, freshness, bounded reconnects and command authorization. Use a gateway when it improves identity and fleet management, keep durable history separate, and make disconnected or stale data visually explicit. “Live” is a measured state, not a CSS effect.