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

Version vom 21. Oktober 2024, 18:06 Uhr

MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML

Voraussetzungen

Du benötigst die folgenden Programme und Tools:

Node.js (Version 20.x oder höher)
MQTT Broker (Mosquitto)

Projektstruktur

Verzeichnisstruktur:

mqtt-webserver/
├── index.html
└── server.js

Installation von Node.js und npm

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

Aktualisiere die Paketliste und installiere den Mosquitto MQTT Broker und die MQTT-Clients:
```sudo apt update && sudo apt upgrade```
```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:
```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```

Initialisiere das Node.js-Projekt:
```npm init -y```

Installiere die benötigten Pakete (Express für den Webserver und MQTT für die MQTT-Kommunikation):
```npm install mqtt express```

Konfiguration des 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');

client.on('connect', () => {
  client.subscribe('gluebirne/status', (err) => {
    if (!err) {
      console.log('MQTT-Client 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 dann deinen Browser und gehe zu:
```http://localhost:3000```

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"```

Nachricht für "Aus" senden:
```mosquitto_pub -h localhost -t gluebirne/status -m "off"```

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 2: / Zeile 2: @@
 === Voraussetzungen ===
-* Installiere Node.js (Version 20.x oder höher)
+Du benötigst die folgenden Programme und Tools:
-* Installiere MQTT Broker (Mosquitto)
+* Node.js (Version 20.x oder höher)
+* MQTT Broker (Mosquitto)
 === Projektstruktur ===
@@ Zeile 13: / Zeile 14: @@
 </pre>
-=== Installation ===
+=== Installation von Node.js und npm ===
+* 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 ===
+* Aktualisiere die Paketliste und installiere den Mosquitto MQTT Broker und die MQTT-Clients:
+* ```sudo apt update && sudo apt upgrade```
+* ```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:
+* ```sudo systemctl status mosquitto```
+=== Abhängigkeiten für das Node.js-Projekt installieren ===
 * Erstelle ein Verzeichnis für dein Projekt:
-<pre>
+* ```mkdir mqtt-webserver```
-mkdir mqtt-webserver
+* ```cd mqtt-webserver```
-cd mqtt-webserver
-</pre>
 * Initialisiere das Node.js-Projekt:
-<pre>
+* ```npm init -y```
-npm init -y
-</pre>
+* Installiere die benötigten Pakete (Express für den Webserver und MQTT für die MQTT-Kommunikation):
+* ```npm install mqtt express```
-* Installiere benötigte Pakete (Express und MQTT):
+=== Konfiguration des Servers ===
-<pre>
-npm install mqtt express
-</pre>
-=== Server.js (Node.js) ===
 Erstelle die Datei '''server.js''' im Projektverzeichnis mit folgendem Inhalt:
@@ Zeile 72: / Zeile 98: @@
 </pre>
-=== HTML-Datei ===
+=== HTML-Datei erstellen ===
 Erstelle eine Datei '''index.html''' im selben Verzeichnis, die den Status der Pseudo-Glühbirne anzeigt:
@@ Zeile 102: / Zeile 129: @@
 === Server starten ===
-Starte den Node.js-Server im Projektverzeichnis:
-<pre>
-node server.js
-</pre>
-Öffne dann deinen Browser und gehe zu:
+* Starte den Node.js-Server im Projektverzeichnis:
-<pre>
+* ```node server.js```
-http://localhost:3000
-</pre>
+* Öffne dann deinen Browser und gehe zu:
+* ```http://localhost:3000```
 === 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:
-<pre>
+* ```mosquitto_pub -h localhost -t gluebirne/status -m "on"```
-mosquitto_pub -h localhost -t gluebirne/status -m "on"
-</pre>
 * Nachricht für "Aus" senden:
-<pre>
+* ```mosquitto_pub -h localhost -t gluebirne/status -m "off"```
-mosquitto_pub -h localhost -t gluebirne/status -m "off"
-</pre>
 == 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.

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

Version vom 21. Oktober 2024, 18:06 Uhr

Inhaltsverzeichnis