無法使用Javascript連接到localhost Mosquitto Broker？

Question

我有一個運行有Mosquitto Broker的樹莓派pi，該pi已連接到內置了MQTT協議的傳感器模塊。 如果在終端中使用此代碼，則可以訂閱並查看數據。

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

在HTML / Javascript中使用websocket方法時，無法建立連接。 我不確定100％需要指定哪個端口，我已經看到大多數使用端口1883的帖子，但這似乎不起作用。 在終端中，不需要端口。

在終端中運行時，這是可行的，我想通過Web應用程序執行相同的任務。

我的mosquitto.conf看起來像這樣：

    # 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

我正在連接到我們的網頁http://192.168.1.40:5000/

在Web瀏覽器控制台中，我可以看到連接請求正在超時。

       <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>

我期望連接成功並且MQTT有效負載數據。 我對MQTT相當陌生。

Answer 1

正如我在評論中所說，默認情況下，mosquitto不會默認通過WebSockets偵聽器配置MQTT。

Paho MQTT JavaScript客戶端只能通過WebSockets上的MQTT連接到代理。

要在您需要添加以下到mosquitto.conf文件的WebSockets添加MQTT（或在一個文件/etc/mosquitto/conf.d ）

listener 8083
protocol websockets

然后，您需要確保客戶端連接到端口8083