小程序连接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 文档https://i-blog.csdnimg.cn/direct/d8806db678764fea8d30e8827855990f.png
# 添加反向代理,重点！解决android无法连接mqtt问题
location /mqtt {
proxy_pass http://127.0.0.1:8083/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 class="btn-box status" style="width: 100%;">
<u-button size="medium" :type="status==0?'default':'success'" @click="send" :loading="!linked">
{{status==0?'运行设备':'暂停设备'}}</u-button>
</view>
</view>
</template>
<script>
import mqtt from "../js/mqtt.min";
let client = null; // MQTT服务
export default {
data() {
return {
loading:false,
status:0,//设备状态,0关闭，1运行
options: {
protocolVersion: 4, //MQTT连接协议版本
clientId: 'miniTest',
clean: false,
password: 'Ch199410',
username: 'taskone',
reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
connectTimeout: 3 * 1000, //1000毫秒，两次重新连接之间的间隔
resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
},
topic:"BlueLED",//发布主题
linked:false,//是否连接
}
},
onReady() {
this.connectMqtt()
},
destroyed() {
client?.end(true, error => {});
client = null;
},
methods: {
//连接mqtt服务器
connectMqtt() {
let that = this;
client = mqtt.connect("wxs://mqtt.yh**.com/mqtt", this.options); // 连接方法
client.on("connect", error => {
console.log("连接成功");
// 可以在这里写一些连接成功的逻辑
that.linked= true
that.bindSubscribe()
});
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连接失败", });
});
client.on("message", (topic, message) => {
console.log(topic,message)
});
},
//订阅主题
bindSubscribe(){
// 订阅一个主题
client.subscribe(this.topic, { qos: 0 }, function (err) {
if (!err) {
console.log("成功");
wx.showToast({ icon: "none", title: "添加成功" });
// 可以在这里写一些订阅主题成功的逻辑
}
});
},
//发送消息
pushMsg(msg){
let that = this
client.publish(this.topic, msg, { qos: 0 }, err => {
if (!err) {
that.status = that.status==0?1:0
console.log("topic:", "想要发送消息的Topic变量", "成功发出消息", msg);
}
});
},
send(){
this.pushMsg(this.status==0?'on':'off')
}
}
}
</script>
<style lang="less" scoped>
.btn-box{
width: 100%;
text-align: center;
padding:50rpx 0;
}
</style>
运行表现MQTT连接成功：
https://i-blog.csdnimg.cn/direct/706658a825ca47e5a5c35d402f04721e.png
3、小程序连接MQTT问题
真机运行可能会遇到问题，小程序连接MQTT问题和方法。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]