Real-Time IoT Dashboard with WebSockets and React: Architecture Guide

A fleet of 10,000 IoT devices generates constant telemetry. Making that data actionable means a dashboard that updates in real-time, handles connection failures gracefully, and stays performant under high message frequency.

Azure SignalR Service

import * as signalR from "@microsoft/signalr";
const conn = new signalR.HubConnectionBuilder()
  .withUrl("/api/signalr/negotiate")
  .withAutomaticReconnect([0, 2000, 10000, 30000])
  .build();
conn.on("telemetry", (deviceId, reading) => {
  dispatch(updateReading({deviceId, reading}));
});
await conn.start();

React State for High-Frequency Updates

const DeviceCard = ({deviceId}) => {
  const reading = useSelector(state =>
    selectDeviceById(state.devices, deviceId));
  return <Chart data={reading.history} />;
};

Connection State Management

WebSocket connections drop. Networks are unreliable. Your dashboard must handle disconnects gracefully — not by showing a blank screen or stale data, but by displaying a clear “reconnecting” state, buffering any user actions taken offline, and seamlessly resuming when connectivity restores. Azure SignalR’s withAutomaticReconnect() handles the transport-level reconnection, but your React state must handle the data gap during the outage.

On reconnect, request a snapshot of current state from the REST API before resuming the WebSocket stream. This ensures users see accurate data immediately on reconnect, rather than waiting for the next update cycle. The gap between the WebSocket disconnect and the REST snapshot is typically under a second — imperceptible to users.

Authorization and Multi-Tenancy

In a multi-tenant SaaS IoT dashboard, users should only see their own devices. Azure SignalR groups map naturally to this pattern: on connection, the backend assigns the user to groups corresponding to their authorised device IDs. SignalR messages are targeted to groups rather than broadcast to all connections — a user at Company A never receives telemetry from Company B’s devices.

Combine this with Azure AD B2C for customer authentication and Azure API Management for API gateway and rate limiting. This stack handles authentication, authorisation, and traffic management without custom middleware, letting your team focus on product features.

Mobile Responsiveness

IoT dashboards are increasingly accessed from tablets and smartphones — a maintenance technician on the floor, a yacht captain checking vessel status from the bridge. Design your dashboard as mobile-first: collapsible panels, touch-friendly chart interactions, and reduced data density on small screens. Recharts and Chart.js both support responsive containers that adapt to viewport width automatically.

For field technicians, consider a Progressive Web App (PWA) with offline capability — cache the last known state in localStorage so the dashboard remains useful in areas with poor connectivity. Service workers handle background sync to upload diagnostic actions taken offline.