无法使用 Javascript 连接到 localhost Mosquitto Broker？

Question

我有一个运行 Mosquitto Broker 的树莓派，它连接到内置 MQTT 协议的传感器模块。如果我在终端中使用此代码，我可以订阅并查看我的数据返回。

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

在我的 HTML/Javascript 中使用 websocket 方法时，我无法建立连接。我不是 100% 确定我需要指定哪个端口，我看到大多数帖子使用端口 1883 但这似乎不起作用。在终端中不需要端口。

这在终端中运行时有效，我想通过我的网络应用程序执行相同的任务。

我的 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/

在网络浏览器控制台中，我可以看到连接请求正在超时。

       <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

正如我在 cmets 中所说，默认情况下，mosquitto 不会配置 MQTT over WebSockets 侦听器。

Paho MQTT JavaScript 客户端只能通过 MQTT over WebSockets 连接到代理。

要通过 WebSockets 添加 MQTT，您需要将以下内容添加到 mosquitto.conf 文件（或 /etc/mosquitto/conf.d 中的文件）

listener 8083
protocol websockets

然后您需要确保客户端连接到端口8083