MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
| − | === | + | === 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 | + | *'''sudo nano /etc/mosquitto/conf.d/default.conf''' |
| − | |||
| − | |||
| − | ==== Füge | + | ==== Füge folgende Konfigurationszeilen hinzu ==== |
| − | + | <pre> | |
| − | + | listener 1883 0.0.0.0 | |
| − | + | allow_anonymous true | |
| − | + | </pre> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | === | + | ==== Starte Mosquitto neu ==== |
| + | *'''sudo systemctl restart mosquitto''' | ||
| − | ==== | + | ==== Überprüfe, ob Mosquitto auf allen Schnittstellen lauscht ==== |
| − | *'''sudo | + | *'''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 === | + | ==== Abhängigkeiten für das Node.js-Projekt installieren ==== |
==== Erstelle ein Verzeichnis für dein Projekt ==== | ==== Erstelle ein Verzeichnis für dein Projekt ==== | ||
| Zeile 54: | Zeile 37: | ||
*'''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 68: | Zeile 52: | ||
// 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(' | + | console.log('Topic abonniert'); |
} | } | ||
}); | }); | ||
| Zeile 93: | Zeile 81: | ||
// Starte den Webserver | // Starte den Webserver | ||
app.listen(port, () => { | app.listen(port, () => { | ||
| − | console.log( | + | 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 127: | Zeile 115: | ||
</pre> | </pre> | ||
| − | === Server starten === | + | ==== Server starten ==== |
==== Starte den Node.js-Server im Projektverzeichnis ==== | ==== Starte den Node.js-Server im Projektverzeichnis ==== | ||
| Zeile 135: | Zeile 123: | ||
*'''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. | ||
Aktuelle Version vom 28. Oktober 2024, 15:23 Uhr
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
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.