title: WebSocket connection establishment error from browser
body: <p>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:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Mosquitto Websockets&lt;/title&gt;
      {% load staticfiles %}
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="{% static 'js/mqttws31-min.js' %}" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/jquery.min.js' %}" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="{% static 'js/config.js' %}" type="text/javasacript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      var mqtt;
      var reconnectTimeout = 2000;
  
      function MQTTconnect() {
          host = '127.0.0.1';
          port = 1883;
          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('&lt;li&gt;' + topic + ' = ' + payload + '&lt;/li&gt;');
      };
  
  
      $(document).ready(function() {
          MQTTconnect();
      });
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Mosquitto Websockets&lt;/h1&gt;
      &lt;div&gt;
          &lt;div&gt;Subscribed to &lt;input type='text' id='topic' disabled /&gt;
          Status: &lt;input type='text' id='status' size="80" disabled /&gt;&lt;/div&gt;
  
          &lt;ul id='ws' style="font-family: 'Courier New', Courier, monospace;"&gt;&lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get </p>
  
  <pre><code>WebSocket connection to 'ws://127.0.0.1:1883/mqtt' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET   mqttws31-min.js:15
  Host=127.0.0.1, port=1883 TLS = false username=null password=null   (index):47
  </code></pre>
  
  <p>I am new to this so am unable to resolve this. Any help?</p>
  
  <p>Edit1:
  I tweaked the config file and now it successfully connects to test.mosquitto.org:8080. I subscribed to #, but it is unable to retrieve the published message. I think function <code>onMessageArrived(message)</code> is not working. There are no errors in the console so unable to identify any errors.</p>
  
  <p><img src="https://i.stack.imgur.com/fOmMo.png" alt="enter image description here"></p>