Question

我有一个运行有Mosquitto Broker的树莓派，已将其连接到内置了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客户端只能通过WebSocket通过MQTT连接到代理。

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

listener 8083
protocol websockets

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

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

1 个答案: