WebSocket Sensor Map Demo

Diese Demo zeigt den bidirektionalen Datenaustausch zwischen clients über einen gemeinsamen Server in Echtzeit via WebSocket. Im Gegensatz zu klassischen pull Anwendungen, erfolgt die Aktualisierung jedes clients auch von Seiten des Servers (push), sobald dort von anderer Stelle Änderungen eingehen.

In dieser Demoanwendung teilen sich alle über die gleiche Channel-ID verbundenen Clients eine gemeinsame Datenbasis. Sobald eine Änderung in einem Client durchgeführt wird, spiegelt sich dies auf allen anderen Clients quasi in Echtzeit wider. Serverseitig ist dies durch eine Node.js App realisiert, die den weit verbreitenden socket.io Framework zur Kommunikation mit den Clients nutzt. Die geteilte Channel-ID einer Demo-Sitzung bildet hierbei einen room in socket.io ab.

Socket.io hat den Vorteil, dass die reine WebSocket API noch um einige Standardfunktion erweitert ist. Neben dem automatischen Reconnect nach dem Wiedereinblenden des Client Browsers, stellen das server- und clientseitig identische Konzept der Custom Events und die serverseitigen Gruppierungsmöglichkeiten von verbundenen socket clients über rooms eine schlüssige Mechanik zur Kanalisierung der Datenkommunikation dar.

Um die hohe Aktualisierungsfrequenz über WebSocket zu verdeutlichen, verzichten die Schieberegler und Taster explizit auf ein Debouncing der Benutzereingaben. Zudem sind auch konkurrierende Dateneingaben mehrerer Clients auf dem selben Datensatz möglich. Beides würde in einer realen Anwendung natürlich vermieden.

Für diese Demo teilen sich beliebige Clients die Daten über jeweils eine gemeinsame Channel-ID. Scannen Sie in den Demo-Einstellungen jeweils den dynamischen QR-Code, um einfach den gemeinsamen URL zwischen unterschiedlichen Geräten weiterzureichen.