MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 1: | Zeile 1: | ||
| + | == MQTT Pseudo-Glühbirnenprojekt mit Node.js und HTML == | ||
| + | |||
=== Voraussetzungen === | === Voraussetzungen === | ||
Du benötigst die folgenden Programme und Tools: | Du benötigst die folgenden Programme und Tools: | ||
| Zeile 14: | Zeile 16: | ||
=== Installation von Node.js und npm === | === Installation von Node.js und npm === | ||
| − | + | ==== Entferne, falls vorhanden, die alte Node.js-Version ==== | |
| − | '''sudo apt-get remove nodejs''' | + | *'''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 -''' | + | *'''curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -''' |
| − | + | ==== Installiere Node.js (Version 20.x) und npm ==== | |
| − | '''sudo apt-get install -y nodejs''' | + | *'''sudo apt-get install -y nodejs''' |
| − | + | ==== Überprüfe die Installation ==== | |
| − | '''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. | * Es sollte eine Version 20.x für Node.js und eine aktuelle Version von npm angezeigt werden. | ||
=== Installation von Mosquitto === | === Installation von Mosquitto === | ||
| − | + | ==== Aktualisiere die Paketliste und installiere den Mosquitto MQTT Broker und die MQTT-Clients ==== | |
| − | '''sudo apt update && sudo apt upgrade''' | + | *'''sudo apt update && sudo apt upgrade''' |
| − | '''sudo apt install mosquitto mosquitto-clients''' | + | *'''sudo apt install mosquitto mosquitto-clients''' |
| − | + | ==== Starte den Mosquitto-Dienst und aktiviere ihn ==== | |
| − | '''sudo systemctl start mosquitto''' | + | *'''sudo systemctl start mosquitto''' |
| − | '''sudo systemctl enable mosquitto''' | + | *'''sudo systemctl enable mosquitto''' |
| − | + | ==== Überprüfe, ob der Mosquitto-Dienst läuft ==== | |
| − | '''sudo systemctl status mosquitto''' | + | *'''sudo systemctl status mosquitto''' |
=== 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 ==== | |
| − | '''mkdir mqtt-webserver''' | + | *'''mkdir mqtt-webserver''' |
| − | '''cd mqtt-webserver''' | + | *'''cd mqtt-webserver''' |
| − | + | ==== Initialisiere das Node.js-Projekt ==== | |
| − | '''npm init -y''' | + | *'''npm init -y''' |
| − | + | ==== Installiere die benötigten Pakete ==== | |
| − | '''npm install mqtt express''' | + | *'''npm install mqtt express''' |
=== Konfiguration des Servers === | === Konfiguration des Servers === | ||
| Zeile 128: | Zeile 130: | ||
=== Server starten === | === Server starten === | ||
| − | + | ==== Starte den Node.js-Server im Projektverzeichnis ==== | |
| − | '''node server.js''' | + | *'''node server.js''' |
| − | + | ==== Öffne deinen Browser und gehe zu ==== | |
| − | '''http://localhost:3000''' | + | *'''http://localhost:3000''' |
=== MQTT-Nachrichten senden === | === MQTT-Nachrichten senden === | ||
| − | + | ==== Nachricht für "An" senden ==== | |
| − | + | *'''mosquitto_pub -h localhost -t gluebirne/status -m "on"''' | |
| − | |||
| − | '''mosquitto_pub -h localhost -t gluebirne/status -m "on"''' | ||
| − | + | ==== Nachricht für "Aus" senden ==== | |
| − | '''mosquitto_pub -h localhost -t gluebirne/status -m "off"''' | + | *'''mosquitto_pub -h localhost -t gluebirne/status -m "off"''' |
== 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 | + | 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, 18:15 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 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
- 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
- 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 deinen Browser und gehe zu
MQTT-Nachrichten 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.