Echtzeit-IoT-Dashboard mit WebSockets und React: Architektur-Leitfaden

Eine Flotte von 10.000 IoT-Geräten erzeugt konstante Telemetriedaten. Diese Daten nutzbar zu machen bedeutet, ein Dashboard zu bauen, das sich in Echtzeit aktualisiert, Verbindungsausfälle sauber abfängt und auch bei hoher Nachrichtenfrequenz performant bleibt.

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 für hochfrequente Updates

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

Verwaltung des Verbindungszustands

WebSocket-Verbindungen brechen ab. Netzwerke sind unzuverlässig. Ihr Dashboard muss Verbindungsabbrüche sauber abfangen — nicht durch einen leeren Bildschirm oder veraltete Daten, sondern durch einen klaren „Verbindung wird wiederhergestellt“-Zustand, das Zwischenspeichern aller offline durchgeführten Benutzeraktionen und ein nahtloses Fortsetzen, sobald die Verbindung wiederhergestellt ist. Die Funktion withAutomaticReconnect() von Azure SignalR übernimmt den Reconnect auf Transportebene, aber Ihr React-State muss die Datenlücke während des Ausfalls bewältigen.

Fordern Sie beim Reconnect einen Snapshot des aktuellen Zustands über die REST-API an, bevor Sie den WebSocket-Stream fortsetzen. So sehen die Benutzer beim Wiederverbinden sofort korrekte Daten, statt auf den nächsten Aktualisierungszyklus zu warten. Die Lücke zwischen dem WebSocket-Abbruch und dem REST-Snapshot liegt typischerweise unter einer Sekunde — für die Benutzer nicht wahrnehmbar.

Autorisierung und Mandantenfähigkeit

In einem mandantenfähigen SaaS-IoT-Dashboard sollten Benutzer nur ihre eigenen Geräte sehen. Azure-SignalR-Gruppen bilden dieses Muster natürlich ab: Bei der Verbindung ordnet das Backend den Benutzer den Gruppen zu, die seinen autorisierten Geräte-IDs entsprechen. SignalR-Nachrichten werden gezielt an Gruppen gesendet und nicht an alle Verbindungen gebroadcastet — ein Benutzer von Unternehmen A erhält niemals Telemetriedaten von den Geräten des Unternehmens B.

Kombinieren Sie dies mit Azure AD B2C für die Kundenauthentifizierung und Azure API Management als API-Gateway und für Rate Limiting. Dieser Stack übernimmt Authentifizierung, Autorisierung und Traffic-Management ohne eigene Middleware, sodass sich Ihr Team auf Produktfunktionen konzentrieren kann.

Mobile Nutzbarkeit

Auf IoT-Dashboards wird zunehmend von Tablets und Smartphones aus zugegriffen — ein Wartungstechniker in der Halle, ein Yachtkapitän, der vom Steuerstand aus den Schiffsstatus prüft. Gestalten Sie Ihr Dashboard mobile-first: einklappbare Panels, touchfreundliche Chart-Interaktionen und reduzierte Datendichte auf kleinen Bildschirmen. Sowohl Recharts als auch Chart.js unterstützen responsive Container, die sich automatisch an die Breite des Viewports anpassen.

Für Außendiensttechniker bietet sich eine Progressive Web App (PWA) mit Offline-Fähigkeit an — speichern Sie den letzten bekannten Zustand im localStorage zwischen, damit das Dashboard auch in Bereichen mit schlechter Konnektivität nutzbar bleibt. Service Worker übernehmen die Hintergrundsynchronisierung, um offline durchgeführte Diagnoseaktionen hochzuladen.