小程序连接MQTT服务器，以及配置，避坑

1、MQTT服务器域名配置

由于小程序必须使用域名方式连接socket，所以必须为MQTT服务器配置域名，并配置SSL证书。

1.1相关文档：

EMQX 企业版安装 | EMQX 企业版 4.4 文档

EMQX MQTT 微信小程序接入 | EMQX 4.2 文档

MQTT 下载引入和配置连接 | ESP32全栈应用开发文档 (icce.top)

1.2实现方法：

①宝塔面板新建网站：mqtt.yh***.com ，申请免费证书，然后配置SSL。

②网站配置修改，在配置文件中添加以下内容：

注意：端口选择8083/8084等，参考：配置说明 | EMQX 企业版 4.4 文档

 # 添加反向代理location /mqtt {proxy_pass http://127.0.0.1:8084/mqtt;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# client_max_body_size 35m;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";    }

2、小程序编写

引入mqtt.min.js文件，MQTT 下载引入和配置连接 | ESP32全栈应用开发文档 (icce.top)

<template><view></view>
</template><script>import mqtt from "../js/mqtt.min";let client = null; // MQTT服务export default {data() {return {data:{address:'mqtt.yh**.com',//输入自己的mqtt域名地址port:8084,//端口，上方网站配置一致username:'taskone',//mqtt账号password:'Ch199410'//mqtt密码}}},onReady() {this.connectMqtt()},methods: {//连接mqtt服务器connectMqtt() {let that = this;const options = {connectTimeout: 4000,client_id:'umqtt_client',address: this.data.address, // 输入的连接地址port: this.data.port, // 输入的端口号username: this.data.username, // 输入的用户名password: this.data.password, // 输入的密码};console.log("address是：", options.address);client = mqtt.connect("wxs://" + options.address+'/mqtt', options); // 连接方法client.on("connect", error => {console.log("连接成功");// 可以在这里写一些连接成功的逻辑});client.on("reconnect", error => {console.log("正在重连：", error);wx.showToast({ icon: "none", title: "正在重连", });});client.on("error", error => {console.log("连接失败：", error);wx.showToast({ icon: "none", title: "MQTT连接失败", });});}}}
</script><style></style>

运行显示MQTT连接成功：