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

Aus Xinux Wiki
Zur Navigation springen Zur Suche springen
Zeile 1: Zeile 1:
−
=== Voraussetzungen ===
+
==== Installation und Konfiguration von Mosquitto (MQTT Broker) ====
−
Du benötigst die folgenden Programme und Tools:
 
−
* Node.js (Version 20.x oder höher)
 
−
* MQTT Broker (Mosquitto)
 
  
−
=== Projektstruktur ===
+
==== Installation von Mosquitto ====
−
'''Verzeichnisstruktur:'''
+
 
 +
==== Aktualisiere die Paketliste und installiere Mosquitto ====
 +
*'''sudo apt update && sudo apt upgrade'''
 +
*'''sudo apt install mosquitto mosquitto-clients'''
 +
 
 +
==== Starte den Mosquitto-Dienst und aktiviere ihn ====
 +
*'''sudo systemctl enable mosquitto --now'''
 +
 
 +
==== Überprüfe den Status des Mosquitto-Dienstes ====
 +
*'''sudo systemctl status mosquitto'''
 +
 
 +
==== Passwort für Mosquitto setzen ====
 +
 
 +
==== 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 ====
 
<pre>
 
<pre>
−
mqtt-webserver/
+
listener 1883 0.0.0.0
−
├── index.html
+
password_file /etc/mosquitto/passwd
−
└── server.js
+
allow_anonymous false
 
</pre>
 
</pre>
  
−
=== Installation von Node.js und npm ===
+
==== 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 ====
 +
 
 +
==== Installation von Node.js und npm ====
  
 
==== Entferne, falls vorhanden, die alte Node.js-Version ====
 
==== Entferne, falls vorhanden, die alte Node.js-Version ====
Zeile 28: Zeile 53:
 
*'''node -v'''
 
*'''node -v'''
 
*'''npm -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 ====
+
==== Abhängigkeiten für das Node.js-Projekt installieren ====
−
*'''sudo apt install mosquitto mosquitto-clients'''
 
−
 
 
−
==== Starte den Mosquitto-Dienst und aktiviere ihn ====
 
−
*'''sudo systemctl enable mosquitto --now'''
 
−
 
 
−
==== Ü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 ====
 
==== Erstelle ein Verzeichnis für dein Projekt ====
Zeile 53: Zeile 67:
 
*'''npm install mqtt express'''
 
*'''npm install mqtt express'''
  
−
=== Konfiguration des Servers ===
+
 
 +
==== Konfiguration des Node.js-Servers ====
  
 
Erstelle die Datei '''server.js''' im Projektverzeichnis mit folgendem Inhalt:
 
Erstelle die Datei '''server.js''' im Projektverzeichnis mit folgendem Inhalt:
Zeile 67: Zeile 82:
  
 
// MQTT-Verbindung herstellen
 
// MQTT-Verbindung herstellen
−
const client = mqtt.connect('mqtt://localhost:1883');
+
const client = mqtt.connect('mqtt://localhost:1883', {
 +
  username: 'xinux',
 +
  password: 'geheim'
 +
});
  
 
client.on('connect', () => {
 
client.on('connect', () => {
 +
  console.log('Verbunden mit dem Broker');
 
   client.subscribe('gluebirne/status', (err) => {
 
   client.subscribe('gluebirne/status', (err) => {
 
     if (!err) {
 
     if (!err) {
−
       console.log('MQTT-Client abonniert');
+
       console.log('Topic abonniert');
 
     }
 
     }
 
   });
 
   });
Zeile 92: Zeile 111:
 
// Starte den Webserver
 
// Starte den Webserver
 
app.listen(port, () => {
 
app.listen(port, () => {
−
   console.log(`Webserver läuft auf http://localhost:${port}`);
+
   console.log('Webserver läuft auf http://localhost:' + port);
 
});
 
});
 
</pre>
 
</pre>
  
−
=== HTML-Datei erstellen ===
+
==== HTML-Datei erstellen ====
  
 
Erstelle eine Datei '''index.html''' im selben Verzeichnis, die den Status der Pseudo-Glühbirne anzeigt:
 
Erstelle eine Datei '''index.html''' im selben Verzeichnis, die den Status der Pseudo-Glühbirne anzeigt:
Zeile 126: Zeile 145:
 
</pre>
 
</pre>
  
−
=== Server starten ===
+
==== Server starten ====
  
 
==== Starte den Node.js-Server im Projektverzeichnis ====
 
==== Starte den Node.js-Server im Projektverzeichnis ====
Zeile 134: Zeile 153:
 
*'''http://localhost:3000'''
 
*'''http://localhost:3000'''
  
−
=== MQTT-Nachrichten senden ===
+
 
 +
==== MQTT-Nachrichten senden ====
  
 
==== Nachricht für "An" senden ====
 
==== Nachricht für "An" senden ====
−
*'''mosquitto_pub -h localhost -t gluebirne/status -m "on"'''
+
*'''mosquitto_pub -h localhost -t gluebirne/status -m "on" -u xinux -P geheim'''
  
 
==== Nachricht für "Aus" senden ====
 
==== Nachricht für "Aus" senden ====
−
*'''mosquitto_pub -h localhost -t gluebirne/status -m "off"'''
+
*'''mosquitto_pub -h localhost -t gluebirne/status -m "off" -u xinux -P geheim'''
 +
 
  
−
== 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 Webseite wird kontinuierlich aktualisiert, um den aktuellen Status der Glühbirne anzuzeigen.
 
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.

Version vom 21. Oktober 2024, 19:13 Uhr

Installation und Konfiguration von Mosquitto (MQTT Broker)

Installation von Mosquitto

Aktualisiere die Paketliste und installiere Mosquitto

  • sudo apt update && sudo apt upgrade
  • sudo apt install mosquitto mosquitto-clients

Starte den Mosquitto-Dienst und aktiviere ihn

  • sudo systemctl enable mosquitto --now

Überprüfe den Status des Mosquitto-Dienstes

  • sudo systemctl status mosquitto

Passwort für Mosquitto setzen

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
password_file /etc/mosquitto/passwd
allow_anonymous false

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

Installation von Node.js und npm

Entferne, falls vorhanden, die alte Node.js-Version

  • sudo apt update && sudo apt upgrade
  • sudo apt install curl
  • sudo apt remove nodejs

Füge das Repository für die neueste LTS-Version von Node.js hinzu

Installiere Node.js (Version 20.x) und npm

  • sudo apt install -y nodejs

Überprüfe die Installation

  • node -v
  • npm -v


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


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.

Abgerufen von „http://wiki.ixheim.de/index.php?title=MQTT_Pseudo-Glühbirnenprojekt_mit_Node.js_und_HTML&oldid=57919“