10.01.2024, 15:06
Halllo, ich bin absoluter Anfänger im Bereich Webseiten vorab.
Ich habe viele umfangreiche Node-Red Dashboards und möchte gern einiges davon auf einer eigenen Webseite darstellen.
Schritt 1 habe ich geschafft: Zwei MQTT Live Werte kriege ich in der Browser Konsole angezeigt.
Schritt 2 kriege ich nicht hin: Die MQTT Werte auf der eigentlichen Webseite darzustellen
(Wenn Schritt 2 klappt, will ich mich dann um ein Design kümmern, z.B. ein Bild meiner Wärmepumpe und dort dann Textfelder dran tüddeln mit den Live Werten usw.)
Wäre nett wenn ihr mir zeigt wie ich "client.subscribe("VLT")" in html kriege.
Mein bisheriger Code:
Sollte man den ganzen script Teil besser in eine 2. Datei auslagern anstatt im "head" ?
MfG
Ich habe viele umfangreiche Node-Red Dashboards und möchte gern einiges davon auf einer eigenen Webseite darstellen.
Schritt 1 habe ich geschafft: Zwei MQTT Live Werte kriege ich in der Browser Konsole angezeigt.
Schritt 2 kriege ich nicht hin: Die MQTT Werte auf der eigentlichen Webseite darzustellen
(Wenn Schritt 2 klappt, will ich mich dann um ein Design kümmern, z.B. ein Bild meiner Wärmepumpe und dort dann Textfelder dran tüddeln mit den Live Werten usw.)
Wäre nett wenn ihr mir zeigt wie ich "client.subscribe("VLT")" in html kriege.
Mein bisheriger Code:
Code:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>MQTT Test</title>
<meta name="MQTT Versuch" content="MQTT Versucht einzubinden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js"
type="text/javascript"></script>
<script type="text/javascript" language="javascript">
// Create a client instance
const clientId = 'mqttjs_' + Math.random().toString(16).substr(2, 8);
client = new Paho.MQTT.Client("192.168.168.9", Number(9001), clientId);
// set callback handlers
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
// connect the client
client.connect({ onSuccess: onConnect });
// called when the client connects
function onConnect() {
// Once a connection has been made, make a subscription and send a message.
console.log("Verbindung hergestellt");
client.subscribe("VLT");
client.subscribe("RLT");
}
// called when the client loses its connection
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("Verbindung verloren:" + responseObject.errorMessage);
}
}
// called when a message arrives
function onMessageArrived(message) {
console.log("Beschreibung: " + message.destinationName);
console.log("Nachricht: " + message.payloadString);
}
</script>
</head>
<body>
<h1>meine Wärmepumpe</h1>
<p>Livewert VLT: </p>
<p>Livewert RLT: </p>
</body>
</html>Sollte man den ganzen script Teil besser in eine 2. Datei auslagern anstatt im "head" ?
MfG