• Aufbau
• Binding zwischen JS und HTML mit Vue
• MQTT starten

Prinzipiell kann die Programmlogik mit oder ohne Hilfsmittel, wie jquery oder vue.js entwickelt werden. Diese Bibliotheken - und viele ähnlich gelagerte Vertreter - machen das Programmieren nicht nur schneller, sondern bringen ganz neue Möglichkeiten, wie ein dynamisches Seitenverhalten, mit ein.

Die nachfolgenden Schritte setzen also auf jquery und vue.js auf.

Das Gerüst in der main.js ist eine anonyme und automatisch startende Funktion, sobald die Seite geladen wird. Hierin folgt also direkt das Ausführen von JavaScript Befehlen sowie die Deklaration der Funktionen.

$(function () {
  // Put program logic and declarations here.
});

Nun kann man in der main.js die Fuktion startView platzieren. Aber vergiss nicht diese auch auszuführen.

function startVue() {
    vue = new Vue({
        el: "#vue-app",
        data: {
            lastUpdate: new Date(),
            products: null 
        },
        methods: {
        },
        updated: function () {
        }
    });
}

Damit man dynamische Inhalte mit Vue.js anzeigen kann, braucht man ein HTML Element und ein Vue Objekt. Das angebundene HTML Element muss alles umschließen, worauf das Vue-Objekt Einfluss haben soll. Lege in der index.html einfach ein neues div Element an und vergib ein id Attribut, damit man im JavaScript darauf zugreifen kann.

<div id="vue-app">
  <table> ... </table>
  <!-- other dynamic vue content -->
</div>

Jetzt kann man im HTML Baum auf alle Objekte zugreifen, die in dem vue Objekt unter data existieren und auch Funktionen ausführen, die in methods deklariert wurden. Dazu bietet vue.js mehrere Möglichkeiten, die man in der offiziellen Dokumentation nachlesen kann. Am einfachsten ist es mit zwei geschweiften Klammern direkt auf die Objekte von data zuzugreifen, zum Beispiel so:

<div>Last message received: {{ lastUpdate }}</div>

Damit man beim Start der Seite auch eine Verbindung zum MQTT Broker herstellen kann, muss die nachfolgende Funktion in die main.js eingefügt werden. Ihr Ablauf besteht aus drei Teilen:

• Client erzeugen - dabei die Zugangsdaten und die Client-ID übergeben
• Events anbinden, wenn die Verbindung verloren wurde oder Nachrichten empfangen wurden
• Die Verbindung herstellen und die Rückmeldung verarbeiten.

Das Event onMessageArrived wird für alle Nachrichten ausgelöst, die über die registrierten Topics verschickt werden. Im Beispiel ist das nur ein Topic m40/aidc/products. Innerhalb der Event Methode kann man erkennen, dass man die Zeichenkette der Nachricht erst in ein JavaScript Objekt umwandeln muss und dann direkt das vue Objekt aktualisieren kann.

function startMqtt() {
    // create client instance
    client = new Paho.MQTT.Client("broker.hivemq.com", 8000, "aidc-web-" + getRandomInt(9999));

    // set callback handlers
    client.onConnectionLost = function() {
        showErrorToast('Mqtt connection lost');
    };
    client.onMessageArrived = function(message) {
        var data = JSON.parse(message.payloadString);
        vue.products = data;
        vue.lastUpdate = new Date(); 
    };
       
    // connect the client
    client.connect({
        cleanSession: true,
        onSuccess: function () {
            client.subscribe("m40/aidc/products");
            showSuccessToast( 'Mqtt connected');
        },
        onFailure: function () {
            showErrorToast('Mqtt connection failed');
        }
    });
}

Im Idealfall sollte die Demo jetzt funktionieren, wenn die Daten zum Zeitpunkt der geöffneten Webseite über MQTT verschickt werden und das Binding an das HTML richtig umgesetzt wurde.

Ich hoffe es hat Spaß gemacht! 🤓