Pulpit IoT w czasie rzeczywistym z WebSocketami i React: przewodnik po architekturze

Flota 10 000 urządzeń IoT generuje nieustanną telemetrię. Aby te dane były użyteczne, potrzebny jest pulpit, który aktualizuje się w czasie rzeczywistym, elegancko radzi sobie z awariami połączenia i zachowuje wydajność przy wysokiej częstotliwości komunikatów.

Usługa Azure SignalR

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();

Stan React przy aktualizacjach o wysokiej częstotliwości

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

Zarządzanie stanem połączenia

Połączenia WebSocket są zrywane. Sieci są zawodne. Twój pulpit musi elegancko radzić sobie z rozłączeniami — nie przez pokazywanie pustego ekranu czy nieaktualnych danych, ale przez wyświetlanie czytelnego stanu “ponowne łączenie”, buforowanie działań użytkownika wykonanych w trybie offline i płynne wznowienie pracy po przywróceniu łączności. Metoda withAutomaticReconnect() z Azure SignalR obsługuje ponowne łączenie na poziomie transportu, ale to Twój stan React musi obsłużyć lukę w danych powstałą podczas awarii.

Po ponownym połączeniu pobierz migawkę bieżącego stanu z API REST, zanim wznowisz strumień WebSocket. Dzięki temu użytkownicy od razu widzą poprawne dane po ponownym połączeniu, zamiast czekać na kolejny cykl aktualizacji. Luka między rozłączeniem WebSocket a migawką REST jest zwykle krótsza niż sekunda — niezauważalna dla użytkowników.

Autoryzacja i wielodostępność

W wielodostępnym pulpicie IoT typu SaaS użytkownicy powinni widzieć wyłącznie własne urządzenia. Grupy Azure SignalR w naturalny sposób odpowiadają temu wzorcowi: przy nawiązaniu połączenia backend przypisuje użytkownika do grup odpowiadających identyfikatorom urządzeń, do których ma uprawnienia. Komunikaty SignalR są kierowane do grup, a nie rozgłaszane do wszystkich połączeń — użytkownik z firmy A nigdy nie otrzyma telemetrii z urządzeń firmy B.

Połącz to z Azure AD B2C do uwierzytelniania klientów oraz Azure API Management jako bramą API i mechanizmem ograniczania przepustowości. Ten stos obsługuje uwierzytelnianie, autoryzację i zarządzanie ruchem bez własnego oprogramowania pośredniczącego, pozwalając zespołowi skupić się na funkcjach produktu.

Responsywność mobilna

Pulpity IoT są coraz częściej obsługiwane z tabletów i smartfonów — technik utrzymania ruchu na hali, kapitan jachtu sprawdzający status jednostki z mostka. Projektuj pulpit w podejściu mobile-first: zwijane panele, przyjazne dotykowi interakcje z wykresami i zmniejszona gęstość danych na małych ekranach. Zarówno Recharts, jak i Chart.js obsługują responsywne kontenery, które automatycznie dostosowują się do szerokości okna.

Dla techników w terenie warto rozważyć aplikację progresywną (PWA) z możliwością pracy offline — buforuj ostatni znany stan w localStorage, aby pulpit pozostawał użyteczny w miejscach o słabej łączności. Service workery obsługują synchronizację w tle, przesyłając działania diagnostyczne wykonane w trybie offline.