MQTT Visualisierte Steuerung Sensor - Versionsgeschichte

Thomas.will am 20. Juni 2026 um 12:24 Uhr

2026-06-20T12:24:05Z

@@ Zeile 1: / Zeile 1: @@
 === Voraussetzungen ===
-*[[Voraussetzungen für Node.js-Projekt]]
+==== Installation von Node.js und npm ====
 *apt install mosquitto-clients

Thomas.will am 4. November 2024 um 14:21 Uhr

2024-11-04T14:21:11Z

← Nächstältere Version		Version vom 4. November 2024, 14:21 Uhr
Zeile 17:		Zeile 17:

	<pre>		<pre>

	const mqtt = require('mqtt');		const mqtt = require('mqtt');
	const express = require('express');		const express = require('express');
Zeile 23:		Zeile 22:
	const app = express();		const app = express();
	const port = 3000;		const port = 3000;
			const fs = require('fs');
	let status = {		let status = {
	livingRoom: 'off',		livingRoom: 'off',
Zeile 31:		Zeile 30:
	};		};

	// MQTT ~~connection options (without TLS for unencrypted communication)~~		// MQTT-Verbindung herstellen
	const options = {		const options = {
			// username: 'xinux',
			// password: '123Start$',
			// port: 8883,
			// protocol: 'mqtts',
			// ca: fs.readFileSync('./ca.crt'),
	port: 1883,		port: 1883,
	host: 'mqtt.dkbi.int'		host: 'mqtt.dkbi.int'
Zeile 40:		Zeile 44:

	client.on('connect', () => {		client.on('connect', () => {
	console.log('Connected to the ~~MQTT~~ broker');		console.log('Connected to the broker');
	client.subscribe('home/+/status', (err) => {		client.subscribe('home/+/status', (err) => {
	if (!err) {		if (!err) {
Zeile 54:		Zeile 58:
	});		});

	// ~~Route~~ to get the status of the lights and front door		// API route to get the status of the lights and front door
	app.get('/status', (req, res) => {		app.get('/status', (req, res) => {
	res.send(status);		res.send(status);
	});		});

	~~// Route to toggle a device~~		// Serve static directory for the web interface
	~~app.post('/toggle/:device', (req, res) => {~~
	~~const device = req.params.device;~~
	~~const currentStatus = status[device];~~

	~~if (!currentStatus) {~~
	~~res.status(400).send({ error: 'Invalid device' });~~
	~~return;~~
	}

	~~// Toggle the status (for front door: closed/open)~~
	~~let newStatus;~~
	~~if (device === 'frontDoor') {~~
	~~newStatus = currentStatus === 'closed' ? 'open' : 'closed';~~
	~~} else {~~
	~~newStatus = currentStatus === 'on' ? 'off' : 'on';~~
	}
	~~status[device] = newStatus;~~

	~~// Send MQTT message~~
	~~const topic = `home/${device}/status`;~~
	~~client.publish(topic, newStatus, (err) => {~~
	~~if (err) {~~
	~~console.log(`Error sending message to ${device}: ${err.message}`);~~
	~~res.status(500).send({ success: false, message: 'Error sending message' });~~
	~~} else {~~
	~~console.log(`Message sent: ${device} is now ${newStatus}`);~~
	~~res.send({ success: true, message: `Device ${device} successfully toggled` });~~
	}
	~~});~~
	~~});~~

	// Serve ~~the~~ static directory for the web interface
	app.use(express.static(path.join(__dirname)));		app.use(express.static(path.join(__dirname)));

	// Start the web server		// Start the web server
	app.listen(port, () => {		app.listen(port, () => {
	console.log(`Control Center is running at http://~~localhost~~:${port}`);		console.log(`Control Center is running at http://0.0.0.0:${port}`);
	});		});


	</pre>		</pre>

Thomas.will: /* Die HTML Datei index.html */

2024-10-30T13:44:02Z

Die HTML Datei index.html

← Nächstältere Version		Version vom 30. Oktober 2024, 13:44 Uhr
Zeile 120:		Zeile 120:
	}		}
	.on {		.on {
	background-color: ~~green~~;		background-color: yellow;
	color: ~~white~~;		color: black;
	}		}
	.off {		.off {
	background-color: ~~red~~;		background-color: gray;
	color: white;		color: white;
	}		}
	.open {		.open {
	background-color: ~~blue~~;		background-color: red;
	color: white;		color: white;
	}		}
Zeile 142:		Zeile 142:
	.then(response => response.json())		.then(response => response.json())
	.then(data => {		.then(data => {
			// Update the class and text for each device
	document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');		document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');
			document.getElementById('livingRoom').textContent = 'Living Room Light: ' + (data.livingRoom === 'on' ? 'On' : 'Off');

	document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');		document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');
			document.getElementById('bedroom').textContent = 'Bedroom Light: ' + (data.bedroom === 'on' ? 'On' : 'Off');

	document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');		document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');
			document.getElementById('kitchen').textContent = 'Kitchen Light: ' + (data.kitchen === 'on' ? 'On' : 'Off');

	document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');		document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');
			document.getElementById('frontDoor').textContent = 'Front Door: ' + (data.frontDoor === 'open' ? 'Open' : 'Closed');
	});		});
	}		}
