小程序连接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 文档

1. # 添加反向代理,重点！解决android无法连接mqtt问题
2.     location /mqtt {
3.       proxy_pass http://127.0.0.1:8083/mqtt;
4.       proxy_set_header Host $host;
5.       proxy_set_header X-Real-IP $remote_addr;
6.       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
7.       # client_max_body_size 35m;
8.       proxy_http_version 1.1;
9.       proxy_set_header Upgrade $http_upgrade;
10.       proxy_set_header Connection "upgrade";   
11.     }

复制代码

2、小程序编写

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

1. <template>
2.         <view>
3.                 <view class="btn-box status" style="width: 100%;">
4.                         <u-button size="medium" :type="status==0?'default':'success'" @click="send" :loading="!linked">
5.                         {{status==0?'运行设备':'暂停设备'}}</u-button>
6.                 </view>
7.         </view>
8. </template>
10. <script>
11.         import mqtt from "../js/mqtt.min";
12.         let client = null; // MQTT服务
13.         export default {
14.                 data() {
15.                         return {
16.                                 loading:false,
17.                                 status:0,//设备状态,0关闭，1运行
18.                                 options: {
19.                                       protocolVersion: 4, //MQTT连接协议版本
20.                                       clientId: 'miniTest',
21.                                       clean: false,
22.                                       password: 'Ch199410',
23.                                       username: 'taskone',
24.                                       reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
25.                                       connectTimeout: 3 * 1000, //1000毫秒，两次重新连接之间的间隔
26.                                       resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
27.                                 },
28.                                 topic:"BlueLED",//发布主题
29.                                 linked:false,//是否连接
30.                         }
31.                 },
32.                 onReady() {
33.                         this.connectMqtt()
34.                 },
35.                 destroyed() {
36.                         client?.end(true, error => {});
37.                         client = null;
38.                 },
39.                 methods: {
40.                         //连接mqtt服务器
41.                         connectMqtt() {
42.                           let that = this;
43.                           client = mqtt.connect("wxs://mqtt.yh**.com/mqtt", this.options); // 连接方法
44.                           client.on("connect", error => {
45.                             console.log("连接成功");
46.                             // 可以在这里写一些连接成功的逻辑
47.                                 that.linked  = true
48.                                 that.bindSubscribe()
49.                           });
50.                           client.on("reconnect", error => {
51.                             console.log("正在重连：", error);
52.                             wx.showToast({ icon: "none", title: "正在重连", });
53.                           });
54.                           client.on("error", error => {
55.                             console.log("连接失败：", error);
56.                             wx.showToast({ icon: "none", title: "MQTT连接失败", });
57.                           });
58.                           client.on("message", (topic, message) => {
59.                             console.log(topic,message)
60.                           });
61.                         },
62.                         //订阅主题
63.                         bindSubscribe(){
64.                                 // 订阅一个主题
65.                                 client.subscribe(this.topic, { qos: 0 }, function (err) {
66.                                   if (!err) {
67.                                     console.log("成功");
68.                                     wx.showToast({ icon: "none", title: "添加成功" });
69.                                     // 可以在这里写一些订阅主题成功的逻辑
70.                                   }
71.                                 });
72.                         },
73.                         //发送消息
74.                         pushMsg(msg){
75.                                 let that = this
76.                                 client.publish(this.topic, msg, { qos: 0 }, err => {
77.                                   if (!err) {
78.                                           that.status = that.status==0?1:0
79.                                     console.log("topic:", "想要发送消息的Topic变量", "成功发出消息", msg);
80.                                   }
81.                                 });
82.                         },
83.                         send(){
84.                                 this.pushMsg(this.status==0?'on':'off')
85.                         }
86.                 }
87.         }
88. </script>
90. <style lang="less" scoped>
91. .btn-box{
92.         width: 100%;
93.         text-align: center;
94.         padding:50rpx 0;
95. }
96. </style>

复制代码

运行表现MQTT连接成功： 

3、小程序连接MQTT问题

真机运行可能会遇到问题，小程序连接MQTT问题和方法。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。