Html5使用MQTT

2020/07 01 11:07

Html5使用MQTT

测试工具:
MQTTLens,MQTTBox

测试服务地址:

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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/' 开头的。

另外一种写法
1
2
3
4
5
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等参数

1
2
3
4
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 传送门

预览.png

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

--转载请注明: http://91o.cc/html5%e4%bd%bf%e7%94%a8mqtt/