Node-RED MQTT-Dashboard: Sensordaten visualisieren (Anleitung)

IoT-Visualisierung souverän und self-hosted aufbauen? WZ-IT plant, baut und betreibt Node-RED, MQTT und Dashboards auf Ihrer Infrastruktur - Open Source, EU, ohne Cloud-Lock-in. Zur IoT-Plattformentwicklung

Ein Node-RED MQTT-Dashboard bauen Sie in fünf Schritten: Node-RED 5 per Docker starten, das Paket Dashboard 2.0 (@flowfuse/node-red-dashboard) über die Palette installieren, eine mqtt-in-Node mit Ihrem Broker verbinden, die JSON-Payload mit einer json- und change-Node zerlegen und die Werte an Gauge-, Chart- und Text-Widgets hängen. Nach dem Deploy sehen Sie Live-Sensordaten unter http://localhost:1880/dashboard. Diese Anleitung führt Schritt für Schritt durch Installation, MQTT-Anbindung, Payload-Parsing und die Frage, wann Node-RED-Dashboard reicht und wann Grafana die bessere Wahl ist.

Inhaltsverzeichnis

• Voraussetzungen: Node-RED 5 und Dashboard 2.0
• Node-RED mit Docker installieren
• Dashboard 2.0 installieren
• MQTT-in-Node mit dem Broker verbinden
• JSON-Payload parsen: json, change oder function
• Widgets aufs Dashboard: Gauge, Chart, Text
• Live-Sensordaten visualisieren
• Node-RED-Dashboard vs Grafana: wann was?
• Unser Vorgehen bei WZ-IT
• Weiterführende Guides

Voraussetzungen: Node-RED 5 und Dashboard 2.0

Sie brauchen einen erreichbaren MQTT-Broker (z. B. Mosquitto oder den Broker einer IoT-Plattform), auf den Ihre Sensoren publishen, und eine Umgebung mit Docker. Zwei Versionsfragen sind 2026 wichtig:

• Node-RED 5.0 wurde am 9. Juni 2026 veröffentlicht (nodered.org/blog). Es setzt Node.js 22.9 oder neuer voraus und empfiehlt Node 24.x. Das offizielle Docker-Image bringt eine passende Runtime bereits mit.
• Bei der Oberfläche gibt es zwei Pakete, die leicht zu verwechseln sind. Nehmen Sie Dashboard 2.0 (@flowfuse/node-red-dashboard). Das alte node-red-dashboard (Dashboard 1.0) basiert auf dem seit Ende 2021 abgekündigten Angular v1 und wurde am 27. Juni 2024 offiziell deprecated (flowfuse.com) - keine neuen Funktionen, nur noch Best-Effort-Patches.

Grundlagen zum Transportprotokoll erklärt der Beitrag Was ist MQTT?. Wir nutzen im Beispiel Sensoren, die JSON wie {"temperature": 21.5, "humidity": 48} auf ein Topic wie sensors/room1/data publishen.

Node-RED mit Docker installieren

Node-RED startet mit einem einzigen Befehl. Wir pinnen bewusst den Tag 5.0 statt latest:

docker run -d \
  -p 1880:1880 \
  -v node_red_data:/data \
  --name nodered \
  nodered/node-red:5.0

Das benannte Volume node_red_data wird auf das Verzeichnis /data im Container gemappt - dort liegen Flows (flows.json), Credentials und installierte Nodes, sodass nichts beim Neustart verloren geht (nodered.org/docs). Öffnen Sie anschließend http://localhost:1880 im Browser; bei einem Remote-Host entsprechend http://SERVER-IP:1880.

Für den Dauerbetrieb gilt dasselbe wie bei jeder Web-Anwendung: Node-RED nicht ungeschützt ins Internet stellen. Setzen Sie einen Reverse Proxy mit TLS (nginx, Traefik, Caddy) davor und aktivieren Sie in der settings.js die adminAuth (Login für den Flow-Editor) sowie bei Bedarf eine separate Authentifizierung fürs Dashboard.

Dashboard 2.0 installieren

Die Widgets kommen als zusätzliche Nodes über den Palette Manager:

1. Oben rechts das Menü öffnen, Palette verwalten wählen.
2. Reiter Installieren, nach node-red-dashboard suchen.
3. Das Paket @flowfuse/node-red-dashboard installieren (nicht das deprecatete node-red-dashboard).

Nach kurzer Installation erscheinen in der Palette neue dashboard 2.0-Nodes (ui-gauge, ui-chart, ui-text, ui-button und weitere). Dashboard 2.0 organisiert die Oberfläche in einer vierstufigen Hierarchie (dashboard.flowfuse.com):

Beim Anlegen des ersten Widgets können Sie ui-base, ui-page und ui-group direkt mit dem Stift-Symbol neu erzeugen - das müssen Sie also nur einmal tun.

MQTT-in-Node mit dem Broker verbinden

Ziehen Sie eine mqtt in-Node aus der Palette in den Flow und öffnen Sie sie per Doppelklick:

• Server: über den Stift eine neue Broker-Konfiguration anlegen. Host und Port eintragen - 1883 unverschlüsselt oder 8883 mit TLS (im Reiter Security/TLS aktivieren). Falls der Broker es verlangt, im Reiter Security Benutzer und Passwort hinterlegen.
• Topic: das Topic Ihrer Sensoren, z. B. sensors/room1/data. Wildcards sind erlaubt: sensors/+/data fängt alle Räume, sensors/# alles darunter.
• QoS: für die meisten Sensordaten genügt 0; 1 garantiert mindestens eine Zustellung.
• Output: auf „a parsed JSON object" stellen, dann liefert die Node msg.payload bereits als Objekt.

