• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] MQTT Werte extrahieren

M

MQTT

Mitglied
Halllo, ich bin blutiger Anfänger im Bereich html.
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 leider nicht hin: Die MQTT Werte auf der eigentlichen Webseite darzustellen, ich weiß nicht wie ich diese zu packen kriege.

(Wenn Schritt 2 klappt, will ich mich dann um ein Design kümmern)

Wäre nett wenn ihr mir zeigt wie ich "client.subscribe("VLT")" ins html kriege.

HTML: 
<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>MQTT Test</title>

    <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>

MfG
 
Werbung:
Hi,
als Beispiel mal ein Stück Code von mir.
HTML:
HTML: 
<p class= "opt001"><font color="yellow"><u>aktive Einstellungen:</u></font></p>
<p class= "opt001" id="act_001"></p>
<p class= "opt002" id="act_002"></p>
<p class= "opt002" id="act_003"></p>
und javascript dazu:
Code: 
function getItems() {
    const
    titel= document.getElementById("act_001"),
    wert1= document.getElementById("act_002"),
    wert2= document.getElementById("act_003");

titel.innerHTML =    'Thermostat aktiv ';
        wert1.innerHTML =    'ein bei ' + value1 + '&deg;' + 'C';
        wert2.innerHTML =    'aus bei ' + value2 + '&deg;' + 'C';
    
}
Du gibst also Deinem Payload eine Variable und bekommst sie wie im Beispiel auf die Webseite.
Bei den freien Zeilen im js-Code hatte ich eine IF-Abrfage gelöscht.
Die Funktion "getItems" starte ich mit Aufruf der Webseite.
Sieht bei mir so aus:
HTML: 
    <script>     
        getName();
        getIP();
        getVersion();
        getItems();
        getOpt();
    </script>
</body>
</html>
Der obere js-Code "function getItems()" steckt bei mir in einer externen Datei, Du kannst ihn natürlich auch in den Scrpit- Bereich der Webseite tun.
-c-
 
Ich möchte noch klarstellen, daß die Variablen value1 und value2 die Veränderlichen sind, das andere daneben ist nur Beiwerk. Die °C haben zuweilen so ein dänisches A dabei, deshalb eine Umschreibung für das "°".

Da Du in der Console ja Dein payload siehst, käme also noch
var value1 = "VLT";
dazu. Falls VLT eine Variable ist: ohne Anführungszeichen.
 
Werbung:
ich habe es geschafft ein paar Werte darzustellen :smile:
Frage zum Code:

Hiermit hole ich mir die o.g. Werte:
HTML: 
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");
            client.subscribe("Hz");
            client.subscribe("Pth");
            client.subscribe("AT");
            client.subscribe("RT");
            client.subscribe("P");
            client.subscribe("PV");

        }

hiermit weise ich sie "id"s zu:

HTML: 
]        // called when a message arrives

        function onMessageArrived(message) {
            console.log("Beschreibung: " + message.destinationName);
            console.log("Nachricht: " + message.payloadString);
            const topic = message.destinationName;
            if (topic == "VLT") {
                document.getElementById("VLT").innerHTML = message.payloadString;
            }
            if (topic == "RLT") {
                document.getElementById("RLT").innerHTML = message.payloadString;
            }
            if (topic == "Hz") {
                document.getElementById("Hz").innerHTML = message.payloadString;
            }
            if (topic == "Pth") {
                document.getElementById("Pth").innerHTML = message.payloadString;
            }
            if (topic == "AT") {
                document.getElementById("AT").innerHTML = message.payloadString;
            }
            if (topic == "RT") {
                document.getElementById("RT").innerHTML = message.payloadString;
            }
            if (topic == "P") {
                document.getElementById("P").innerHTML = message.payloadString;
            }
            if (topic == "PV") {
                document.getElementById("PV").innerHTML = message.payloadString;
            }

geht das eleganter oder ist das der Weg?

hatte versucht alles in ein Json Objekt zu packen, also {"VLT":23.5,"RLT":20.1, ... ...} - aber kriege es dann nicht mehr zugewiesen mit:
document.getElementById("VLT").innerHTML = message.payloadString.VLT ?!
(so könnte ich mir die ganzen ifs sparen)

MfG
 
Yep, das geht auch ohne JSON und ohne die ganzen ifs:
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;
    }
 
