Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
MQTT Werte extrahieren
#1
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
Zitieren
#2
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;
        }
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren
#3
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;
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
3 Gast/Gäste