Fork me on GitHub

Echtzeitdiagramme via WebSockets und Flot


Sensordaten spielen in vielen Anwendungsdomänen eine immer stärkere Rolle. Oft ist es sogar so, dass an der Auslieferung, Verarbeitung und Darstellung dieser Daten in Echtzeit besonderes Interesse herrscht. Kommen in derartigen Szenarien Webtechnologien zur Anwendung, stellt sich die Frage, wie dies effizient erfolgen kann. Nehmen wir zum Beispiel einen Sensor, der kontinuierlich Daten an eine Anwendung im Browser schicken soll. Mechanismen zur Umsetzung eines solchen Szenarios gibt es viele. Gemein haben die meisten davon, dass der Browser die Daten fortlaufend anfragt, diese also vom Sensor pullt. Der Overhead, der mit derartigen Ansätzen einhergeht, liegt auf der Hand. Unnötig viele HTTP-Requests müssen generiert, übertragen und verarbeitet werden, damit die Daten vom Sensor zum Browser gelangen. Hier bieten WebSockets den konzeptionellen Vorteil, die Sensordaten ohne explizite Aufforderung direkt an den Browser pushen zu können. In meiner Bachelorarbeit habe ich mich mit genau so einer Anforderung konfrontiert gesehen. Die Aufgabenstellung beinhaltet unter anderem das browserbasierende Visualisieren von analogen Messwerten eines Sensors in Echtzeit. Für die Kommunikation der Messwerte vom Sensor zum Browser habe ich WebSockets eingesetzt. Die Visualisierung der Messwerte wird mit Hilfe von Flot als Diagramm gerendert. Großer Vorteil dieses Ansatzes ist es, dass das Rendering der Diagramme und damit ein Großteil der Rechenlast auf den Client ausgelagert wird. Dies ist besonders für eher leistungsschwache Sensoren interessant.

components

Timing

Da das Timing der Pakete von der JavaScript Engine geregelt wird, müssen Messwerte immer mit einem ausreichend genauen Zeitstempel versehen werden, dies kann im einfachsten Fall über new Date() erfolgen. Die maximale theoretische Frequenz ist damit auf 1 kHz begrenzt. Praktisch allerdings deutlich darunter, da die Zeit für den Aufruf selbst, wie bei allen höheren Programmiersprachen, nicht erfasst wird.

Als Alternative kann die Datenerfassung über einen zweiten Prozess gestartet werden, der Messwerte mit höherer Frequenz erfassen kann. Die Wertepaare müssen dann in Frames zusammengefasst und an den WebSocket Server übergeben werden.

Flot Charts

Flot speichert ein Array aus Wertepaaren und zeichnet dieses als Diagramm in ein übergebenes DOM-Objekt der Webseite. Um durchlaufende Diagramme anzuzeigen, kann Flot angewiesen werden, die Skalierung in x- und/oder y-Richtung automatisch anzupassen. Hierfür muss allerdings zwingend darauf geachtet werden, dass das Array immer gleich lang bleibt, die durchlaufenden Werte laufen quasi analog auch durch das Array. Die Menge der anzuzeigenden Werte und damit die Geschwindigkeit des Diagramms muss experimentell ermittelt werden und hängt im Wesentlichen von der Abtastrate der ursprünglich zu messenden Größe ab. Über setInterval() wird das Diagramm mit einer passenden Frequenz neu gezeichnet. Bei hohen Abtastfrequenzen müssen die Werte, zur besseren Ablesbarkeit, unterabgetastet werden. Dies sollte bereits im Rahmen des Framings (s.o.) passieren, um die benötigte Datenmenge so gering wie möglich zu halten. Grundsätzlich sollten die einzelnen Parameter gut aufeinander abgestimmt werden, um Redundanzen und damit unnötigen Traffic zu vermeiden.

Der einleitend kurz dargestellte Anwendungsfall ist in meiner Bachelorarbeit detaillierter beschrieben. Unter diesem Link findet sich auch die Software. Viel Spaß beim Experimentieren.