PS: JSON geht natürlich auch, damit kannst Du die Anzahl der Nachrichten reduzieren. Du musst aber zunächst den JSON-String parsen:
Code: 
        // called when a message arrives

        function onMessageArrived(message) {

            console.log("Beschreibung: " + message.destinationName);

            console.log("Nachricht: " + message.payloadString);

            const msgParsed = JSON.parse(message.payloadString);
            for (key in msgParsed) {
                document.getElementById(key).innerHTML = msgParsed[key];
            }
        }
(ungetestet)
 
Werbung:
Kannst Du mir mal schildern wie Du MQTT-Nachrichten im Browser empfängst?

Ich mache viel mit MQTT, lasse die Nachrichten aber von Mikroprozessoren über WLAN auf 'deren' Webseite anzeigen.
Diese Nachrichten sind kein MQTT mehr.
Mein Codeschnipsel kam auch aus dem Bereich.
-c-
 
Natürlich.
Code: 
<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 = 'Browser_' + 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("topic1");
            client.subscribe("topic2");
        }

        // 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);
            const topic = message.destinationName;
            document.getElementById(topic).innerHTML = message.payloadString;
        }
    </script>

Leider kann man das nur im Intranet verwenden, da der MQTT Broker vom Browser abgefragt wird.

Oder würdest du deinen MQTT Broker ins Internet stellen?
Dann kann jeder auf der Welt dich mit MQTT Nachrichten voll spamen / Mosquitto vielleicht sogar zum abstürzen bringen o.ä.
 
Zuletzt bearbeitet:
Werbung:
MQTT schrieb:
<script type="text/javascript" language="javascript">
Zum Vergrößern anklicken....
Diese Zeile ist veraltet, braucht nur <script> dastehen hab ich heute gelernt. Ich hatte das bisher auch so.

Tja, mein MQTT bewegt sich auch nur im eigenen WLAN, das ist kein Problem.
Aber wie ich das sehe, wird von "cdnjs.cloudflare.com" ein script geladen, also geht es nicht ohne Internet. Das ist schade. Evtl. kann man sich das Script ja runterladen?
MQTT schrieb:
Oder würdest du deinen MQTT Broker ins Internet stellen?
Zum Vergrößern anklicken....
Wie gesagt, ist nicht mein Ding.
Aber mein Broker ist mit Zugangsdaten abgesichert, da sehe ich kein Problem. Hab mich aber mit "weltweit" auch nicht beschäftigt.

Mich interessiert, wie die MQTT-Befehle aufgebaut sind. Das läßt sich zwar auf das Byte genau nachlesen, aber es muß ja bei jedem Befehl auch der Zugangscode (oder -schlüssel?) dabeisein. Dazu hab ich noch nichts gefunden.

Ich würde nämlich gerne versuchen mein Excel zu einem Clienten zu machen. Da finden sich in dem von Dir genutzten Script evtl. Hinweise.

Na, heute ist Feierabend. Ich sehe mir "cdnjs.cloudflare.com" morgen mal an.

Vielen Dank für die Info!
-c-
 
Du kannst /paho-mqtt/1.0.1/mqttws31.min.js doch einfach runterladen und in deinen Ordner packen, zumindest habe ich das so verstanden beim Webseiten Bau.

MQTT Websocket läuft ohne Benutzername/Passwort bei mir, sonst müsste das ja eh im script als Klartext drin stehen -> sinnlos.
oder?
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben