mqtt-dash/mqtt_dash/static/main.js

// Called after form input is processed
function startConnect() {
    if (connecting) {
        return;
    }
    connecting = true;
    // Generate a random client ID
    clientId = navigator.userAgent + "-" + parseInt(Math.random() * 1000000);
    document.getElementById("wrapper").classList.add("wrapper-error");
    document.getElementById("wrapper").classList.remove("wrapper-ok");

    // Print output for the user in the messages div
    log('Connecting to: ' + window.brokerUri + ', client ID: ' + clientId);

    // Initialize new Paho client connection
    client = new Paho.MQTT.Client(window.brokerUri, clientId=clientId);

    // Set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // Connect the client, if successful, call onConnect function
    client.connect({
        onSuccess: onConnect,
        timeout: 2
    });

    connectionCheckTimeout = setTimeout(checkConnection, 2000);
    showConnectionModal();
}

function log(msg) {
    console.log(msg);
    document.getElementById("messages").innerHTML += '<span>' + msg + '</span><br/>';
}

function checkConnection(){
    clearTimeout(connectionCheckTimeout);
    if (!client.isConnected()) {
        connecting = false;
        //log("Error connecting to broker");
        startConnect();
    }
}

// Called when the client connects
function onConnect() {
    connecting = false;
    clearTimeout(connectionCheckTimeout);
    hideConnectionModal();
    document.getElementById("wrapper").classList.remove("wrapper-error");
    document.getElementById("wrapper").classList.add("wrapper-ok");
    var subWidgets = document.getElementsByClassName("subscriber");
    var topics = new Set()
    for (var i = 0; i < subWidgets.length; i++) {
        var c = subWidgets.item(i);
        var topic = c.getAttribute('data-sub-topic');
        topics.add(topic);
        c.classList.add('widget-unset');
    }
    for (let topic of topics)
    {
        client.subscribe(topic);
    }
    // Subscribe to the requested topic
}

// Called when the client loses its connection
function onConnectionLost(responseObject) {
    document.getElementById("wrapper").classList.remove("wrapper-ok");
    document.getElementById("wrapper").classList.add("wrapper-error");
    if (responseObject.errorCode !== 0) {
        console.log("onConnectionLost: " + responseObject.errorMessage);
    }
    startConnect();
}

function getByPath(obj, path) {
    var current=obj;
    path.split('.').forEach(function(p){ current = current[p]; });
    return current;
}

// Called when a message arrives
function onMessageArrived(message) {
    var views = document.getElementsByClassName(message.destinationName + "-value");
    for (var i = 0 ; i < views.length; i++) {
        var view = views.item(i);
        if (view.classList.contains("update-policy-replace-content")) {
            view.innerHTML = message.payloadString;
        } else if(view.classList.contains("update-policy-append-content")) {
            view.innerHTML += message.payloadString + "<br/>";
            view.scrollTop = view.scrollHeight;
        }  else if(view.classList.contains("update-policy-add-row")) {
            var now = (new Date()).toLocaleTimeString();
            view.innerHTML = "<tr><td>"+ now + "</td><td>" +message.payloadString + "</td></tr>" + view.innerHTML;
        } else if(view.classList.contains("update-policy-update-value")) {
            jsonPath = view.getAttribute('data-value-path');
            if (jsonPath) {
                view.value = getByPath(JSON.parse(message.payloadString),
                                       jsonPath);
            } else {
                view.value = message.payloadString;
            }
            view.onchange();
        }
    }

    var widgets = document.querySelectorAll("[data-sub-topic='" + message.destinationName + "']");
    for (var i = 0 ; i < widgets.length; i++) {
        widgets.item(i).classList.remove("widget-unset");
    }

}

// Called when the disconnection button is pressed
function startDisconnect() {
    client.disconnect();
    document.getElementById("messages").innerHTML += '<span>Disconnected</span><br/>';
    updateScroll(); // Scroll to bottom of window
}

// Updates #messages div to auto-scroll
function updateScroll() {
    var element = document.getElementById("messages");
    element.scrollTop = element.scrollHeight;
}

function publish(topic, value) {
    var message = new Paho.MQTT.Message(value);
    message.destinationName = topic;
    client.send(message);
}

function updateContents(id, value) {
    elem = document.getElementById(id);
    elem.innerHTML = value;
}

function init(brokerUri) {
    window.brokerUri = brokerUri
    connecting = false;
    startConnect();
    var sliders = document.getElementsByClassName("slider");

    for (var i = 0 ; i < sliders.length; i++) {
        var slider = sliders.item(i);
        slider.onchange = function() {
            document.getElementById(this.id + "-textual").innerHTML =
                this.value;
        };
        slider.oninput = function() {
            this.onchange()
            var topic = this.getAttribute('data-pub-topic');
            publish(topic, this.value);
        };
    }

    var logDeletes = document.getElementsByClassName("log-delete");

    for (var i = 0 ; i < logDeletes.length; i++) {
        var elem = logDeletes.item(i);
        elem.onclick = function() {
            console.log(this.id);
            table = document.getElementById(this.id + "-content");
            console.log(table.id);
            table.innerHTML = "";
        };
    }


}



function showConnectionModal() {
    var modal = document.getElementById("connection-modal");
    modal.classList.add("is-active");
}

function hideConnectionModal() {
    var modal = document.getElementById("connection-modal");
    modal.classList.remove("is-active");
}