uniapp小程序接入Mqtt

Dans Roh2023-07-212025-03-27

前要

文章说明：
本文用于介绍MQTT相关概念，并且教你如何在uniapp小程序项目中使用MQTT，以及使用过程中的一些坑的解决方法。

在uniapp小程序中使用MQTT

在微信小程序中使用 MQTT，一般可以通过引入 MQTT 客户端库来实现。这个库可以在小程序中使用 WebSocket 协议连接 MQTT 服务器，并支持订阅和发布消息。

微信小程序相关配置

在微信公众平台-小程序–开发管理里面配置socket合法域名

tips: 由于微信小程序安全要求比较高，在与后台服务器之间的通讯必须使用 https/wss 协议。
下载对应版本的MQTT库
原生微信小程序 MQTT.js 可用版本有 v4.2.1、v4.2.0、v4.1.0 和 v2.18.8
使用 uniapp 框架搭建微信小程序 MQTT.js 可用版本有 v4.1.0 和 v2.18.8
MQTT v4.2.0下载链接
在项目根目录下新建 utils 文件夹，将下载好的对应版本的 mqtt.min.js 文件放入该文件夹中，在 index.js 中通过如下方式引入 mqtt
import mqtt from "../../utils/mqtt.min.js";

使用MQTT

说明：
clientId为MQTT连接客户端id，尽量不要重复，不然会出现后一个连接顶掉前一个连接的情况
topic表示主题，使用client.subscribe(topic, callback)
client.connected是客户端连接是否成功的状态

何时能收到消息？
当你连接到服务器，订阅完topic01主题，此时如果有设备发布消息到MQTT服务器，那么服务器就会推送消息到每个订阅了topic01主题的客户端，在onmessage的回掉函数中获取

如何发送消息？
使用client.publish()来发送消息

import mqtt from "../../utils/mqtt.min.js";
const options = {
  clientId: this.userInfo.id + Math.random(0, 1),
  protocolVersion: 4, //MQTT连接协议版本
  clean: true, // 重连是否清除之前收到的消息
  reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
  connectTimeout: 60 * 1000, //连接超时时间
  resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
}
// 开始连接
const client = mqtt.connect('wxs://example.com/mqtt', options);

// 监听连接事件，成功之后可执行相应操作，比如订阅主题之类的
client.on('connect', () => {
  console.log('mqtt连接成功');
  sub_one()
})

// 订阅主题（topic）
sub_one() {
  if (client && client.connected) {
    //仅订阅单个主题
    client.subscribe(`water/tdsnow/8848`, function(err, granted) {
      if (!err) {
        console.log('mqtt主题订阅成功');
      } else {
        console.log('mqtt主题订阅失败');
      }
    })
  } else {
    console.log('请先连接服务器');
  }
},

//服务器下发消息的回调
this.client.on("message", (topic, message) => {
  const res = JSON.parse(message)
  console.log(" 收到 topic:" + topic + " , message :" + res)
})

// 发布消息到主题
pub_msg() {
  if (client && client.connected) {
    const message = JSON.stringify({
      tdscmd: 'on'
    });
    client.publish(`topic02`, message);
    console.log('mqtt信息发送成功');
  } else {
    console.log('请先连接服务器');
  }
},

//服务器连接异常的回调
client.on("error", function(error) {
  console.log(" 服务器 error 的回调" + error)

})

//服务器重连连接异常的回调
client.on("reconnect", function() {
  console.log(" 服务器 reconnect的回调")

})

//服务器连接异常的回调
client.on("offline", function(errr) {
  console.log(" 服务器offline的回调")
})import mqtt from "../../utils/mqtt.min.js";
const options = {
  clientId: this.userInfo.id + Math.random(0, 1),
  protocolVersion: 4, //MQTT连接协议版本
  clean: true, // 重连是否清除之前收到的消息
  reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
  connectTimeout: 60 * 1000, //连接超时时间
  resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
}
// 开始连接
const client = mqtt.connect('wxs://example.com/mqtt', options);

// 监听连接事件，成功之后可执行相应操作，比如订阅主题之类的
client.on('connect', () => {
  console.log('mqtt连接成功');
  sub_one()
})

// 订阅主题（topic）
sub_one() {
  if (client && client.connected) {
    //仅订阅单个主题
    client.subscribe(`water/tdsnow/8848`, function(err, granted) {
      if (!err) {
        console.log('mqtt主题订阅成功');
      } else {
        console.log('mqtt主题订阅失败');
      }
    })
  } else {
    console.log('请先连接服务器');
  }
},

//服务器下发消息的回调
this.client.on("message", (topic, message) => {
  const res = JSON.parse(message)
  console.log(" 收到 topic:" + topic + " , message :" + res)
})

// 发布消息到主题
pub_msg() {
  if (client && client.connected) {
    const message = JSON.stringify({
      tdscmd: 'on'
    });
    client.publish(`topic02`, message);
    console.log('mqtt信息发送成功');
  } else {
    console.log('请先连接服务器');
  }
},

//服务器连接异常的回调
client.on("error", function(error) {
  console.log(" 服务器 error 的回调" + error)

})

//服务器重连连接异常的回调
client.on("reconnect", function() {
  console.log(" 服务器 reconnect的回调")

})

//服务器连接异常的回调
client.on("offline", function(errr) {
  console.log(" 服务器offline的回调")
})

使用过程中遇到的一些坑

版本问题

建议使用4.2.0版本

小程序模拟器能建立MQTT连接，但是真机调试无法连接

这个问题当时前端进行了各种手段尝试都存在这个问题，而且这个问题的诡异之处在于，同样的手机型号，同样的微信版本，其中一台能正常连接，另一台连接异常，且没有任何报错
于是就尝试切换网络环境，更换更低或更高的mqttjs协议版本等。发现还是存在这个问题，测试了6台手机，其中三台能正常连接
然后公司的后端大佬终于是在网上找到了一篇相关文章修复了这个问题，连接如下：连接