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: @@
-== Installation und Konfiguration von Mosquitto (MQTT Broker) ==
+=== Installation und Konfiguration von Mosquitto (MQTT Broker) ===
+*[[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 ====
@@ Zeile 24: / Zeile 12: @@
 <pre>
 listener 1883 0.0.0.0
-password_file /etc/mosquitto/passwd
+allow_anonymous true
-allow_anonymous false
 </pre>
@@ Zeile 33: / Zeile 20: @@
 ==== Ü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]]
-==== 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 ====
-*'''curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -'''
-==== Installiere Node.js (Version 20.x) und npm ====
-*'''sudo apt install -y nodejs'''
-==== Überprüfe die Installation ====
-*'''node -v'''
-*'''npm -v'''