MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML: Unterschied zwischen den Versionen

Aktuelle Version vom 28. Oktober 2024, 15:23 Uhr

Installation und Konfiguration von Mosquitto (MQTT Broker)

Installation und Konfiguration von Mosquitto (MQTT Broker)

Erstelle ein Passwort für den Benutzer xinux

sudo mosquitto_passwd -c /etc/mosquitto/passwd xinux

Öffne die Mosquitto-Konfigurationsdatei

sudo nano /etc/mosquitto/conf.d/default.conf

Füge folgende Konfigurationszeilen hinzu

listener 1883 0.0.0.0
allow_anonymous true

Starte Mosquitto neu

sudo systemctl restart mosquitto

Überprüfe, ob Mosquitto auf allen Schnittstellen lauscht

sudo netstat -tulnp | grep mosquitto

Voraussetzungen für Node.js-Projekt

Voraussetzungen für Node.js-Projekt

Abhängigkeiten für das Node.js-Projekt installieren

Erstelle ein Verzeichnis für dein Projekt

mkdir mqtt-webserver
cd mqtt-webserver

Initialisiere das Node.js-Projekt

npm init -y

Installiere die benötigten Pakete

npm install mqtt express

Konfiguration des Node.js-Servers

Erstelle die Datei server.js im Projektverzeichnis mit folgendem Inhalt:

const mqtt = require('mqtt');
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

let bulbStatus = 'Unbekannt';

// MQTT-Verbindung herstellen
const client = mqtt.connect('mqtt://localhost:1883', {
  username: 'xinux',
  password: 'geheim'
});

client.on('connect', () => {
  console.log('Verbunden mit dem Broker');
  client.subscribe('gluebirne/status', (err) => {
    if (!err) {
      console.log('Topic abonniert');
    }
  });
});

client.on('message', (topic, message) => {
  bulbStatus = message.toString();
  console.log('Glühbirnenstatus: ', bulbStatus);
});

// API-Route für den Status der Glühbirne
app.get('/status', (req, res) => {
  res.send({ status: bulbStatus });
});

// Statisches Verzeichnis für die Webseite
app.use(express.static(path.join(__dirname)));

// Starte den Webserver
app.listen(port, () => {
  console.log('Webserver läuft auf http://localhost:' + port);
});

HTML-Datei erstellen

Erstelle eine Datei index.html im selben Verzeichnis, die den Status der Pseudo-Glühbirne anzeigt:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pseudo Glühbirne</title>
  <script>
    function fetchStatus() {
      fetch('/status')
        .then(response => response.json())
        .then(data => {
          document.getElementById('status').innerText = 'Status: ' + data.status;
        });
    }

    setInterval(fetchStatus, 1000); // Alle 1 Sekunde den Status abrufen
  </script>
</head>
<body>
  <h1>Pseudo Glühbirne</h1>
  <p id="status">Status: Unbekannt</p>
</body>
</html>

Server starten

Starte den Node.js-Server im Projektverzeichnis

node server.js

Öffne deinen Browser und gehe zu

http://localhost:3000

MQTT-Nachrichten senden

Nachricht für "An" senden

mosquitto_pub -h localhost -t gluebirne/status -m "on" -u xinux -P geheim

Nachricht für "Aus" senden

mosquitto_pub -h localhost -t gluebirne/status -m "off" -u xinux -P geheim

Zusammenfassung

Dieses Projekt demonstriert, wie ein Node.js-Server MQTT-Nachrichten von einem Mosquitto-Broker empfängt und den Status einer Pseudo-Glühbirne über eine Webseite darstellt. Die Webseite wird kontinuierlich aktualisiert, um den aktuellen Status der Glühbirne anzuzeigen.

@@ Zeile 1: / Zeile 1: @@
-== MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML ==
+=== Installation und Konfiguration von Mosquitto (MQTT Broker) ===
+*[[Installation und Konfiguration von Mosquitto (MQTT Broker)]]
-=== Voraussetzungen ===
-Du benötigst die folgenden Programme und Tools:
-* Node.js (Version 20.x oder höher)
-* MQTT Broker (Mosquitto)
-=== Projektstruktur ===
+==== Erstelle ein Passwort für den Benutzer xinux ====
-'''Verzeichnisstruktur:'''
+*'''sudo mosquitto_passwd -c /etc/mosquitto/passwd xinux'''
+==== Öffne die Mosquitto-Konfigurationsdatei ====
+*'''sudo nano /etc/mosquitto/conf.d/default.conf'''
+==== Füge folgende Konfigurationszeilen hinzu ====
 <pre>
-mqtt-webserver/
+listener 1883 0.0.0.0
-├── index.html
+allow_anonymous true
-└── server.js
 </pre>