Klicken Sie Deploy. Unter der Node sollte der Status „connected" erscheinen. Hängen Sie zur Kontrolle eine debug-Node an und beobachten Sie im Debug-Seitenbereich, ob Nachrichten eintreffen.

JSON-Payload parsen: json, change oder function

Liefert die mqtt in-Node nur Text (etwa bei Output: auto-detect), wandelt eine json-Node den String zuverlässig in ein Objekt um. Danach extrahieren Sie einzelne Messwerte, denn ein Gauge zeigt genau eine Zahl:

• change-Node (no-code): Regel Set -> msg.payload -> msg.payload.temperature. Ideal, wenn Sie nur einen Wert herausziehen.
• function-Node (Code), wenn Logik dazukommt:

// Temperatur extrahieren, plausibilisieren, Einheit ergänzen
const t = msg.payload.temperature;
if (typeof t !== "number") return null;   // ungültige Werte verwerfen
msg.payload = Math.round(t * 10) / 10;    // auf 0,1 °C runden
return msg;

Für mehrere Werte aus einer Nachricht (Temperatur und Luftfeuchte) nutzen Sie eine function-Node mit mehreren Ausgängen oder eine zweite change-Node pro Widget. So bleibt jeder Strang sauber genau einem Anzeigeelement zugeordnet.

Widgets aufs Dashboard: Gauge, Chart, Text

Jetzt verbinden Sie die geparsten Werte mit den Anzeige-Nodes. Dashboard 2.0 nutzt für Diagramme Apache eCharts:

• ui-gauge (Momentanwert): Node hinter den Temperatur-Strang hängen, einer Group zuordnen, Min/Max (z. B. 0 bis 50) und Einheit °C setzen. Der numerische msg.payload füllt den Zeiger.
• ui-chart (Zeitverlauf): als Typ Line wählen, derselbe msg.payload landet als Datenpunkt auf der Zeitachse. Über das Feld „Remove older data" (z. B. 1 Stunde) begrenzen Sie den Speicher im Browser.
• ui-text (Label/Status): zeigt Werte oder Texte direkt an, etwa „Letzte Aktualisierung" oder einen aus einer function-Node gesetzten Status.

Ein typischer Flow sieht damit so aus:

[mqtt in] -> [json] -> [change: payload = payload.temperature] -> [ui-gauge]
                   \-> [change: payload = payload.temperature] -> [ui-chart]

Live-Sensordaten visualisieren

Nach Deploy öffnen Sie die Oberfläche unter http://localhost:1880/dashboard (Remote: http://SERVER-IP:1880/dashboard). Jedes weitere Topic landet über eine eigene mqtt in-Node und einen eigenen Widget-Strang in derselben oder einer neuen ui-page. Sobald Ihre Sensoren publishen, bewegt sich der Gauge-Zeiger in Echtzeit und das Chart füllt sich Punkt für Punkt.

Drei Praxistipps:

• Gruppen-Breite: ui-group haben eine feste Spaltenbreite (Standard 6). Passen Sie Group- und Widget-Breite an, damit das Layout auf dem Smartphone responsiv bleibt.
• Pufferung: Die Chart-Historie lebt im Browser. Wer Daten über Tage oder Monate braucht, schreibt sie zusätzlich in eine Zeitreihendatenbank (siehe nächster Abschnitt).
• Sicherheit: Das Dashboard erbt nicht automatisch das Editor-Login. Schützen Sie /dashboard über den Reverse Proxy oder die Dashboard-eigene Auth.

Node-RED-Dashboard vs Grafana: wann was?

Beide visualisieren IoT-Daten, lösen aber unterschiedliche Aufgaben. Node-RED-Dashboard sitzt direkt am Flow und kann auch steuern (Buttons, Slider, Formulare). Grafana ist das Analyse- und Reporting-Werkzeug über einer Datenbank.

In der Praxis kombiniert man beides: Node-RED nimmt MQTT entgegen, zeigt Live-Werte und schreibt sie parallel in InfluxDB, aus der Grafana langfristige Dashboards baut. Den Aufbau dieser Kette beschreibt der Beitrag Grafana IoT-Dashboard mit InfluxDB.

Unser Vorgehen bei WZ-IT

Wir planen, bauen und betreiben Node-RED, MQTT und Dashboards als souveräne, self-hostete Bausteine Ihrer IoT-Plattform - auf Proxmox, Hetzner oder On-Premises. Dazu gehören gehärtete Docker-Setups mit TLS und Backups, robuste Flows mit sauberem Payload-Handling, die Anbindung von Broker und Sensoren sowie die passende Visualisierung: Node-RED-Dashboard fürs Bedienpanel, Grafana fürs Reporting. Im Rahmen unserer Node-RED-Expertise und IoT-Plattformentwicklung - Open Source, EU, ohne Per-Device-Lizenz.

Weiterführende Guides

• Node-RED-Expertise - Flows, Integrationen und Betrieb
• Was ist MQTT? - das wichtigste IoT-Protokoll erklärt
• Grafana IoT-Dashboard mit InfluxDB - Zeitreihen langfristig speichern und visualisieren
• IoT self-hosted vs Cloud - Souveränität, Kosten und Lock-in im Vergleich

Sie wollen IoT-Daten souverän visualisieren? Lernen Sie uns kennen oder sehen Sie sich unsere IoT-Plattformen an.