0

I have mosquitto MQTT broker running on my machine. And I want to run the MQTT client from browser. This is what I have done in a Django app:

<html>
  <head>
    <title>Mosquitto Websockets</title>
    {% load staticfiles %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'js/mqttws31-min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/config.js' %}" type="text/javasacript"></script>
    <script type="text/javascript">
    var mqtt;
    var reconnectTimeout = 2000;

    function MQTTconnect() {
        host = 'test.mosquitto.org';
        port = 8080;
        useTLS = false;
        cleansession = true;
        username = null;
        password = null;
        mqtt = new Paho.MQTT.Client(host, port,
                    "myclientid_" + parseInt(Math.random() * 100, 10));

        /*mqtt = new Messaging.Client(
                        host,
                        port,
                        "web_" + parseInt(Math.random() * 100,
                        10));
        */
        var options = {
            timeout: 3,
            useSSL: useTLS,
            cleanSession: cleansession,
            onSuccess: onConnect,
            onFailure: function (message) {
                $('#status').val("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 + " TLS = " + useTLS + " username=" + username + " password=" + password);
        mqtt.connect(options);
    }

    function onConnect() {
        $('#status').val('Connected to ' + host + ':' + port);
        // Connection succeeded; subscribe to our topic
        mqtt.subscribe(topic, {qos: 0});
        $('#topic').val(topic);
    }

    function onConnectionLost(response) {
        setTimeout(MQTTconnect, reconnectTimeout);
        $('#status').val("connection lost: " + responseObject.errorMessage + ". Reconnecting");

    };

    function onMessageArrived(message) {

        var topic = message.destinationName;
        var payload = message.payloadString;

        $('#ws').prepend('<li>' + topic + ' = ' + payload + '</li>');
    };


    $(document).ready(function() {
        MQTTconnect();
    });

    </script>
  </head>
  <body>
    <h1>Mosquitto Websockets</h1>
    <div>
        <div>Subscribed to <input type='text' id='topic' disabled />
        Status: <input type='text' id='status' size="80" disabled /></div>

        <ul id='ws' style="font-family: 'Courier New', Courier, monospace;"></ul>
    </div>
  </body>

enter image description here It successfully connects to test.mosquitto.org:8080. I subscribed to #, but it is unable to retrieve the published message. I think function onMessageArrived(message) is not working. There are no errors in the console so unable to identify any errors. Any help please?

toothie
  • 1,019
  • 4
  • 20
  • 47
  • Which version of mosquitto are you using? – Younes Mar 16 '15 at 09:27
  • Assuming the config.js at the top contains a global variable called topic with value '#' (to populate the subscribe call) this seams to work fine. I am using the CDN copy of jquery and the full mqttws31.js from paho. – hardillb Mar 16 '15 at 10:25
  • @hardillb Yes topic variable is there. – toothie Mar 16 '15 at 10:36
  • I'm using mosquitto version 1.4 and paho javascript client version 1.0.1. I'm able to connect, subscribe and publish successfully. Have you checked mosquitto logs? – Younes Mar 16 '15 at 10:52
  • @Younes Whats the use of looking into mosquitto log? I am connected to an online broker? Also, is ur javascript similar to mine or u have done something differently? – toothie Mar 16 '15 at 11:04
  • @Younes could u please tell where the logs are located? – toothie Mar 16 '15 at 11:06
  • @toothie sorry, I didn't notice that you are using a server that you are not controlling. For your question about the client, I'm using Paho version 1.0.1. The file is named 'mqttws31.js' as what you have. However, I'm not sure whether it is about the same version. For your secodn question, the logs should be available as configured in mosquitto.config file. There you can specify, for instance, to log to '/var/log/mosquitto.log' (for linux based installation). – Younes Mar 16 '15 at 13:47
  • @toothie for your info, I'm able to connect, subscribe and publish successfully to `test.mosquitto.org:8080`. The client I'm using is from [Eclipse](http://download.eclipse.org/paho/1.0/paho.javascript-1.0.1.zip). I have followed the [example](http://www.eclipse.org/paho/clients/js/) on the same site. – Younes Mar 16 '15 at 13:56
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/73080/discussion-between-toothie-and-younes). – toothie Mar 16 '15 at 14:34
  • There is a working example at http://test.mosquitto.org/sys/ , just to demonstrate that it does work. – ralight Mar 17 '15 at 08:59
  • @ralight test.mosquitto.org is working, no doubt about that. Its my program thats not working – toothie Mar 18 '15 at 02:11

0 Answers0