twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 09:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: mqtt client.end error in onUnmounted, update some style

Browse Source
This commit is contained in:
edgexie 2024-03-24 18:02:42 +08:00
parent 57e934e683
commit 5208eca0fa
1 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/able/mqtt-client.vue
View File

@ -25,19 +25,20 @@ const connection = reactive({
// 订阅 topic/mqttx 主题 // 订阅 topic/mqttx 主题
const subscription = ref({ const subscription = ref({
topic: "topic/mqttx", topic: "topic/mqttx",
qos: 0 as mqtt.QoS qos: 0 as any
}); });
// 发布 topic/browser 主题 // 发布 topic/browser 主题
const publish = ref({ const publish = ref({
topic: "topic/browser", topic: "topic/browser",
qos: 0 as mqtt.QoS, qos: 0 as any,
payload: '{ "msg": "Hello, I am browser." }' payload: '{ "msg": "Hello, I am browser." }'
}); });
let client = ref({ let client = ref({
connected: false connected: false
} as mqtt.MqttClient); } as mqtt.MqttClient);
const receivedMessages = ref(""); const receivedMessages = ref("");
const subscribedSuccess = ref(false); const subscribedSuccess = ref(false);
const btnLoadingType = ref(""); const btnLoadingType = ref("");
@ -175,37 +176,37 @@ const handleProtocolChange = (value: string) => {
}; };
onUnmounted(() => { onUnmounted(() => {
client.value.end(); try {
if (client.value.end) {
client.value.end();
console.log("disconnected successfully");
}
} catch (error) {
console.log(error);
}
}); });
</script> </script>
<template> <template>
<el-card shadow="never" :body-style="{ padding: '20px' }"> <el-card shadow="never" :body-style="{ padding: '20px' }">
<template #header> <template #header>
<p> 基于
基于 <el-link
<el-link type="primary"
type="primary" :underline="false"
:underline="false" href="https://github.com/mqttjs/MQTT.js"
href="https://github.com/mqttjs/MQTT.js" target="_blank"
target="_blank" >MQTT.js</el-link
>MQTT.js</el-link >
> 和 免费的公共MQTT代理
和 免费的公共MQTT代理 <el-link
<el-link type="primary"
type="primary" :underline="false"
:underline="false" href="broker.emqx.io"
href="broker.emqx.io" target="_blank"
target="_blank" >EMQX</el-link
>EMQX</el-link >
> 实现的一套 MQTT 客户端。
实现的一套 MQTT 客户端。
</p>
<p>
<el-text
>可将订阅主题设置为 topic/browser，测试MQTT的自发自收。</el-text
>
</p>
</template> </template>
<template #default> <template #default>
<el-card shadow="never"> <el-card shadow="never">
@ -287,7 +288,7 @@ onUnmounted(() => {
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="8">
<el-form-item prop="qos" label="通信质量"> <el-form-item prop="qos" label="通信质量">
<el-select <el-select
v-model="subscription.qos" v-model="subscription.qos"
@ -302,7 +303,9 @@ onUnmounted(() => {
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> </el-row>
<el-row>
<el-col>
<el-button <el-button
type="primary" type="primary"
class="sub-btn" class="sub-btn"
@ -331,7 +334,13 @@ onUnmounted(() => {
<el-form label-position="top" :model="publish"> <el-form label-position="top" :model="publish">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="topic" label="主题"> <el-form-item prop="topic">
<template #label>
<span>主题</span>
<el-text type="info" size="small">
可将订阅主题设置为topic/browser，测试MQTT的自发自收。
</el-text>
</template>
<el-input v-model="publish.topic" /> <el-input v-model="publish.topic" />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -354,7 +363,7 @@ onUnmounted(() => {
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-col :span="24" class="text-right"> <el-col :span="24">
<el-button <el-button
type="primary" type="primary"
:loading="btnLoadingType === 'publish'" :loading="btnLoadingType === 'publish'"