feat: mqtt调试

This commit is contained in:
pengqiao1993
2026-03-11 10:55:28 +08:00
parent a909c3897c
commit 0fcb882e5d
6 changed files with 186 additions and 141 deletions

View File

@ -52,7 +52,7 @@
import {
Langlist
} from "@/common/lang";
import MQTTClient from "@/static/lib/mqtt.js";
import mqtt from "@/uni_modules/leliven-mqtt/index.js";
export default {
data() {
@ -65,22 +65,10 @@
mqttClient: null,
backData: {},
smallArr: [],
mqttConfig: {
host: '13.39.200.14',
port: 8083,
clientId: 'mqttx_' + Date.now(),
username: 'admin',
password: 'zzkj@688737',
path: 'mqtt',
protocolVersion: 4, // 4 for MQTT 3.1.1
clean: false,
cleanStart: false, // for MQTT 5.0
keepAlive: 60,
sessionExpiryInterval: 4294967295,
connectTimeout: 10000,
reconnectPeriod: 3000
},
user: {
username: 'admin', // 设置用户名
password: 'zzkj@688737' // 设置密码
}
};
},
@ -95,121 +83,47 @@
},
onShow() {
this.connect()
this.initmqttClient()
},
methods: {
initMQTTClient() {
this.mqttClient = new MQTTClient(this.mqttConfig)
console.log(this.mqttClient);
// 监听连接事件
this.mqttClient.on('connect', () => {
console.log('MQTT 连接成功')
this.publish({
topic: '/test',
message: {
fun: 'GET',
type: 'WJ_Get_NewControlSystem',
content: 0
},
qos: 0
initmqttClient() {
// 初始化客户端连接地址
// #ifdef H5
let mqttClient = mqtt.connect('ws://13.39.200.14:8083/mqtt', {
...this.user
})
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
let mqttClient = mqtt.connect('wx://13.39.200.14:8083/mqtt', {
...this.user
})
// 监听断开事件
this.mqttClient.on('disconnect', (res) => {
this.connectionStatus = 'disconnected'
console.log('连接已关闭')
})
// 监听错误事件
this.mqttClient.on('error', (error) => {
console.log(error)
})
// 监听状态变化
this.mqttClient.on('statusChange', (status) => {
console.log(status)
})
// 监听消息事件
this.mqttClient.on('message', (msg) => {
console.log(msg)
})
// 监听订阅成功事件
this.mqttClient.on('subscribed', (packetId) => {
this.addLog('success', `订阅成功 (包ID: ${packetId})`)
uni.showToast({
title: '订阅成功',
icon: 'success'
})
})
// 监听取消订阅成功事件
this.mqttClient.on('unsubscribed', (packetId) => {
this.addLog('success', `取消订阅成功 (包ID: ${packetId})`)
uni.showToast({
title: '取消订阅成功',
icon: 'success'
})
})
},
// #endif
console.log(mqttClient,'888')
this.mqttClient = mqttClient
// 连接MQ服务
mqttClient.on('connect', function(res) {
console.log('连接成功')
console.log(res)
publish(publishConfig) {
const {
topic,
message,
qos
} = publishConfig
if (!topic) {
uni.showToast({
title: '请输入主题',
icon: 'none'
})
return
// 订阅主题
mqttClient.subscribe('presence', function(err) {
if (!err) {
// 订阅成功
mqttClient.publish('presence', 'hello mqtt')
}
if (this.mqttClient) {
this.mqttClient.publish(topic, message, qos)
}
},
subscribe() {
if (this.mqttClient) {
this.mqttClient.subscribe({
topic: '/test',
qos: 0
})
}
},
connect() {
const {
host
} = this.mqttConfig
if (!host) {
uni.showToast({
title: '请输入主机地址',
icon: 'none'
}).on('reconnect', function() {
console.log('重新连接')
}).on('error', function() {
console.log('连接失败')
}).on('end', function() {
console.log('连接End')
}).on('message', function(topic, message) {
// 收到MQ消息
console.log(message.toString())
})
return
}
console.log('开始连接 MQTT 服务器...')
// 如果客户端未初始化,重新初始化
if (!this.mqttClient) {
this.initMQTTClient()
}
this.mqttClient.reSetconstructor(this.mqttConfig)
this.mqttClient.connect()
},
@ -301,9 +215,8 @@
pre[cur.prop] = Number(pre[cur.prop])
return pre
}, {})
this.publish({
topic: '/test',
message: {
console.log(this.mqttClient)
this.mqttClient.publish('presence', JSON.stringify({
fun: 'SET',
type: 'WJ_Set_NewControlSystem',
content: {
@ -313,9 +226,8 @@
...smallParam
}
}
},
qos: 0
})
}))
},
},

View File

@ -0,0 +1,4 @@
## 1.0.12023-10-18
更新使用文档
## 1.0.02023-10-18
初始化mqtt

View File

@ -0,0 +1,3 @@
import mqtt from './mqtt.min.js'
export default mqtt

1
uni_modules/leliven-mqtt/mqtt.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,85 @@
{
"id": "leliven-mqtt",
"displayName": "leliven-mqtt",
"version": "1.0.1",
"description": "leliven-mqtt",
"dependencies": {
"mqtt": "^3.0.0"
},
"keywords": [
"leliven-mqtt"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "sdk-js",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "u",
"vue3": "u"
},
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

View File

@ -0,0 +1,40 @@
# leliven-mqtt
## 使用
1. 依赖 [leliven-mqtt](https://ext.dcloud.net.cn/plugin?name=leliven-mqtt)
3. 页面引用 ` import mqtt from '@/uni_modules/leliven-mqtt/index.js'`
4. 详细使用说明:[MQTT.js](https://github.com/mqttjs/MQTT.js)
```js
// 初始化客户端连接地址
// #ifdef H5
let client = mqtt.connect('ws://test.mosquitto.org:8080')
// #endif
// #ifdef MP-WEIXIN||APP-PLUS
let client = mqtt.connect('wx://test.mosquitto.org:8080')
// #endif
// 连接MQ服务
client.on('connect', function() {
console.log('连接成功')
// 订阅主题
client.subscribe('presence', function(err) {
if (!err) {
// 订阅成功
client.publish('presence', 'hello mqtt')
}
})
}).on('reconnect', function() {
console.log('重新连接')
}).on('error', function() {
console.log('连接失败')
}).on('end', function() {
console.log('连接End')
}).on('message', function(topic, message) {
// 收到MQ消息
console.log(message.toString())
})
```