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

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.