-=== Installation von Node.js und npm ===
+==== Starte Mosquitto neu ====
+*'''sudo systemctl restart mosquitto'''
-* Entferne, falls vorhanden, die alte Node.js-Version:
-'''sudo apt-get remove nodejs'''
-* Füge das Repository für die neueste LTS-Version von Node.js hinzu:
-'''curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -'''
-* Installiere dann Node.js (Version 20.x) und npm:
-'''sudo apt-get install -y nodejs'''
-* Überprüfe die Installation:
-'''node -v'''
-'''npm -v'''
-  * Es sollte eine Version 20.x für Node.js und eine aktuelle Version von npm angezeigt werden.
-=== Installation von Mosquitto ===
+==== Überprüfe, ob Mosquitto auf allen Schnittstellen lauscht ====
+*'''sudo netstat -tulnp | grep mosquitto'''
-* Aktualisiere die Paketliste und installiere den Mosquitto MQTT Broker und die MQTT-Clients:
+== Voraussetzungen für Node.js-Projekt ==
-'''sudo apt update && sudo apt upgrade'''
+*[[Voraussetzungen für Node.js-Projekt]]
-'''sudo apt install mosquitto mosquitto-clients'''
-* Starte den Mosquitto-Dienst und aktiviere ihn, damit er beim Booten automatisch startet:
-'''sudo systemctl start mosquitto'''
-'''sudo systemctl enable mosquitto'''
-* Überprüfe, ob der Mosquitto-Dienst läuft:
+==== Abhängigkeiten für das Node.js-Projekt installieren ====
-'''sudo systemctl status mosquitto'''
-=== Abhängigkeiten für das Node.js-Projekt installieren ===
+==== Erstelle ein Verzeichnis für dein Projekt ====
+*'''mkdir mqtt-webserver'''
+*'''cd mqtt-webserver'''
-* Erstelle ein Verzeichnis für dein Projekt:
+==== Initialisiere das Node.js-Projekt ====
-'''mkdir mqtt-webserver'''
+*'''npm init -y'''
-'''cd mqtt-webserver'''
-* Initialisiere das Node.js-Projekt:
+==== Installiere die benötigten Pakete ====
-'''npm init -y'''
+*'''npm install mqtt express'''
-* Installiere die benötigten Pakete (Express für den Webserver und MQTT für die MQTT-Kommunikation):
-'''npm install mqtt express'''
-=== Konfiguration des Servers ===
+==== Konfiguration des Node.js-Servers ====
 Erstelle die Datei '''server.js''' im Projektverzeichnis mit folgendem Inhalt:
@@ Zeile 69: / Zeile 52: @@
 // MQTT-Verbindung herstellen
-const client = mqtt.connect('mqtt://localhost:1883');
+const client = mqtt.connect('mqtt://localhost:1883', {
+  username: 'xinux',
+  password: 'geheim'
+});
 client.on('connect', () => {
+  console.log('Verbunden mit dem Broker');
    client.subscribe('gluebirne/status', (err) => {
      if (!err) {
-       console.log('MQTT-Client abonniert');
+       console.log('Topic abonniert');
      }
    });
@@ Zeile 94: / Zeile 81: @@
 // Starte den Webserver
 app.listen(port, () => {
-   console.log(`Webserver läuft auf http://localhost:${port}`);
+   console.log('Webserver läuft auf http://localhost:' + port);
 });
 </pre>
-=== HTML-Datei erstellen ===
+==== HTML-Datei erstellen ====
 Erstelle eine Datei '''index.html''' im selben Verzeichnis, die den Status der Pseudo-Glühbirne anzeigt:
@@ Zeile 128: / Zeile 115: @@
 </pre>
-=== Server starten ===
+==== Server starten ====
+==== Starte den Node.js-Server im Projektverzeichnis ====
+*'''node server.js'''
-* Starte den Node.js-Server im Projektverzeichnis:
+==== Öffne deinen Browser und gehe zu ====
-'''node server.js'''
+*'''http://localhost:3000'''
-* Öffne dann deinen Browser und gehe zu:
-'''http://localhost:3000'''
-=== MQTT-Nachrichten senden ===
+==== MQTT-Nachrichten senden ====
-Um den Status der Glühbirne zu ändern, kannst du über die Konsole MQTT-Nachrichten an den Broker senden:
+==== Nachricht für "An" senden ====
+*'''mosquitto_pub -h localhost -t gluebirne/status -m "on" -u xinux -P geheim'''
-* Nachricht für "An" senden:
+==== Nachricht für "Aus" senden ====
-'''mosquitto_pub -h localhost -t gluebirne/status -m "on"'''
+*'''mosquitto_pub -h localhost -t gluebirne/status -m "off" -u xinux -P geheim'''
-* Nachricht für "Aus" senden:
-'''mosquitto_pub -h localhost -t gluebirne/status -m "off"'''
-== Zusammenfassung ==
+==== Zusammenfassung ====
-Dieses Projekt demonstriert, wie ein Node.js-Server MQTT-Nachrichten von einem Mosquitto-Broker empfängt und den Status einer Pseudo-Glühbirne über eine Webseite darstellt. Die
+Dieses Projekt demonstriert, wie ein Node.js-Server MQTT-Nachrichten von einem Mosquitto-Broker empfängt und den Status einer Pseudo-Glühbirne über eine Webseite darstellt. Die Webseite wird kontinuierlich aktualisiert, um den aktuellen Status der Glühbirne anzuzeigen.