Vom Browser auf Node-RED Objekte zugreifen

Mit Node-RED Dashboard lassen sich schnell sehr schicke und funktionale Dashboards erstellen. Aber manchmal braucht man mehr Funktionalität als die vorhandenen Widgets liefern. Im Folgenden zeige ich Dir, wie Du mit client-seitigem Javascript auf die Nachrichten aus dem Node-RED Flow zugreifen kannst. Das eröffnet Dir unzählige Möglichkeiten, Deine eigenen Widgets zu erstellen.

Dazu bedienen wir uns einer Technik, die Node-RED von Angular geerbt hat, auf dem es aufbaut: dem scope. Der scope stellt dabei die Verbindung zwischen unserem serverseitigen Code und dem Code im Browser dar. Über die Methode watch können Änderungen im scope erkannt werden. Bei Node-RED interessiert uns natürlich vor allem das msg-Objekt, das zwischen den Knoten ausgetauscht wird. Mit folgendem kleinen Flow, lässt sich das Prinzip sehr gut zeigen. Du kannst das nachher selbst leicht auch auf komplexere Szenarien anwenden:

  1. Du nimmst zwei Inject-Knoten, die je einen beliebigen Wert einfügen – in meinem Beispiel den String „Hello World!“ und den String „Node-RED rocks!“
  2. Daran hängst Du den Template-Knoten von Node-RED Dashbaord. Den Template-Knoten fügst Du der gewünschten Dashbaord-Seite und Gruppe hinzu.
  3. In den Template-Knoten kommt nun folgender HTML- und Javascript-Code, der dann clientseitig im Browser laufen wird:
<p>msg: <span id="myMsg"></span></p>

<script>
(function(scope) {
    // watch msg object from Node-RED
    scope.$watch('msg', function(msg) {
        // new message received
        document.getElementById("myMsg").innerHTML = msg.payload;
    });
})(scope);
</script>

Damit sieht der einfache Flow dann wie folgt aus:

In deinem Dashboard hast Du nun ein Widget, dass dynamisch den Text anzeigt, den Du mittels Inject in den Flow einfügst.

(Visited 172 times, 1 visits today)

Nichts mehr verpassen?

Abonniere unseren Newsletter und Du verpasst keinen Artikel mehr. Versprochen!

*Pflichtfeld

Über René Auberger 12 Artikel

René ist IT Architekt für Internet of Things, Industrie 4.0, Analytics und Cognitive Computing. In seiner Freizeit macht er Schritt für Schritt sein Haus smarter. 2017 hat René das Internet-of-Things.blog gegründet. Er schreibt auch regelmäßig auf Twitter.

Zu Renés kompletten Profil…

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*