Question

我正在尝试使用MQTT Broker开发一个简单的Web应用程序。我使用Mosca作为localhost的经纪人。首先，我尝试了从Web复制的程序，以了解MQTT的工作原理。这是该计划。

home.html的

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="mqttws31.js" type="text/javascript"></script>
  <script src="client.js">
    </script>
  </head>
  <body onload="init();">
  </body>
</html>

client.js

var wsbroker = "127.0.0.1";  //mqtt websocket enabled broker
    var wsport = 3000 // port for above
    var client = new Paho.MQTT.Client(wsbroker, wsport,
        "myclientid_" + parseInt(Math.random() * 100, 10));
    client.onConnectionLost = function (responseObject) {
      alert("connection lost: " + responseObject.errorMessage);
    };
    client.onMessageArrived = function (message) {
      alert(message);//.destinationName, ' -- ', message.payloadString);
    };
    var options = {
      timeout: 3,
      onSuccess: function () {
        alert("mqtt connected");
        // Connection succeeded; subscribe to our topic, you can add multile lines of these
        client.subscribe('temp/random', {qos: 1});

        //use the below if you want to publish to a topic on connect
        message = new Paho.MQTT.Message("Hello");
        message.destinationName = "/World";
        client.send(message);

      },
      onFailure: function (message) {
        alert("Connection failed: " + message.errorMessage);
      }
    };
  function init() {
      client.connect(options);
  }

当我尝试在网络浏览器中访问home.html时，此程序有效。我也可以在Mosca的控制台中看到日志。但是，可见，这个程序不是一个非常简洁的例子。出于这个原因，我尝试进行一些更改以使代码可读。

这是我做出更改后的代码 -

home.html的

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="mqttws31.js" type="text/javascript"></script>
  <script src="client.js">
    </script>
  </head>
  <body onload="init();">
  </body>
</html>

client.js

var wsbroker = "127.0.0.1";
var wsport = 3000

var client = new Paho.MQTT.Client(wsbroker, wsport,"myclientid_" + parseInt(Math.random() * 100, 10));

    function onMessageArrived(message) {
        document.write(message.payload);
    };

    function onSuccess() {
        document.write("Connected");
        client.subscribe('temp/random');
    };

    function onFailure(message) {
        document.write("Connection Failed. Error : " + message.errorMessage);
    };

    function onConnectionLost(message) {
        document.write("Connection Lost. Error : " + message.errorMessage);
    };

    var options = {
        timeout: 3,
        onSuccess: onSuccess,
        onFailure = onFailure
    };

  function init() {
      client.connect(options);
      client.onMessageArrived = onMessageArrived,
      client.onConnectionLost = onConnectionLost,

  };

我运行了一个发布值的Python脚本。但是，没有生成输出。我检查了Mosca控制台并注意到没有建立新的连接。我刚开始学习Javascript。我不确定我的新代码在语法上是否正确。

Answer 1

情侣的变化将解决这个问题。

首先，您有onFailure =而不是onFailure:

接下来，您需要在致电连接之前设置client.onMessageArrived和client.onConnectionLost，而不是之后。

这2个更改导致

var wsbroker = "127.0.0.1";
var wsport = 3000

var client = new Paho.MQTT.Client(wsbroker, wsport,"myclientid_" + parseInt(Math.random() * 100, 10));

    function onMessageArrived(message) {
        document.write(message.payload);
    };

    function onSuccess() {
        document.write("Connected");
        client.subscribe('temp/random');
    };

    function onFailure(message) {
        document.write("Connection Failed. Error : " + message.errorMessage);
    };

    function onConnectionLost(message) {
        document.write("Connection Lost. Error : " + message.errorMessage);
    };

    var options = {
        timeout: 3,
        onSuccess: onSuccess,
        onFailure: onFailure,
    };

  function init() {
    console.log('connecting')
      client.onMessageArrived = onMessageArrived,
      client.onConnectionLost = onConnectionLost,
      client.connect(options);

  };

MQTT for Web Application

1 个答案: