Web应用程序的MQTT

MQTT for Web Application

本文关键字：MQTT 应用程序 Web      更新时间：2023-09-26

我试图使用MQTT Broker开发一个简单的web应用程序。我使用Mosca作为本地主机上的代理。首先，我尝试了从网上复制的一个程序，看看MQTT是如何工作的。这是程序

home。

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

当我试图在web浏览器中访问home.html时，这个程序工作了。我也可以看到在Mosca的控制台中生成的日志。然而，可以看到，这个程序并不是一个非常简洁的例子。出于这个原因，我试着做了一些改变，使代码可读。

这是我修改后的代码-

home。

<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。我不确定我的新代码在语法上是否正确。

修改一下就可以解决这个问题。

首先是onFailure =而不是onFailure:

接下来，您要在调用connect之前设置client.onMessageArrived和client.onConnectionLost，而不是在调用connect之后。

这两个变化导致

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);
  };
相关文章：