Web应用程序的MQTT

Question

I was trying to develop a simple web application using the MQTT Broker. 我试图使用MQTT Broker开发一个简单的Web应用程序。 I used Mosca as the broker on localhost. 我使用Mosca作为本地主机上的代理。 First I tried out a program copied from the web to see how MQTT works. 首先，我尝试了一个从Web复制的程序，以了解MQTT的工作方式。 This is the program. 这是程序。

home.html 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 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);
  }

This program worked when I tried to access home.html in te web browser. 当我尝试在Web浏览器中访问home.html时，此程序有效。 I could see the log being generated in Mosca's console too. 我也可以看到Mosca控制台中正在生成日志。 However, as visible, this program wasn't a very neat example. 但是，可以看出，该程序并不是一个很好的例子。 For that reason I tried to make a few changes to make the code readable. 因此，我尝试进行一些更改以使代码可读。

This is my code after I made the changes - 这是我进行更改后的代码-

home.html 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 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,

  };

I have got a Python script running which publishes value. 我已经运行了一个发布价值的Python脚本。 However, no output is being generated. 但是，没有生成任何输出。 I checked the Mosca console and noted that no new connections were made. 我检查了Mosca控制台并注意到没有建立新连接。 I have just started learning Javascript. 我刚刚开始学习Javascript。 I am not sure if my new code is syntactically correct. 我不确定我的新代码在语法上是否正确。

Answer 1

Couple changes will fix this. 几个更改将解决此问题。

First, you have onFailure = instead of onFailure: 首先，您拥有onFailure =而不是onFailure:

Next, you want to set your client.onMessageArrived and client.onConnectionLost before you call connect, not after. 接下来，您要在调用connect之前而不是之后设置client.onMessageArrived和client.onConnectionLost 。

Those 2 changes result in 这两个变化导致

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

  };

Web应用程序的MQTT

问题描述

1 个解决方案

解决方案1
0 2016-05-11 14:15:51

Web应用程序的MQTT

问题描述

1 个解决方案

解决方案1 0 2016-05-11 14:15:51

解决方案1
0 2016-05-11 14:15:51