Zeile 167:		Zeile 175:
	</body>		</body>
	</html>		</html>

Thomas.will am 30. Oktober 2024 um 10:02 Uhr

2024-10-30T10:02:24Z

← Nächstältere Version		Version vom 30. Oktober 2024, 10:02 Uhr
Zeile 4:		Zeile 4:

	==== Neues Verzeichnis für den Steuerungsserver erstellen ====		==== Neues Verzeichnis für den Steuerungsserver erstellen ====
	*~~'''~~mkdir /usr/local/control-switch~~'''~~		*mkdir /usr/local/control-switch
	*~~'''~~cd /usr/local/control-switch~~'''~~		*cd /usr/local/control-switch

	==== Initialisiere das Node.js-Projekt ====		==== Initialisiere das Node.js-Projekt ====
	*~~'''~~npm init -y~~'''~~		*npm init -y

	==== Installiere die benötigten Pakete ====		==== Installiere die benötigten Pakete ====
	*~~'''~~npm install mqtt express~~'''~~		*npm install mqtt express

	==== Konfiguration des Steuerungsservers ====		==== Konfiguration des Steuerungsservers ====

Thomas.will: /* Steuerungsserver starten und beim Booten aktivieren */

2024-10-30T10:01:53Z

Steuerungsserver starten und beim Booten aktivieren

← Nächstältere Version		Version vom 30. Oktober 2024, 10:01 Uhr
Zeile 189:		Zeile 189:

	==== Steuerungsserver starten und beim Booten aktivieren ====		==== Steuerungsserver starten und beim Booten aktivieren ====
	*~~'''~~systemctl start control-switch.service~~'''~~		*systemctl start control-switch.service
	*~~'''~~systemctl enable control-switch.service~~'''~~		*systemctl enable control-switch.service

Thomas.will: /* Steuerung der Geräte über HTTP */

2024-10-30T10:01:32Z

Steuerung der Geräte über HTTP

← Nächstältere Version		Version vom 30. Oktober 2024, 10:01 Uhr
Zeile 191:		Zeile 191:
	*'''systemctl start control-switch.service'''		*'''systemctl start control-switch.service'''
	*'''systemctl enable control-switch.service'''		*'''systemctl enable control-switch.service'''

	~~==== Steuerung der Geräte über HTTP ====~~
	~~Nun können die Geräte über den separaten Server gesteuert werden:~~

	~~- Wohnzimmerlicht einschalten: `http://localhost:3001/toggle/wohnzimmer`~~
	~~- Schlafzimmerlicht einschalten: `http://localhost:3001/toggle/schlafzimmer`~~
	~~- Küchenlicht einschalten: `http://localhost:3001/toggle/kueche`~~
	~~- Haustür öffnen: `http://localhost:3001/toggle/haustuer`~~

	~~Der Server ist für die Steuerung der Geräte per HTTP zuständig und sendet die entsprechenden MQTT-Nachrichten.~~

Thomas.will: /* Die HTML Datei index.html */

2024-10-30T10:00:30Z

Die HTML Datei index.html

← Nächstältere Version		Version vom 30. Oktober 2024, 10:00 Uhr
Zeile 104:		Zeile 104:
	==== Die HTML Datei index.html====		==== Die HTML Datei index.html====
	<pre>		<pre>


	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="de">		<html lang="en">
	<head>		<head>
	<meta charset="UTF-8">		<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>~~Haussteuerung~~</title>		<title>Control Center</title>
	<style>		<style>
	.device {		.device {
Zeile 119:		Zeile 117:
	text-align: center;		text-align: center;
	font-size: 1.5em;		font-size: 1.5em;
			cursor: pointer;
	}		}
	.on {		.on {
Zeile 138:		Zeile 137:
	</style>		</style>
	<script>		<script>
			// Fetch and display the status of devices
	function fetchStatus() {		function fetchStatus() {
	fetch('/status')		fetch('/status')
	.then(response => response.json())		.then(response => response.json())
	.then(data => {		.then(data => {
	document.getElementById('~~wohnzimmer~~').className = 'device ' + (data.~~wohnzimmer~~ === 'on' ? 'on' : 'off');		document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');
	document.getElementById('~~schlafzimmer~~').className = 'device ' + (data.~~schlafzimmer~~ === 'on' ? 'on' : 'off');		document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');
	document.getElementById('~~kueche~~').className = 'device ' + (data.~~kueche~~ === 'on' ? 'on' : 'off');		document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');
	document.getElementById('~~haustuer~~').className = 'device ' + (data.~~haustuer~~ === '~~offen~~' ? 'open' : 'closed');		document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');
	});		});
	}		}

	setInterval(fetchStatus, 1000); ~~// Alle 1 Sekunde den Status abrufen~~		// Toggle a device and update its status
			function toggleDevice(device) {
			fetch(`/toggle/${device}`, { method: 'POST' })
			.then(fetchStatus);
			}

			// Fetch status every second
			setInterval(fetchStatus, 1000);
	</script>		</script>
	</head>		</head>
	<body>		<body>
	<h1>~~Haussteuerung~~</h1>		<h1>Control Center</h1>
	<div id="~~wohnzimmer~~" class="device off">~~Wohnzimmer Licht~~: ~~Aus~~</div>		<div id="livingRoom" class="device off" onclick="toggleDevice('livingRoom')">Living Room Light: Off</div>
	<div id="~~schlafzimmer~~" class="device off">~~Schlafzimmer Licht~~: ~~Aus~~</div>		<div id="bedroom" class="device off" onclick="toggleDevice('bedroom')">Bedroom Light: Off</div>
	<div id="~~kueche~~" class="device off">~~Küchen Licht~~: ~~Aus~~</div>		<div id="kitchen" class="device off" onclick="toggleDevice('kitchen')">Kitchen Light: Off</div>
	<div id="~~haustuer~~" class="device closed">~~Haustür~~: ~~Geschlossen~~</div>		<div id="frontDoor" class="device closed" onclick="toggleDevice('frontDoor')">Front Door: Closed</div>
	</body>		</body>
	</html>		</html>

Thomas.will: /* Konfiguration des Steuerungsservers */

2024-10-30T09:59:50Z

Konfiguration des Steuerungsservers

← Nächstältere Version		Version vom 30. Oktober 2024, 09:59 Uhr
Zeile 17:		Zeile 17:

	<pre>		<pre>

	const mqtt = require('mqtt');		const mqtt = require('mqtt');
	~~const fs = require('fs');~~
	const express = require('express');		const express = require('express');
	const path = require('path');		const path = require('path');
Zeile 25:		Zeile 25:

	let status = {		let status = {
	~~wohnzimmer~~: 'off',		livingRoom: 'off',
	~~schlafzimmer~~: 'off',		bedroom: 'off',
	~~kueche~~: 'off',		kitchen: 'off',
	~~haustuer~~: '~~geschlossen~~'		frontDoor: 'closed'
	};		};

	// MQTT~~-Verbindung herstellen über~~ TLS		// MQTT connection options (without TLS for unencrypted communication)
	const options = {		const options = {
	port: 1883,		port: 1883,
	host: 'mqtt.dkbi.int',		host: 'mqtt.dkbi.int'
	~~//protocol: 'mqtts',~~
	~~//username: 'xinux',~~
	~~//password: 'geheim',~~
	~~//ca: fs.readFileSync('./ca.crt') // Pfad zur ca.crt~~
	};		};

Zeile 44:		Zeile 40:

	client.on('connect', () => {		client.on('connect', () => {
	console.log('~~Verbunden mit dem Broker~~');		console.log('Connected to the MQTT broker');
	client.subscribe('home/+/status', (err) => {		client.subscribe('home/+/status', (err) => {
	if (!err) {		if (!err) {
	console.log('~~Alle Topics abonniert~~');		console.log('Subscribed to all topics');
	}		}
	});		});
Zeile 55:		Zeile 51:
	const room = topic.split('/')[1];		const room = topic.split('/')[1];
	status[room] = message.toString();		status[room] = message.toString();
	console.log(`Status ~~von~~ ${room}: ${status[room]}`);		console.log(`Status of ${room}: ${status[room]}`);
	});		});

	// ~~API-~~Route ~~für den Status der Lichter und Haustür~~		// Route to get the status of the lights and front door
	app.get('/status', (req, res) => {		app.get('/status', (req, res) => {
	res.send(status);		res.send(status);
	});		});

	// ~~Statisches Verzeichnis für die Webseite~~		// Route to toggle a device
			app.post('/toggle/:device', (req, res) => {
			const device = req.params.device;
			const currentStatus = status[device];

			if (!currentStatus) {
			res.status(400).send({ error: 'Invalid device' });
			return;
			}

			// Toggle the status (for front door: closed/open)
			let newStatus;
			if (device === 'frontDoor') {
			newStatus = currentStatus === 'closed' ? 'open' : 'closed';
			} else {
			newStatus = currentStatus === 'on' ? 'off' : 'on';
			}
			status[device] = newStatus;

			// Send MQTT message
			const topic = `home/${device}/status`;
			client.publish(topic, newStatus, (err) => {
			if (err) {
			console.log(`Error sending message to ${device}: ${err.message}`);
			res.status(500).send({ success: false, message: 'Error sending message' });
			} else {
			console.log(`Message sent: ${device} is now ${newStatus}`);
			res.send({ success: true, message: `Device ${device} successfully toggled` });
			}
			});
			});

			// Serve the static directory for the web interface
	app.use(express.static(path.join(__dirname)));		app.use(express.static(path.join(__dirname)));

	// ~~Starte den Webserver~~		// Start the web server
	app.listen(port, () => {		app.listen(port, () => {
	console.log(`~~Webserver läuft auf~~ http://localhost:${port}`);		console.log(`Control Center is running at http://localhost:${port}`);
	});		});


	</pre>		</pre>

Thomas.will: /* Voraussetzungen */

2024-10-30T09:46:55Z

Voraussetzungen

← Nächstältere Version		Version vom 30. Oktober 2024, 09:46 Uhr
Zeile 1:		Zeile 1:
	=== Voraussetzungen ===		=== Voraussetzungen ===
	*[[Voraussetzungen für Node.js-Projekt]]		*[[Voraussetzungen für Node.js-Projekt]]
			*apt install mosquitto-clients

	==== Neues Verzeichnis für den Steuerungsserver erstellen ====		==== Neues Verzeichnis für den Steuerungsserver erstellen ====

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== '''mkdir /usr/local/contr…“

2024-10-30T09:46:18Z

Die Seite wurde neu angelegt: „=== Voraussetzungen === *Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== *'''mkdir /usr/local/contr…“

Neue Seite

=== Voraussetzungen ===
*[[Voraussetzungen für Node.js-Projekt]]

==== Neues Verzeichnis für den Steuerungsserver erstellen ====
*'''mkdir /usr/local/control-switch'''
*'''cd /usr/local/control-switch'''

==== Initialisiere das Node.js-Projekt ====
*'''npm init -y'''

==== Installiere die benötigten Pakete ====
*'''npm install mqtt express'''

==== Konfiguration des Steuerungsservers ====
Erstelle die Datei '''switch-server.js''' im Verzeichnis '''/usr/local/control-switch''' mit folgendem Inhalt:

<pre>
const mqtt = require('mqtt');
const fs = require('fs');
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

let status = {
wohnzimmer: 'off',
schlafzimmer: 'off',
kueche: 'off',
haustuer: 'geschlossen'
};

// MQTT-Verbindung herstellen über TLS
const options = {
port: 1883,
host: 'mqtt.dkbi.int',
//protocol: 'mqtts',
//username: 'xinux',
//password: 'geheim',
//ca: fs.readFileSync('./ca.crt') // Pfad zur ca.crt
};

const client = mqtt.connect(options);

client.on('connect', () => {
console.log('Verbunden mit dem Broker');
client.subscribe('home/+/status', (err) => {
if (!err) {
console.log('Alle Topics abonniert');
}
});
});

client.on('message', (topic, message) => {
const room = topic.split('/')[1];
status[room] = message.toString();
console.log(`Status von ${room}: ${status[room]}`);
});

// API-Route für den Status der Lichter und Haustür
app.get('/status', (req, res) => {
res.send(status);
});

// 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}`);
});

</pre>

==== Die HTML Datei index.html====
<pre>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haussteuerung</title>
<style>
.device {
margin: 20px;
padding: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.5em;
}
.on {
background-color: green;
color: white;
}
.off {
background-color: red;
color: white;
}
.open {
background-color: blue;
color: white;
}
.closed {
background-color: gray;
color: white;
}
</style>
<script>
function fetchStatus() {
fetch('/status')
.then(response => response.json())
.then(data => {
document.getElementById('wohnzimmer').className = 'device ' + (data.wohnzimmer === 'on' ? 'on' : 'off');
document.getElementById('schlafzimmer').className = 'device ' + (data.schlafzimmer === 'on' ? 'on' : 'off');
document.getElementById('kueche').className = 'device ' + (data.kueche === 'on' ? 'on' : 'off');
document.getElementById('haustuer').className = 'device ' + (data.haustuer === 'offen' ? 'open' : 'closed');
});
}

setInterval(fetchStatus, 1000); // Alle 1 Sekunde den Status abrufen
</script>
</head>
<body>
<h1>Haussteuerung</h1>
<div id="wohnzimmer" class="device off">Wohnzimmer Licht: Aus</div>
<div id="schlafzimmer" class="device off">Schlafzimmer Licht: Aus</div>
<div id="kueche" class="device off">Küchen Licht: Aus</div>
<div id="haustuer" class="device closed">Haustür: Geschlossen</div>
</body>
</html>

</pre>

==== systemd-Unit für den Steuerungsserver erstellen ====
Erstelle die Datei '''/etc/systemd/system/control-switch.service''' mit folgendem Inhalt:

<pre>
[Unit]
Description=Home Control Switch Server

[Service]
Type=simple
WorkingDirectory=/usr/local/control-switch
ExecStart=/usr/bin/node server.js
ExecStartPost=/bin/echo "Schalt-Server gestartet"

[Install]
WantedBy=multi-user.target
</pre>

==== Steuerungsserver starten und beim Booten aktivieren ====
*'''systemctl start control-switch.service'''
*'''systemctl enable control-switch.service'''

==== Steuerung der Geräte über HTTP ====
Nun können die Geräte über den separaten Server gesteuert werden:

- Wohnzimmerlicht einschalten: `http://localhost:3001/toggle/wohnzimmer`
- Schlafzimmerlicht einschalten: `http://localhost:3001/toggle/schlafzimmer`
- Küchenlicht einschalten: `http://localhost:3001/toggle/kueche`
- Haustür öffnen: `http://localhost:3001/toggle/haustuer`

Der Server ist für die Steuerung der Geräte per HTTP zuständig und sendet die entsprechenden MQTT-Nachrichten.

MQTT Visualisierte Steuerung Sensor - Versionsgeschichte

Thomas.will am 20. Juni 2026 um 12:24 Uhr

Thomas.will am 4. November 2024 um 14:21 Uhr

Thomas.will: /* Die HTML Datei index.html */

Thomas.will am 30. Oktober 2024 um 10:02 Uhr

Thomas.will: /* Steuerungsserver starten und beim Booten aktivieren */

Thomas.will: /* Steuerung der Geräte über HTTP */

Thomas.will: /* Die HTML Datei index.html */

Thomas.will: /* Konfiguration des Steuerungsservers */

Thomas.will: /* Voraussetzungen */

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === *Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== *'''mkdir /usr/local/contr…“

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== '''mkdir /usr/local/contr…“