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 学习技巧
Feb 17 Javascript
XENON基于JSON变种
Jul 27 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
JS实现简单抖动效果
Jun 01 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
php通过各种函数判断0和空
2020/07/04 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
人事聘任通知
2015/04/21 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Python实现拼音转换
2021/06/07 Python