在web前端上使用MQTT

前言

原理很简单，利用mosca创建好MQTT服务器后，然后通过websocket就能使用了。如果没有搭建服务器请参考下面这篇文章
利用nodejs快速搭建mqtt服务器
因为都用的是nodejs，所以我们可以将web服务器和mqtt服务器写在一个文件下，但是要设置不同的端口避免发生冲突。所以这就是，物联网使用nodejs的好处。

Demo

1.在之前创建好的服务器下添加如下代码（其实就是设置一下http端口）

  var mosca = require("mosca");
  var server = new mosca.Server({
  http: {
    port: 3000,
    bundle: true,
    static: './'
  }
});

服务器.png

2.客户端调用(官方案例)

<html>
  <head>
 <script src="/mqtt.js"></script>
  </head>
  <body>
    <script>
      var client = mqtt.connect();

      client.subscribe("mqtt/demo");

      client.on("message", function(topic, payload) {
        alert([topic, payload].join(": "));
        client.end();
      });

      client.publish("mqtt/demo", "hello world!");
    </script>
  </body>
</html>

客户端demo.png

解释：因为我的mqtt服务器是搭建在本地的所以我的ip应该为127.0.0.1；且在服务器中设置的端口为7410，所以再调用js文件时，应该如上图所示。

在测试自己是否调用成功的话，可以将链接复制到浏览器上，如果链接是正确的则会出现如下图所示。

调用mqtt.js.png

总结：通过web前端对mqtt的调用大大方便了一些简单事件的处理，比如实时显示温湿度，控制led的开关等不需要存储数据的事件。

附：官方链接 https://github.com/mcollina/mosca/wiki/MQTT-over-Websockets