微信小程序连接MQTT_微信小程序 mqtt

什么是MQTT

MQTT是一种轻量级通信协议，基于TCP/IP，采用发布-订阅模式，广泛应用于物联网领域。

MQTT的工作原理围绕着三个核心部分：发布者（Publishers）、代理（Broker，也称服务器）和订阅者（Subscribers）。发布者负责发送消息到特定的主题（Topic），代理则接收这些消息并将其转发给所有订阅了该主题的订阅者。这种模式允许设备间异步通信，且设备不需要直接了解彼此的存在，从而降低了系统的复杂性。

微信小程序连接MQTT

下面将以uniapp为例，介绍微信小程序如何连接mqtt

1.前期准备

微信小程序安全要求比较高，与后台服务器之间的通讯必须使用https/wss协议。如果还没有配置mqtt服务器，这里可以使用EMQX的免费公共MQTT服务器进行测试。

微信小程序还需配置socket合法域名，但是该域名还还没有进行ICP备案，这里配置不了，所以需要在微信开发工具中勾选【不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书】。

如果已经有MQTT服务器，并且进行了ICP备案的，则不需要勾选【不校验合法域名、web-view(业务域名)、TLS版本以及 HTTPS 证书】，直接按照下图在微信公众平台进行配置即可，配置完成之后需要等待一会才能生效。

2示例

（1）引入mqtt

uniapp可以使用的mqtt.js版本有v4.1.0 和 v2.18.8等

v4.1.0：https://unpkg.com/mqtt@4.1.0/dist/mqtt.min.js

v2.18.8：https://unpkg.com/mqtt@2.18.8/dist/mqtt.min.js

在项目根目录下新建utils文件夹，将下载好的对应版本的mqtt.min.js文件放入该文件夹中，然后通过如下方式引入mqtt

import mqtt from \"../../utils/mqtt.min.js\"

（2）建立连接

data() { return { client: null, connectBtnText: \"连接\", host: \"broker.emqx.io\", port: 8084, clientId: new Date().getTime(), subTopic: \"testtopic/miniprogram\",// 订阅主题 pubTopic: \"testtopic/miniprogram\",// 发布主题 pubMsg: \"Hello!MQTT!\",// 要发送的信息 receivedMsg: \"\",// 接收到的信息 mqttOptions: { // username: \"test\",// 用户名 // password: \"test\",// 密码 reconnectPeriod: 1000, // 1000毫秒，设置为 0 禁用自动重连，两次重新连接之间的间隔时间 connectTimeout: 30 * 1000, // 30秒，连接超时时间 } }},methods: { connectMqtt() { try { this.connectBtnText = \"连接中...\" // 微信小程序中需要将wss协议写为wxs this.client = mqtt.connect(`wxs://${this.host}:${this.port}/mqtt`, { ...this.mqttOptions, clientId: this.clientId }) // 监听连接成功 this.client.on(\"connect\", () => { uni.showToast({  title: \"连接成功\",  icon: \"none\" }) this.connectBtnText = \"连接成功\" // 监听收到的信息 this.client.on(\"message\", (topic, payload) => {  uni.showToast({ title: `收到消息 - Topic: ${topic}，Payload: ${payload}`, icon: \"none\"  });  const currMsg = this.receivedMsg ? `
${payload}` : payload;  this.receivedMsg = this.receivedMsg.concat(currMsg) });// 监听错误 this.client.on(\"error\", (error) => {  this.connectBtnText = \"连接\"  console.log(\"onError\", error); }); this.client.on(\"close\", () => {  this.connectBtnText = \"连接\"  console.log(\"close\"); }); this.client.on(\"offline\", () => {  this.connectBtnText = \"连接\"  console.log(\"offline\"); }); // mqtt.js会自动断线重连 this.client.on(\"reconnect\", () => {  this.connectBtnText = \"连接\"  console.log(\"reconnecting...\"); }); }) } catch (err) { console.log(err) this.connectBtnText = \"连接\" } }}

（3）断开连接

disconnectMqtt() { if(this.client.connected) { this.client.end(true) this.client = null this.connectBtnText = \"连接\" uni.showToast({ title: \"成功断开连接\", icon: \"none\" }) return } uni.showToast({ title: `请先点击连接`, icon: \"none\" })}

（4）订阅主题

subscribe() { if(this.client) { this.client.subscribe(this.subTopic, {qos: 2}, (err) => { if(!err) { uni.showToast({  title: `成功订阅主题：${this.subTopic}`,  icon: \"none\" }) } }) return } uni.showToast({ title: `请先点击连接`, icon: \"none\" })}

（5）取消订阅

unsubscribe() { if(this.client) { this.client.unsubscribe(this.subTopic, (err) => { if(!err) { uni.showToast({  title: `成功取消订阅主题：${this.subTopic}`,  icon: \"none\" }) } }) return } uni.showToast({ title: `请先点击连接`, icon: \"none\" })}

（6）发布

publish() { if(this.client) { this.client.publish(this.pubTopic, this.pubMsg, {qos: 2}, (err) => { if(!err) { console.log(\"发布信息成功\",this.pubTopic, this.pubMsg) } }) return } uni.showToast({ title: `请先点击连接`, icon: \"none\" })}

3.注意点

（1）微信小程序中需要将wss协议写为wxs

（2）如果连接使用的clientId是重复的话，会互相顶掉线

（3）消息级别：QoS 0 最多交付一次；QoS 1 至少交付一次；QoS 2 只交付一次；

（4）testtopic/#：指testtopic的任意子主题；testtopic/miniprogram：testtopic的miniprogram主题

（5）如果订阅和发布是同一个主题，那么发布信息的同时，也会接收到该信息。因此可以将订阅和发布定为不同的主题或采取其他方式进行识别

（6）如果连接公司的mqtt服务器出现问题的话，可以使用EMQX的免费公共MQTT服务器进行测试。有时候可能是服务器没有配置好，才导致连接不上

MQTT测试工具

可以使用MQTTX软件进行测试

参考链接

https://www.emqx.com/zh/blog/how-to-use-mqtt-in-wechat-miniprogram?utm_source=mqttx&utm_medium=referral&utm_campaign=mqttx-help-to-blog