小程序调通mq

master
xce 2026-01-06 22:46:56 +08:00
parent 9b2f94fc5d
commit 00dd3fe270
7 changed files with 89 additions and 23 deletions

54
App.vue
View File

@ -13,6 +13,13 @@ export default {
} }
}, },
onLaunch: function() { onLaunch: function() {
// #ifdef H5
// H5/
window.addEventListener('beforeunload', () => {
mqttUtil.disconnectMqtt()
console.log('H5刷新强制断开MQTT连接')
})
// #endif
this.initApp() this.initApp()
mqttUtil.disconnectMqtt() mqttUtil.disconnectMqtt()
@ -21,12 +28,21 @@ export default {
if (savedSubscribeList && savedSubscribeList.length > 0) { if (savedSubscribeList && savedSubscribeList.length > 0) {
this.globalData.mqtt.subscribeList = savedSubscribeList this.globalData.mqtt.subscribeList = savedSubscribeList
} }
// ========== 线mqtt ==========
// 2. token
uni.$on('tokenExpired', () => {
console.info("被动token校验")
this.handleTokenExpired()
})
}, },
onShow() { onShow() {
//
console.log('小程序切前台/首次显示') console.log('小程序切前台/首次显示')
const token = getToken() || this.globalData.mqtt.token const token = getToken() || this.globalData.mqtt.token
if (token) { if (token) {
console.info("token存在mqtt重新连接中。。")
// globalData // globalData
if (this.globalData.mqtt.subscribeList.length === 0) { if (this.globalData.mqtt.subscribeList.length === 0) {
const savedSubscribeList = uni.getStorageSync('mqtt_subscribe_list') const savedSubscribeList = uni.getStorageSync('mqtt_subscribe_list')
@ -34,7 +50,11 @@ export default {
this.globalData.mqtt.subscribeList = savedSubscribeList this.globalData.mqtt.subscribeList = savedSubscribeList
} }
} }
this.reconnectMqtt() console.info("clientaasa: ",mqttUtil.getMqttState().client)
if (mqttUtil.getMqttState().client==null) {
console.info("token存在mqtt重新连接中。。")
this.reconnectMqtt()
}
} }
}, },
onHide() { onHide() {
@ -110,6 +130,36 @@ export default {
// ========== localStorage ========== // ========== localStorage ==========
uni.removeStorageSync('mqtt_subscribe_list') uni.removeStorageSync('mqtt_subscribe_list')
console.log('登出成功MQTT已断开') console.log('登出成功MQTT已断开')
},
// token
handleTokenExpired() {
console.info("被踢下线")
// 1. MQTT
mqttUtil.disconnectMqtt()
// 2. token
this.globalData.mqtt = {
hasLogin: false,
token: '',
subscribeList: []
}
// 3.
uni.showModal({
title: '提示',
content: '登录已过期,请重新登录',
showCancel: false,
success: () => {
//
uni.reLaunch({
url: '/pages/login'
})
}
})
} }
} }
} }

View File

@ -1,6 +1,6 @@
// 应用全局配置 // 应用全局配置
module.exports = { module.exports = {
baseUrl: process.env.NODE_ENV === "production" ? "/api" : "http://localhost:8088", baseUrl: process.env.UNI_PLATFORM === 'mp-weixin'?"http://122.51.109.52:8088":'http://localhost:8088',
// 应用信息 // 应用信息
appInfo: { appInfo: {
// 应用名称 // 应用名称

View File

@ -51,6 +51,10 @@
"optimization" : { "optimization" : {
"subPackages" : true "subPackages" : true
}, },
"networkTimeout": {
"request": 60000,
"connectSocket": 60000
},
"usingComponents" : true "usingComponents" : true
}, },
"vueVersion" : "2", "vueVersion" : "2",
@ -65,6 +69,12 @@
"router" : { "router" : {
"mode" : "hash", "mode" : "hash",
"base" : "/m/" "base" : "/m/"
},
"optimization" : {
"minimize" : true,
"treeShaking" : {
"enable" : true
}
} }
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 861 KiB

After

Width:  |  Height:  |  Size: 218 KiB

View File

@ -7,20 +7,21 @@
*/ */
// 引入小程序版MQTT核心库确保mqtt.min.js在utils目录 // 引入小程序版MQTT核心库确保mqtt.min.js在utils目录
import mqtt from './mqtt.min.js'
// 微信小程序端:引入适配小程序的 mqtt 版本
import mqtt from 'mqtt/dist/mqtt'
// ===================== MQTT配置暂时写死TODO后续从数据字典获取===================== // ===================== MQTT配置暂时写死TODO后续从数据字典获取=====================
const MQTT_CONFIG = { const MQTT_CONFIG = {
server: 'ws://122.51.109.52:9001/mqtt', // 替换为你的MQTT服务器地址 server: 'wxs://mq.mj142.cn:443/mqtt', // 替换为你的MQTT服务器地址
username: 'admin', // 替换为通用账号 username: 'admin', // 替换为通用账号
password: 'Admin#12345678', // 替换为通用密码 password: 'Admin#12345678', // 替换为通用密码
clean: true, clean: true,
host: '122.51.109.52', host: 'mq.mj142.cn',
port: 9001, port: 443,
reconnectPeriod: 5000, // 重连间隔 reconnectPeriod: 5000, // 重连间隔
connectTimeout: 10000, // 连接超时 connectTimeout: 10000, // 连接超时
keepalive: 60, // 心跳时间 keepalive: 60, // 心跳时间
protocol: 'ws'
} }
// ===================== MQTT全局状态管理 ===================== // ===================== MQTT全局状态管理 =====================
@ -40,6 +41,15 @@ const mqttState = {
* @returns {Boolean} - 是否配置成功 * @returns {Boolean} - 是否配置成功
*/ */
export function initMqttConfig() { export function initMqttConfig() {
if (mqttState.client) {
console.info("重连前强制断开",mqttState.options.clientId)
// 加try-catch避免断开时客户端已异常导致报错
try {
mqttState.client.end(true)
} catch (err) {
console.warn('旧连接断开失败:', err)
}
}
try { try {
// 仅随机生成clientId保证唯一性避免连接冲突 // 仅随机生成clientId保证唯一性避免连接冲突
mqttState.options.clientId = `wx_mqtt_${Math.random().toString(16).substr(2, 10)}` mqttState.options.clientId = `wx_mqtt_${Math.random().toString(16).substr(2, 10)}`
@ -66,30 +76,24 @@ export function connectMqtt() {
console.error('MQTT连接失败请先调用initMqttConfig初始化配置') console.error('MQTT连接失败请先调用initMqttConfig初始化配置')
return false return false
} }
console.info(mqttState.client!=null,mqttState.client)
// 避免重复连接 // 避免重复连接
if (mqttState.isConnected && mqttState.client) { if (mqttState.client!=null) {
console.log('MQTT已连接无需重复操作') console.log('MQTT已连接无需重复操作')
return true return true
} }
try { try {
// 创建客户端实例(同步操作) // 创建客户端实例(同步操作)
// mqttState.client = mqtt.connect(MQTT_CONFIG.server, mqttState.options) // #ifndef MP-WEIXIN
// #ifdef MP-WEIXIN MQTT_CONFIG.server = 'wss://mq.mj142.cn:443/mqtt'
MQTT_CONFIG.protocol = 'wxs';
// #endif // #endif
mqttState.client = mqtt.connect({ console.info("mqttState.connect",mqttState)
host: MQTT_CONFIG.host, mqttState.client = mqtt.connect(MQTT_CONFIG.server, mqttState.options)
port: MQTT_CONFIG.port, console.info("重连中。。")
clientId: mqttState.options.clientId,
username: MQTT_CONFIG.username,
password: MQTT_CONFIG.password,
// 关键指定用小程序的Socket
protocol: MQTT_CONFIG.protocol // 或'ws'根据你的MQTT服务协议
})
// 监听核心事件(异步,同步更新状态) // 监听核心事件(异步,同步更新状态)
mqttState.client.on('connect', () => { mqttState.client.on('connect', () => {
console.log('MQTT连接成功') console.log('MQTT连接成功',mqttState.options.clientId)
mqttState.isConnected = true mqttState.isConnected = true
// 连接成功后自动订阅全局列表 // 连接成功后自动订阅全局列表
subscribeAllTopics() subscribeAllTopics()
@ -266,7 +270,8 @@ export function getMqttState() {
return { return {
isConnected: mqttState.isConnected, isConnected: mqttState.isConnected,
subscribeList: [...mqttState.subscribeList], subscribeList: [...mqttState.subscribeList],
clientId: mqttState.options.clientId clientId: mqttState.options.clientId,
client: mqttState.client
} }
} }

View File

@ -38,6 +38,7 @@ const request = config => {
const code = res.data.code || 200 const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default'] const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) { if (code === 401) {
uni.$emit('tokenExpired')
store.dispatch('LogOut').then(res => { store.dispatch('LogOut').then(res => {
uni.reLaunch({ url: '/pages/login' }) uni.reLaunch({ url: '/pages/login' })
}) })