96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<template>
|
||
<view>
|
||
<!-- MQTT 客户端组件 -->
|
||
<slot :connect="connect" :disconnect="disconnect" :publish="publish" :subscribe="subscribe" :unsubscribe="unsubscribe" :status="status" :topics="topics">
|
||
<!-- 默认插槽内容，用户可自定义 -->
|
||
</slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MQTTClient from '../js_sdk/index.js'
|
||
|
||
export default {
|
||
name: 'mqtt-client',
|
||
props: {
|
||
options: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mqtt: null,
|
||
status: 'disconnected',
|
||
topics: []
|
||
}
|
||
},
|
||
created() {
|
||
this.mqtt = new MQTTClient(this.options)
|
||
|
||
this.mqtt.on('statusChange', (status) => {
|
||
this.status = status
|
||
this.$emit('status-change', status)
|
||
})
|
||
|
||
this.mqtt.on('message', (msg) => {
|
||
this.$emit('message', msg)
|
||
})
|
||
|
||
this.mqtt.on('connect', () => {
|
||
this.$emit('connect')
|
||
})
|
||
|
||
this.mqtt.on('disconnect', (res) => {
|
||
this.$emit('disconnect', res)
|
||
})
|
||
|
||
this.mqtt.on('error', (error) => {
|
||
this.$emit('error', error)
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
if (this.mqtt) {
|
||
this.mqtt.disconnect()
|
||
}
|
||
},
|
||
methods: {
|
||
connect() {
|
||
if (this.mqtt) {
|
||
this.mqtt.connect()
|
||
}
|
||
},
|
||
disconnect() {
|
||
if (this.mqtt) {
|
||
this.mqtt.disconnect()
|
||
}
|
||
},
|
||
publish(topic, message, qos = 0) {
|
||
if (this.mqtt) {
|
||
this.mqtt.publish(topic, message, qos)
|
||
}
|
||
},
|
||
subscribe(topic, qos = 0) {
|
||
if (this.mqtt) {
|
||
this.mqtt.subscribe(topic, qos)
|
||
if (!this.topics.includes(topic)) {
|
||
this.topics.push(topic)
|
||
}
|
||
}
|
||
},
|
||
unsubscribe(topic) {
|
||
if (this.mqtt) {
|
||
this.mqtt.unsubscribe(topic)
|
||
const index = this.topics.indexOf(topic)
|
||
if (index > -1) {
|
||
this.topics.splice(index, 1)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|