uniapp,微信小程序中使用 MQTT的问题


Posted in Javascript onJuly 11, 2020

最近在uniapp打包成微信小程序的项目中第一次用到了MQTT。使用比较简单,但是还是遇到了一些问题。在此记录一下。

官方文档:MQTT Github

官方MQTT测试工具:MQTTX。测试工具使用说明

MQTT的js文件:mqtt.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); // 主动断开连接
})

说明:

(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

(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,表示一直连接不断开。

总结:

(1)以上对mqtt的了解也只是一知半解,还没弄明白这里的心跳时间,和 TCP/IP 的心跳机制是不是一样的。超过心跳时间,能不能让客户端不掉线,或者有没有更好的解决离线的办法。

(2)而且还有很多特性都没用到,比如will遗愿标志,专门用来处理客户端断开连接的配置项。

(3)由于这个项目都是用的Qos0的消息,都不知道与Qos1,Qos2的区别是什么。

到此这篇关于uniapp,微信小程序中使用 MQTT的文章就介绍到这了,更多相关微信小程序MQTT内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
VSCode 配置uni-app的方法
Jul 11 #Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 #Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 #Javascript
详解JavaScript匿名函数和闭包
Jul 10 #Javascript
Vue watch响应数据实现方法解析
Jul 10 #Javascript
详解Vue之事件处理
Jul 10 #Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
You might like
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
广告显示判断
2006/08/31 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
介绍一下grep命令的使用
2012/06/28 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
机关单位动员会主持词
2014/03/20 职场文书
政风行风建设责任书
2014/07/23 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
《秋思》教学反思
2016/02/23 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS