MQTT Data in HTML panel


#1

Hi,
I’ve been playing around trying to get some mqtt interaction into a panel and was wondering if there is anyone else looking at doing this as well?

My first pass is to use the Paho javascript client, it kind of works but disconnects and reconnects a lot. (still tracking this down).

I would really like a panel plug-in maybe I’ll give it a go when I get some spare time.

Here my attempt, all suggestions/comments are welcome. I just added to following to a text panel as html. (with my details of my broker)

<h1>MQTT</h1>
<div id="mqtt_panel01">
    <div>Topic: <span id="topic01">#</span><span>, Status: </span><span id="status01">#</span></div>
    <button class="btn btn-inverse" type="button" onclick="publish('on','test/grafana/panel/status', 0)">On</button>
    <button class="btn btn-inverse" type="button" onclick="publish('off','test/grafana/panel/status', 0)">Off</button>
    <div><span id="request01">#</span></div>
</div>

<script>
    var mqtt;
    var reconnectTimeout = 5000;
    var host = 'mqtt.example.com';
    var port = 8883;
    var topic = 'test/grafana/panel/status';
    var useTLS = true;
    var username = "user";
    var password = "user1234";
    var cleansession = true;
    var path = "";
    var buttons = $('[type=button]');

    buttons.prop('disabled', true);

    function MQTTconnect() {
        if (typeof path == "undefined") {
            path = '/mqtt';
        }
        mqtt = new Paho.MQTT.Client(
            host,
            port,
            path,
            "web_grafanaPanel" + parseInt(Math.random() * 10000, 10)
        );
        var options = {
            timeout: 3,
            useSSL: useTLS,
            cleanSession: cleansession,
            onSuccess: onConnect,
            onFailure: function (message) {
                $('#status01').html("Connection failed: " + message.errorMessage + "Retrying");
                setTimeout(MQTTconnect, reconnectTimeout);
            }
        };
        mqtt.onConnectionLost = onConnectionLost;
        mqtt.onMessageArrived = onMessageArrived;
        if (username != null) {
            options.userName = username;
            options.password = password;
        }
        // console.log("Host=" + host + ", port=" + port + ", path=" + path + " TLS = " + useTLS + " username=" + username + " password=" + password);
        mqtt.connect(options);
    }

    function onConnect() {
        $('#status01').html('Connected to ' + host + ':' + port + path);
        // Connection succeeded; subscribe to our topic(s)
        mqtt.subscribe(topic, {
            qos: 0
        });
        $('#topic01').html(topic);
        buttons.prop('disabled', false);
    }

    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status01').html("connection lost: " + response.errorMessage + ". Reconnecting");
        buttons.prop('disabled', true);
    };

    function onMessageArrived(message) {
        var topic = message.destinationName;
        var payload = message.payloadString;
        $('#request01').html(payload);
    };

    var publish = function (payload, topic, qos) {
        // console.log('Sending: ' + JSON.stringify(payload));
        var message = new Paho.MQTT.Message(payload);
        message.destinationName = topic;
        message.qos = qos;
        mqtt.send(message);
    }

    if (typeof Paho === 'undefined') {
        var script = document.createElement('script');
        document.body.appendChild(script);
        script.onload = function () {
            MQTTconnect();
        }
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js';
    } else {
       MQTTconnect();
    }
</script>

Regards,