当前位置：首页 > news >正文

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

news 2025/9/18 5:32:06

什么？打包空白？分享一下我的解决方法！

第一步
找大师算过了，装4.1版本运气好！
所以根目录执行命令…

npm install mqtt@4.1.0

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

// utils/mqtt.js
import mqtt from 'mqtt/dist/mqtt'class MQTTClient {constructor() {this.client = nullthis.subscriptions = new Map()this.reconnectTimer = nullthis.config = {host: 'mqtt://your-broker.com',options: {clientId: 'uni-app-' + Date.now(),keepalive: 60,clean: true,reconnectPeriod: 5000}}}init() {if (!this.client) {this.connect()}}connect() {this.client = mqtt.connect(this.config.host, this.config.options)this.client.on('connect', () => {console.log('MQTT Connected')this.resubscribe()})this.client.on('message', (topic, message) => {this.handleMessage(topic, message)})this.client.on('error', (err) => {console.error('MQTT Error:', err)})this.client.on('close', () => {console.log('MQTT Connection closed')this.scheduleReconnect()})}subscribe(topic, callback) {if (!this.subscriptions.has(topic)) {this.subscriptions.set(topic, new Set())if (this.client?.connected) {this.client.subscribe(topic)}}this.subscriptions.get(topic).add(callback)}unsubscribe(topic, callback) {if (this.subscriptions.has(topic)) {const callbacks = this.subscriptions.get(topic)callbacks.delete(callback)if (callbacks.size === 0) {this.subscriptions.delete(topic)if (this.client?.connected) {this.client.unsubscribe(topic)}}}}handleMessage(topic, message) {if (this.subscriptions.has(topic)) {const callbacks = this.subscriptions.get(topic)callbacks.forEach(cb => cb(message.toString()))}}resubscribe() {if (this.client?.connected) {const topics = Array.from(this.subscriptions.keys())if (topics.length > 0) {this.client.subscribe(topics)}}}scheduleReconnect() {if (!this.reconnectTimer) {this.reconnectTimer = setTimeout(() => {this.reconnectTimer = nullthis.connect()}, 5000)}}destroy() {if (this.client) {this.client.end()this.client = null}this.subscriptions.clear()clearTimeout(this.reconnectTimer)}
}export const mqttClient = new MQTTClient()

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

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

第四步
打开这个mqtt.js修改源码，注意，不是你自己创建的mqtt.js，是安装的依赖库文件，路径在根目的node_modules/mqtt/dist里面！！！！！
在这里插入图片描述
然后把里面的代码修改，看图，要改2行！！！源码使用的是 wx.connectSocket，修改之后：uni.connectSocket
最后要加上 complete:()=>{}, 别问为什么，一问你就输了！！！！

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

<template><view>收到的MQTT内容===>{{msg}}</view>
</template><script>export default {name: "wang-mqtt",data() {return {msg: '初始化mqtt'}},created() {// 连接配置let myOptions = {clientId: 'uni-app-' + Date.now(),keepalive: 60,clean: true,reconnectPeriod: 5000}let ip = ''// #ifdef H5ip = 'ws://你的IP:8083/mqtt'// #endif// #ifdef APP-PLUSip = 'wx://你的IP:8083/mqtt'// #endif// 创建 MQTT 客户端const client = this.$mqtt.connect(ip, myOptions);// 订阅主题client.subscribe('app_xxdg/topic', (err) => {if (!err) console.log('成功已订阅主题');});// 监听消息client.on('message', (topic, message) => {this.msg = message.toString()console.log(`收到消息：`, message.toString());});},methods: {}}
</script>
<style>
</style>