uniapp在app下使用mqtt协议！！！支持vue3

什么？打包空白？分享一下我的办理方法！
第一步
找大师算过了，装4.1版本运气好！
所以根目录执行命令…

1. npm install mqtt@4.1.0

复制代码

第二步
自己封装一个mqtt文件方便后期开坛做法！

1. // utils/mqtt.js
2. import mqtt from 'mqtt/dist/mqtt'
4. class MQTTClient {
5.   constructor() {
6.     this.client = null
7.     this.subscriptions = new Map()
8.     this.reconnectTimer = null
9.     this.config = {
10.       host: 'mqtt://your-broker.com',
11.       options: {
12.         clientId: 'uni-app-' + Date.now(),
13.         keepalive: 60,
14.         clean: true,
15.         reconnectPeriod: 5000
16.       }
17.     }
18.   }
20.   init() {
21.     if (!this.client) {
22.       this.connect()
23.     }
24.   }
26.   connect() {
27.     this.client = mqtt.connect(this.config.host, this.config.options)
29.     this.client.on('connect', () => {
30.       console.log('MQTT Connected')
31.       this.resubscribe()
32.     })
34.     this.client.on('message', (topic, message) => {
35.       this.handleMessage(topic, message)
36.     })
38.     this.client.on('error', (err) => {
39.       console.error('MQTT Error:', err)
40.     })
42.     this.client.on('close', () => {
43.       console.log('MQTT Connection closed')
44.       this.scheduleReconnect()
45.     })
46.   }
48.   subscribe(topic, callback) {
49.     if (!this.subscriptions.has(topic)) {
50.       this.subscriptions.set(topic, new Set())
51.       if (this.client?.connected) {
52.         this.client.subscribe(topic)
53.       }
54.     }
55.     this.subscriptions.get(topic).add(callback)
56.   }
58.   unsubscribe(topic, callback) {
59.     if (this.subscriptions.has(topic)) {
60.       const callbacks = this.subscriptions.get(topic)
61.       callbacks.delete(callback)
62.       if (callbacks.size === 0) {
63.         this.subscriptions.delete(topic)
64.         if (this.client?.connected) {
65.           this.client.unsubscribe(topic)
66.         }
67.       }
68.     }
69.   }
71.   handleMessage(topic, message) {
72.     if (this.subscriptions.has(topic)) {
73.       const callbacks = this.subscriptions.get(topic)
74.       callbacks.forEach(cb => cb(message.toString()))
75.     }
76.   }
78.   resubscribe() {
79.     if (this.client?.connected) {
80.       const topics = Array.from(this.subscriptions.keys())
81.       if (topics.length > 0) {
82.         this.client.subscribe(topics)
83.       }
84.     }
85.   }
87.   scheduleReconnect() {
88.     if (!this.reconnectTimer) {
89.       this.reconnectTimer = setTimeout(() => {
90.         this.reconnectTimer = null
91.         this.connect()
92.       }, 5000)
93.     }
94.   }
96.   destroy() {
97.     if (this.client) {
98.       this.client.end()
99.       this.client = null
100.     }
101.     this.subscriptions.clear()
102.     clearTimeout(this.reconnectTimer)
103.   }
104. }
106. export const mqttClient = new MQTTClient()

复制代码

第三步
打开 main.js 文件
思量前后，以为还是全局挂载吧

1. import mqtt from '@/mqtt/dist/mqtt.js'
2. app.config.globalProperties.$mqtt = mqtt;

复制代码

第四步
打开这个mqtt.js修改源码，注意，不是你自己创建的mqtt.js，是安装的依靠库文件，路径在根目的node_modules/mqtt/dist里面！！！！！

然后把里面的代码修改，看图，要改2行！！！源码使用的是 wx.connectSocket，修改之后：uni.connectSocket
末了要加上 complete)=>{}, 别问为什么，一问你就输了！！！！

第五步
到这里已经可以使用了，不信你打包一下app试下，自定义基座也是没问题的！
下面是我的使用代码！

1. <template>
2.         <view>
3.                 收到的MQTT内容===>{{msg}}
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 name: "wang-mqtt",
10.                 data() {
11.                         return {
12.                                 msg: '初始化mqtt'
13.                         }
14.                 },
15.                 created() {
16.                         // 连接配置
17.                         let myOptions = {
18.                                 clientId: 'uni-app-' + Date.now(),
19.                                 keepalive: 60,
20.                                 clean: true,
21.                                 reconnectPeriod: 5000
22.                         }
23.                         let ip = ''
24.                         // #ifdef H5
25.                          ip = 'ws://你的IP:8083/mqtt'
26.                         // #endif
27.                         // #ifdef APP-PLUS
28.                          ip = 'wx://你的IP:8083/mqtt'
29.                         // #endif
31.                         // 创建 MQTT 客户端
32.                         const client = this.$mqtt.connect(ip, myOptions);
33.                         // 订阅主题
34.                         client.subscribe('app_xxdg/topic', (err) => {
35.                                 if (!err) console.log('成功已订阅主题');
36.                         });
37.                         // 监听消息
38.                         client.on('message', (topic, message) => {
39.                                 this.msg = message.toString()
40.                                 console.log(`收到消息：`, message.toString());
41.                         });
42.                 },
43.                 methods: {
45.                 }
46.         }
47. </script>
48. <style>
49. </style>

复制代码

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