Html5使用MQTT

测试工具：
MQTTLens，MQTTBox

测试服务地址：

1. mosquitto
mqtt://test.mosquitto.org
ws://test.mosquitto.org:8080/mqtt (没连上)
测试页面：http://test.mosquitto.org/ws.html

2. eclipse
tcp://iot.eclipse.org
ws://iot.eclipse.org:80/ws

MQTT Client 比较多，各种语言都有开源项目，基本都是基于TCP/IP的，如Java/OC/Swift/nodejs/C/C++等。

H5上的js也可以使用MQTT，只不过是基于WebSocket，用法和其他语言的有一点点区别。

MQTT.js 是一个开源项目，支持nodejs和Browser js ，这里对比一下nodejs和Browser js的用法：

注：nodejs是运行在webserver的js，Browser js意思是运行在浏览器上的js，也就是H5用到的js
注：目前项目方已经提供 CDN，不需要自己打包https://unpkg.com/mqtt/dist/mqtt.min.js

nodejs

var mqtt    = require('mqtt');
var client  = mqtt.connect('mqtt://test.mosquitto.org');

client.on('connect', function () {
  client.subscribe('presence');
  client.publish('presence', 'Hello mqtt');
});

client.on('message', function (topic, message) {
  // message is Buffer
  console.log(message.toString());
  client.end();
});

Browser js

首先要通过webpack 把运行在nodejs上的mqtt.js打包为 browserMqtt.js

<html>
<head>
  <title>test Ws mqtt.js</title>
</head>
<body>
<script src="./browserMqtt.js"></script>
<script>
      var client = mqtt.connect(); // you add a ws:// url here
      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>

MQTT.js的示例只是说明you add a ws:// url here，但是没有给出url的地址，H5上的地址格式有一点点区别，以host=192.168.1.88，port=8083为例：

示例中的写法：

1 2	var client = mqtt.connect('ws://192.168.1.88:8083'); client.subscribe("mqtt/demo");

这种写法subscribe的topic是以 'mqtt/' 开头的。

另外一种写法

var client = mqtt.connect('ws://192.168.1.88:8083/mqtt'); 

'ws://' + 'HOST' + 'PORT' + 'mqtt'

client.subscribe("demo");

注意：这里面有两个关键字ws和mqtt

MQTT的默认端口是1883，几乎是一个标准端口，但是websocket都不太一样，比如：

emqtt， websocket默认的端口是8083。
mosquitto ，websocket默认的端口是9001，但是mosquitto 默认是不开启websocket，你要配置一下，或者安装相关的lib，这要看具体版本而定。Ubuntu mosquitto-1.4.5支持Websocket

设置连接用户名密码

在连接的方法传入参数，类似的还有clientid等参数

var client = mqtt.connect(host,{
username:"hellouser",
password:"hellopasswd"
});

支持微信小程序

Example(js)

1 2	var mqtt = require('mqtt') var client = mqtt.connect('wxs://test.mosquitto.org')

Example(ts)

1 2	import { connect } from 'mqtt'; const client = connect('wxs://test.mosquitto.org');

一个完整的Html5 Client

github 传送门

注：项目更新了很多，文章没有及时更新，建议看https://github.com/mqttjs/MQTT.js/blob/master/README.md