Can't connect to localhost Mosquitto Broker wi

Question

I have a raspberry pi with a Mosquitto Broker running on it connected to a sensor module with MQTT Protocol inbuilt. If I use this code in terminal, I can subscribe and see my data coming back.

 mosquitto_sub -h 169.254.118.199 -t Advantech/00D0C9FA9984/data

When using a websocket method in my HTML/Javascript I can't make a connection. I am not 100% sure what port I need to specify, I have seen most posts using port 1883 but this doesn't seem to work. In terminal there is no port required.

This is working when running in the Terminal, I want to perform the same task through my web application.

My mosquitto.conf looks like this:

    # Place your local configuration in /etc/mosquitto/conf.d/
    #
    # A full description of the configuration file is at
    # /usr/share/doc/mosquitto/examples/mosquitto.conf.example

    pid_file /var/run/mosquitto.pid

    persistence true
    persistence_location /var/lib/mosquitto/

    #log_dest file /var/log/mosquitto/mosquitto.log

    log_dest topic


    log_type error

    log_type warning

    log_type notice

    log_type information
    include_dir /etc/mosquitto/conf.d

The webpage i am connecting to us http://192.168.1.40:5000/

In the web browser console, I can see that the connection request is timing out.

       <div class="wrapper">

       <h1>mqtt-demo</h1>

       <form id="connection-information-form">

        <b>Hostname or IP Address:</b> 

        <input id="host" type="text" name="host" value="169.254.118.199"> 
 <br>

        <b>Port:</b>

        <input id="port" type="text" name="port" value="1883"><br>

        <b>Topic:</b>

        <input id="topic" type="text" name="topic" 
 value="Advantech/00D0C9FA9984/data"><br><br>

        <input type="button" onclick="startConnect()" value="Connect">

        <input type="button" onclick="startDisconnect()" 
 value="Disconnect">

     </form>

     <div id="messages"></div>

  </div>

</div>


   <script src="https://cdnjs.cloudflare.com/ajax/libs/paho- 
    mqtt/1.0.1/mqttws31.js" type="text/javascript">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


       <script>


    // Called after form input is processed

    function startConnect() {

   // Generate a random client ID

    clientID = "clientID-" + parseInt(Math.random() * 100);



    // Fetch the hostname/IP address and port number from the form

    host = document.getElementById("host").value;

    port = document.getElementById("port").value;



    // Print output for the user in the messages div

    document.getElementById("messages").innerHTML += '<span>Connecting to: 
    ' + host + ' on port: ' + port + '</span><br/>';

     document.getElementById("messages").innerHTML += '<span>Using the 
    following client value: ' + clientID + '</span><br/>';



    // Initialize new Paho client connection

     client = new Paho.MQTT.Client(host, Number(port), clientID);



    // Set callback handlers

     client.onConnectionLost = onConnectionLost;

     client.onMessageArrived = onMessageArrived;



     // Connect the client, if successful, call onConnect function

     client.connect({ 

       onSuccess: onConnect,

      });

    }



     // Called when the client connects

     function onConnect() {

      // Fetch the MQTT topic from the form

      topic = document.getElementById("topic").value;



     // Print output for the user in the messages div

      document.getElementById("messages").innerHTML += '<span>Subscribing to: ' 
      + topic + '</span><br/>';



// Subscribe to the requested topic

client.subscribe(topic);

 }



  // Called when the client loses its connection

   function onConnectionLost(responseObject) {

    document.getElementById("messages").innerHTML += '<span>ERROR: 
    Connection lost</span><br/>';

       if (responseObject.errorCode !== 0) {

       document.getElementById("messages").innerHTML += '<span>ERROR: ' + 
       + responseObject.errorMessage + '</span><br/>';

      }

      }



    // Called when a message arrives

    function onMessageArrived(message) {

    console.log("onMessageArrived: " + message.payloadString);

    document.getElementById("messages").innerHTML += '<span>Topic: ' + 
     message.destinationName + '  | ' + message.payloadString + '</span> 
     <br/>';

     }



       // Called when the disconnection button is pressed

      function startDisconnect() {

       client.disconnect();

        document.getElementById("messages").innerHTML += 
        '<span>Disconnected</span><br/>';

       }

      </script> 

        </head>

        <head>

         <meta http-equiv="refresh" content="450">

            </head>

         </html>

I expect a successful connection and the MQTT payload data. I am fairly new to MQTT.

Answer 1

As I said in the comments by default mosquitto does not configure a MQTT over WebSockets listener by default.

The Paho MQTT JavaScript client can only connect to a broker via MQTT over WebSockets.

To add a MQTT over WebSockets you need to add the following to the mosquitto.conf file (or to a file in /etc/mosquitto/conf.d)

listener 8083
protocol websockets

You would then need to make sure the client is connecting to port 8083