WebSocket connection error from browser (Paho Ecllipse javascript mqtt client)

807 views
Skip to first unread message

Acinom

unread,
Mar 16, 2015, 11:43:03 PM3/16/15
to mq...@googlegroups.com
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>


 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?


Reply all
Reply to author
Forward
0 new messages