Question

我有一个简单的页面，该页面应该既可以发布连接的消息，也可以订阅我的MQTT服务器上的主题。

我尝试过更改我认为与之相关的所有内容，并且尝试过各种示例，但似乎都没有。

<html>

   <head>
      <title>JavaScript MQTT WebSocket Example</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript">
     </script>
     <script type = "text/javascript" language = "javascript">
        var mqtt;
        var reconnectTimeout = 2000;
        var host="1.2.3.4"; //change this
        var port=9001;
            var lastMsg;

        function onFailure(message) {
            console.log("Connection Attempt to Host "+host+"Failed");
            setTimeout(MQTTconnect, reconnectTimeout);
        }
        function onMessageArrived(msg){
            out_msg="Message received "+msg.payloadString+"<br>";
            out_msg=out_msg+"Message received Topic "+msg.destinationName;
            console.log(out_msg);

        }

        function onConnect() {
      // Once a connection has been made, make a subscription and send a message.

        console.log("Connected ");
        mqtt.subscribe("ApolloTemp/");
        message = new Paho.MQTT.Message("Hello World 2");
        message.destinationName = "ApolloTemp";
        mqtt.send(message);
      }


      function MQTTconnect() {
        console.log("connecting to "+ host +" "+ port);
        mqtt = new Paho.MQTT.Client(host,port,"clientjs");
        document.write("connecting to "+ host);
        var options = {
            timeout: 3,
            onSuccess: onConnect,
            onFailure: onFailure,
            userName : "user1",
            password : "password"
             };
        mqtt.onMessageArrived = onMessageArrived

        mqtt.connect(options); //connect
        }

      </script>
   </head>
     <body>
   <h1>Main Body</h1>
    <script>
    MQTTconnect();

    </script>
 <div id=submsg></div>
   </body>  
</html>

网页应显示已发布的消息。但是，该网页仅声明“正在连接到1.2.3.4”

当我加载页面时，Mosquitto日志显示以下内容：

1547164811: New client connected from 2.2.2.2 as clientjs (c1, k60, u'user1').
1547164840: Socket error on client clientjs, disconnecting.

Answer 1

我终于明白了。

<html>

   <head>
      <title>JavaScript MQTT WebSocket Example</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript">
     </script>
     <script type = "text/javascript" language = "javascript">
        var mqtt;
        var reconnectTimeout = 2000;
        var host="1.2.3.4"; //change this
        var port=9001;
        var lastMsg;

        function onFailure(message) {
            console.log("Connection Attempt to Host "+host+"Failed");
            setTimeout(MQTTconnect, reconnectTimeout);
        }
        function onMessageArrived(msg){
            out_msg="Message received "+msg.payloadString+"<br>";
            out_msg=out_msg+"Message received Topic "+msg.destinationName;
            console.log(out_msg);
            document.write(msg.payloadString);
        }

        function onConnect() {
      // Once a connection has been made, make a subscription and send a message.

        console.log("Connected ");
        document.write("connected to "+ host);
        mqtt.subscribe("ApolloTemp");
        message = new Paho.MQTT.Message("Client Connected Sucessfully");
        message.destinationName = "ApolloTemp";
        mqtt.send(message);
      }

      function MQTTconnect() {
        console.log("connecting to "+ host +" "+ port);
        mqtt = new Paho.MQTT.Client(host,port,"clientjs");
        document.write("connecting to "+ host);
        var options = {
            timeout: 3,
            userName : "user1",
            password : "password",
            onSuccess: onConnect,
            onFailure: onFailure,
             };
        mqtt.onMessageArrived = onMessageArrived;
        mqtt.connect(options); //connect
        }

      </script>
   </head>
     <body>
   <h1>Main Body</h1>
    <script>
    MQTTconnect();
    </script>

   </body>  
</html>

Answer 2

不是，问题是我的原始代码没有将有效负载写入页面，而只是将其写入控制台。解决方案是添加document.write（msg.payloadString）;到“消息到达”部分。

Paho MQTT JS客户端发布，但不会订阅

2 个答案: