+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: MQTT Werte extrahieren (/showthread.php?tid=2720)
MQTT Werte extrahieren - Anfänger - 10.01.2024
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:
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
RE: MQTT Werte extrahieren - Sempervivum - 10.01.2024
Haben dir die Hinweise von colaholiker auf html.de nicht geholfen?
Ich verstehe die Sache so, dass Du Nachrichten bekommst, die in onMessageArrived auflaufen. Und die willst Du in den p-Elementen anzeigen?
In dem Fall würde ich in den p-Elementen je ein span einfügen mit einer ID, die gleich dem Wert ist, den Du in message.destinationName bekommst.
Und dann die Werte dort eintragen:
Code:
// called when a message arrives
function onMessageArrived(message) {
console.log("Beschreibung: " + message.destinationName);
console.log("Nachricht: " + message.payloadString);
document.querySelector('#' + messages.destinationName).textContent = message.payloadString;
}RE: MQTT Werte extrahieren - Anfänger - 13.01.2024
Danke, ja hatte ich, sieht so aus:
Code:
// called when a message arrives
function onMessageArrived(message) {
//console.log("Beschreibung: " + message.destinationName);
//console.log("Nachricht: " + message.payloadString);
const topic = message.destinationName;
document.getElementById(topic).innerHTML = message.payloadString;