首页 >> js开发 >> jsuniapp,微信小程序中使用 MQTT的问题js大全
jsuniapp,微信小程序中使用 MQTT的问题js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
最近在uniapp打包成微信小程序的项目中第一次用到了MQTT。使用比较简单，但是还是遇到了一些问题。在此记录一下。官方文档：MQTT GithubMQTT Github官方MQTT测试工具：MQTTX。测试工具使用说明MQTTX测试工具使用说明MQTT的js文件：mqtt.min.jsmqtt.min.js先上一点注意事项：（1）MQTT.js 一个 MQTT 协议的客户端库，用 JavaScript 编写，可用于 Node.js 和浏览器。在 Node.js 端可以通过全局安装使用命令行连接，同时还支持 MQTT ，MQTT TLS 证书连接；值得一提的是 MQTT.js 还对微信小程序有较好的支持。（2）MQTT可以通过三种方式连接，TCP直连, TLS和WebSocket，但是JavaScript使用 TCP 只能通过 ws 即 Websocket 链接。所以如果服务器是TCP直连，客户端是肯定连不上的，会报 Error in connection establishment 的错误。所以客户端协议只能是ws，wss，wxs（微信）（3）WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。作为一种通信协议，其使用 ws(非加密)、wss(SSL 加密) 作为协议标识。MQTT.js 客户端支持多种协议，连接地址需指明协议类型；（4）ws: 未加密的 WebSocket 连接，一般使用8083端口。wss: 加密的 WebSocket 连接，一般使用8084端口。mqtt: 未加密的 TCP 连接，一般使用1883端口。mqtts: 加密 TCP 连接。贴一下代码：
import $mqtt from './mqtt.min.js';
const mqttOptions = {
keepalive: 30,
clean: false,
connectTimeout: 5000, // Timeout
clientId: uni.getStorageSync('clientId'),
// username: 'test',
// password: 'test',
}
const connectUrl = `${mqttHost}:${mqttPort}/mqtt`;
// #ifdef H5
var client = $mqtt.connect('wss://' + connectUrl, mqttOptions);
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
// #endif
client.on('connect', () => {
console.log('connect')
// 这是为了给自己发条消息，其它无作用
client.subscribe('test', (err) => {
if (!err) {
client.publish('test', '{}')
}
})
});
// 自动重连
client.on('reconnect', (msg) => {
console.log('reconnect', msg)
});
// 错误
client.on('error', () => {
console.log('error')
});
// 断开
client.on('end', () => {
console.log('end')
});
// 掉线
client.on('offline', (msg) => {
console.log('offline',msg)
});
// 收到消息
client.on('message', (topic, message) => {
// 把arrayBuffer转成字符串
let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局发送消息
uni.$emit('sendTopicMsg',encodedString);
console.log(encodedString)
})
// 全局监听是否有关闭mqtt的消息的事件
uni.$on('closeMqtt',() => {
client.end(true); // 主动断开连接
})
import $mqtt from './mqtt.min.js';
const mqttOptions = {
keepalive: 30,
clean: false,
connectTimeout: 5000, // Timeout
clientId: uni.getStorageSync('clientId'),
// username: 'test',
// password: 'test',
}
const connectUrl = `${mqttHost}:${mqttPort}/mqtt`;
// #ifdef H5
var client = $mqtt.connect('wss://' + connectUrl, mqttOptions);
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
// #endif
client.on('connect', () => {
console.log('connect')
// 这是为了给自己发条消息，其它无作用
client.subscribe('test', (err) => {
if (!err) {
client.publish('test', '{}')
}
})
});
// 自动重连
client.on('reconnect', (msg) => {
console.log('reconnect', msg)
});
// 错误
client.on('error', () => {
console.log('error')
});
// 断开
client.on('end', () => {
console.log('end')
});
// 掉线
client.on('offline', (msg) => {
console.log('offline',msg)
});
// 收到消息
client.on('message', (topic, message) => {
// 把arrayBuffer转成字符串
let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局发送消息
uni.$emit('sendTopicMsg',encodedString);
console.log(encodedString)
})
// 全局监听是否有关闭mqtt的消息的事件
uni.$on('closeMqtt',() => {
client.end(true); // 主动断开连接
})说明：（1） 配置项里的 keepAlive 指的是心跳时间。以秒为单位。定义服务端从客户端接收到消息的最大间隔时间。可以设置为0，表示客户端一直不断开，除非主动断开。（2） clean 设置为false，是为了让客户端掉线的时候，服务器必须在客户端断开之后继续存储/保持客户端的订阅状态。即当为true的时候，如果掉线了，服务端会清理链接状态的数据和内容。当为false的时候，服务端会保存消息发送期间，链接断开导致发送失败的消息。这样连上的时候就会自动推送到订阅的客户端。（3） 如果连接需要验证用户名和密码，则需要加上username和password字段。（4） 微信小程序使用的协议，如果不是加密的，则是 wss，如果是加密的，就是 wxs。web端，一般不加密就是 wx，加密就是wss。（5） 前端收到的消息是 arrayBuffer 格式的，需要转成字符串格式，如果带有中文，可能转成字符串会乱码。可以使用let decodeString = decodeURIComponent(escape((encodedString))) 来避免中文乱码。或者是网上通过移位转成中文的方法来解决。（6） clientId 是使用Math.random().toString(36).substr(3,自定义长度) 来生成自定义长度的的唯一id。应该是免费的测试MQTT消息的链接：o(∩_∩)o
协议
地址
端口
路径
证书
mqtt
broker.hivemq.com
8000
无
无
mqtt
broker.emqx.io
1883
无
无
ws
test.mosquitto.org
8080
/mqtt
无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
协议
地址
端口
路径
证书
mqtt
broker.hivemq.com
8000
无
无
mqtt
broker.emqx.io
1883
无
无
ws
test.mosquitto.org
8080
/mqtt
无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
协议
地址
端口
路径
证书
协议地址端口路径证书
mqtt
broker.hivemq.com
8000
无
无
mqttbroker.hivemq.com8000无无
mqtt
broker.emqx.io
1883
无
无
mqttbroker.emqx.io1883无无
ws
test.mosquitto.org
8080
/mqtt
无
wstest.mosquitto.org8080/mqtt无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
wsstest.mosquitto.org8081/mqttCA signed server（1） CA signed server 这个直接在MQTTX测试工具里面 选择 SSL/TLS 勾选为true时即可选择。（2） 测试的时候，先填好内容，然后链接上的时候，再添加一个订阅，Topic就填一会你需要发送消息的Topic，这样当你模拟服务器发送消息的时候，MQTTX里面也会收到你刚才发送的内容，这样就是连通了。开发过程中遇到的问题：（1）如果出现failed: Connection closed before receiving a handshake response这个错误。说明 服务端的 mqtt 协议和客户端的协议不一样，就比如python用的是基于 tcp 的 mqtt ，js是基于websocket 的 mqtt，都不能达成握手的操作。出现这个的问题应该是：服务端使用了1883这个端口，而客户端也是用这个端口，就导致这个问题。正确的应该是：客户端（js）应该使用8083端口（未加密）。（2） 最初我设置心跳时间是3秒，在微信开发者工具，或者H5端的时候，是没有问题的。但是在小程序真机调试里，当小程序切换到后台，差不多5s就会自动断开，然后一直重连，直到切换回小程序，重连成功。而且有时候还会连续断开和重连。自动断网这个原因，小程序官网做了说明的：超过5s断网说明在第二条 网络请求 - 使用限制里面就说明了，小程序的机制，限制了切换到后台之后网络的处理。所以把心跳时间改为30s，让 mqtt 30秒之后再自动重连。但是这样只是为了让体验稍微好一点，不会出现切换出去5s就断开链接，再切回来一直提示重连的问题。不过可以把心跳时间改为0，表示一直连接不断开。超过5s断网说明总结：总结：总结：（1）以上对mqtt的了解也只是一知半解，还没弄明白这里的心跳时间，和 TCP/IP 的心跳机制是不是一样的。超过心跳时间，能不能让客户端不掉线，或者有没有更好的解决离线的办法。（2）而且还有很多特性都没用到，比如will遗愿标志，专门用来处理客户端断开连接的配置项。（3）由于这个项目都是用的Qos0的消息，都不知道与Qos1，Qos2的区别是什么。
import $mqtt from './mqtt.min.js';
const mqttOptions = {
keepalive: 30,
clean: false,
connectTimeout: 5000, // Timeout
clientId: uni.getStorageSync('clientId'),
// username: 'test',
// password: 'test',
}
const connectUrl = `${mqttHost}:${mqttPort}/mqtt`;
// #ifdef H5
var client = $mqtt.connect('wss://' + connectUrl, mqttOptions);
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
// #endif
client.on('connect', () => {
console.log('connect')
// 这是为了给自己发条消息，其它无作用
client.subscribe('test', (err) => {
if (!err) {
client.publish('test', '{}')
}
})
});
// 自动重连
client.on('reconnect', (msg) => {
console.log('reconnect', msg)
});
// 错误
client.on('error', () => {
console.log('error')
});
// 断开
client.on('end', () => {
console.log('end')
});
// 掉线
client.on('offline', (msg) => {
console.log('offline',msg)
});
// 收到消息
client.on('message', (topic, message) => {
// 把arrayBuffer转成字符串
let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局发送消息
uni.$emit('sendTopicMsg',encodedString);
console.log(encodedString)
})
// 全局监听是否有关闭mqtt的消息的事件
uni.$on('closeMqtt',() => {
client.end(true); // 主动断开连接
})
import $mqtt from './mqtt.min.js';
const mqttOptions = {
keepalive: 30,
clean: false,
connectTimeout: 5000, // Timeout
clientId: uni.getStorageSync('clientId'),
// username: 'test',
// password: 'test',
}
const connectUrl = `${mqttHost}:${mqttPort}/mqtt`;
// #ifdef H5
var client = $mqtt.connect('wss://' + connectUrl, mqttOptions);
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
var client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
// #endif
client.on('connect', () => {
console.log('connect')
// 这是为了给自己发条消息，其它无作用
client.subscribe('test', (err) => {
if (!err) {
client.publish('test', '{}')
}
})
});
// 自动重连
client.on('reconnect', (msg) => {
console.log('reconnect', msg)
});
// 错误
client.on('error', () => {
console.log('error')
});
// 断开
client.on('end', () => {
console.log('end')
});
// 掉线
client.on('offline', (msg) => {
console.log('offline',msg)
});
// 收到消息
client.on('message', (topic, message) => {
// 把arrayBuffer转成字符串
let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));// 全局发送消息
uni.$emit('sendTopicMsg',encodedString);
console.log(encodedString)
})
// 全局监听是否有关闭mqtt的消息的事件
uni.$on('closeMqtt',() => {
client.end(true); // 主动断开连接
})说明：（1） 配置项里的 keepAlive 指的是心跳时间。以秒为单位。定义服务端从客户端接收到消息的最大间隔时间。可以设置为0，表示客户端一直不断开，除非主动断开。（2） clean 设置为false，是为了让客户端掉线的时候，服务器必须在客户端断开之后继续存储/保持客户端的订阅状态。即当为true的时候，如果掉线了，服务端会清理链接状态的数据和内容。当为false的时候，服务端会保存消息发送期间，链接断开导致发送失败的消息。这样连上的时候就会自动推送到订阅的客户端。（3） 如果连接需要验证用户名和密码，则需要加上username和password字段。（4） 微信小程序使用的协议，如果不是加密的，则是 wss，如果是加密的，就是 wxs。web端，一般不加密就是 wx，加密就是wss。（5） 前端收到的消息是 arrayBuffer 格式的，需要转成字符串格式，如果带有中文，可能转成字符串会乱码。可以使用let decodeString = decodeURIComponent(escape((encodedString))) 来避免中文乱码。或者是网上通过移位转成中文的方法来解决。（6） clientId 是使用Math.random().toString(36).substr(3,自定义长度) 来生成自定义长度的的唯一id。应该是免费的测试MQTT消息的链接：o(∩_∩)o
协议
地址
端口
路径
证书
mqtt
broker.hivemq.com
8000
无
无
mqtt
broker.emqx.io
1883
无
无
ws
test.mosquitto.org
8080
/mqtt
无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
协议
地址
端口
路径
证书
mqtt
broker.hivemq.com
8000
无
无
mqtt
broker.emqx.io
1883
无
无
ws
test.mosquitto.org
8080
/mqtt
无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
协议
地址
端口
路径
证书
协议地址端口路径证书
mqtt
broker.hivemq.com
8000
无
无
mqttbroker.hivemq.com8000无无
mqtt
broker.emqx.io
1883
无
无
mqttbroker.emqx.io1883无无
ws
test.mosquitto.org
8080
/mqtt
无
wstest.mosquitto.org8080/mqtt无
wss
test.mosquitto.org
8081
/mqtt
CA signed server
wsstest.mosquitto.org8081/mqttCA signed server（1） CA signed server 这个直接在MQTTX测试工具里面 选择 SSL/TLS 勾选为true时即可选择。（2） 测试的时候，先填好内容，然后链接上的时候，再添加一个订阅，Topic就填一会你需要发送消息的Topic，这样当你模拟服务器发送消息的时候，MQTTX里面也会收到你刚才发送的内容，这样就是连通了。开发过程中遇到的问题：（1）如果出现failed: Connection closed before receiving a handshake response这个错误。说明 服务端的 mqtt 协议和客户端的协议不一样，就比如python用的是基于 tcp 的 mqtt ，js是基于websocket 的 mqtt，都不能达成握手的操作。出现这个的问题应该是：服务端使用了1883这个端口，而客户端也是用这个端口，就导致这个问题。正确的应该是：客户端（js）应该使用8083端口（未加密）。（2） 最初我设置心跳时间是3秒，在微信开发者工具，或者H5端的时候，是没有问题的。但是在小程序真机调试里，当小程序切换到后台，差不多5s就会自动断开，然后一直重连，直到切换回小程序，重连成功。而且有时候还会连续断开和重连。自动断网这个原因，小程序官网做了说明的：超过5s断网说明在第二条 网络请求 - 使用限制里面就说明了，小程序的机制，限制了切换到后台之后网络的处理。所以把心跳时间改为30s，让 mqtt 30秒之后再自动重连。但是这样只是为了让体验稍微好一点，不会出现切换出去5s就断开链接，再切回来一直提示重连的问题。不过可以把心跳时间改为0，表示一直连接不断开。超过5s断网说明总结：总结：总结：（1）以上对mqtt的了解也只是一知半解，还没弄明白这里的心跳时间，和 TCP/IP 的心跳机制是不是一样的。超过心跳时间，能不能让客户端不掉线，或者有没有更好的解决离线的办法。（2）而且还有很多特性都没用到，比如will遗愿标志，专门用来处理客户端断开连接的配置项。（3）由于这个项目都是用的Qos0的消息，都不知道与Qos1，Qos2的区别是什么。
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
