iX 1/2023
S. 120
Praxis
Webentwicklung

Event Streams im Frontend mit React

Um sich schnell ändernde Daten in einem Webfrontend darzustellen, sind speziell angepasste Komponenten nötig.

Von Sebastian Springer

Typischer Einsatzzweck von React und anderen Single-Page-Application-Frameworks ist die Implementierung von Applikationen, die Daten anzeigen, erzeugen, modifizieren und löschen (Create, Read, Update, Delete). Multi-User-Anwendungen sind Teil eines größeren Verbundes, in dem sich an verschiedenen Stellen Änderungen ergeben. Das Frontend sendet dann Änderungen über HTTP an den Server, muss aber auch in der Lage sein, Änderungen vom Server zu empfangen, weil beispielsweise ein anderer Benutzer einen Datensatz bearbeitet hat.

Ein weiteres Szenario, bei dem der Server aktiv Änderungen an die angeschlossenen Frontends publizieren muss, ist, wenn die Datenquelle selbst Änderungen sendet, etwa ein Sensor oder ein externer Webservice. Temperatursensoren mit Wertanzeige lösen bei einem neuen Messwert ein Ereignis aus, das der Server zum Frontend sendet. Das Frontend zeigt den Wert dann an. Die vom Server verursachten Änderungen erfordern es, die Architektur der Frontend-Applikationen anzupassen, da der Browser keine Kontrolle über den Eventfluss hat und die Daten wie gesendet verarbeiten muss. Sowohl Browser als auch Bibliotheken und Frameworks lösen das Problem unterschiedlich. Der Artikel stellt Lösungen mit React und serverseitigen Event Streams vor.

Kommentieren