@zhangqingcq/vgce 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -58,7 +58,7 @@
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.1",
-    "element-plus": "2.8.0",
+    "element-plus": "2.8.6",
     "lodash-es": "^4.17.21",
     "mqtt": "5.1.3",
     "pinia": "^2.1.3",

package/src/components/svg-viewer.vue

@@ -25,7 +25,7 @@
 	import 'element-plus/dist/index.css'
 	import 'animate.css'
 
-	import { sub, close } from '@/utils/mqtt-net'
+	import Link from '@/utils/mqtt-net'
 
 	setEditorLoadTime()
 
@@ -37,6 +37,8 @@
 			showCanvasInfo: true
 		}
 	)
+
+	let link: any = Link()
 	const globalStore = useGlobalStore(pinia)
 	componentsRegister(props.vueComp)
 	const preview_data = reactive(
@@ -274,7 +276,7 @@
 	const connectNet = () => {
 		const m = preview_data.config.net.mqtt
 		if (m && m.url && m.user && m.pwd && m.topics) {
-			sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
+			link.sub(m.url, m.user, m.pwd, m.topics, (topics: string, message: string) => {
 				console.log(topics)
 				console.log(message.toString())
 				//暴露给外部，让用户自己处理消息，message可以用JSON.parse解析成对象（后端推给前端的MQTT消息内容需要是JSON格式）
@@ -310,7 +312,12 @@
 		connectNet()
 	})
 
-	onBeforeUnmount(close)
+	onBeforeUnmount(() => {
+		link.close(() => {
+			link.destroy()
+			link = null
+		})
+	})
 
 	defineExpose({
 		setNodeAttrByID

package/src/utils/mqtt-net.ts

@@ -1,59 +1,74 @@
 import { connect } from 'mqtt/dist/mqtt'
 import type { MqttClient, PacketCallback } from 'mqtt'
 
-let client: MqttClient
+class Link {
+	client: MqttClient | null
 
-export const sub = (url: string, user: string, pwd: string, topics: string, callback: any) => {
-	const _url = url.trim()
-	if (!/^wss?:\/\/.*$/.test(_url)) {
-		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
-		return
+	constructor() {
+		this.client = null
 	}
-	client = connect(_url, {
-		username: user.trim(),
-		password: pwd.trim(),
-		reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
-	})
-
-	client.on('connect', () => {
-		console.log('MQTT服务器连接成功')
-		console.log(client.options.clientId)
-		client.subscribe(topics, { qos: 1 })
-	})
-
-	client.on('message', callback)
-}
 
-export const pub = (url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) => {
-	const _url = url.trim()
-	if (!/^wss?:\/\/.*$/.test(_url)) {
-		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
-		return
+	sub(url: string, user: string, pwd: string, topics: string, callback: any) {
+		const _url = url.trim()
+		if (!/^wss?:\/\/.*$/.test(_url)) {
+			console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+			return false
+		}
+		this.client = connect(_url, {
+			username: user.trim(),
+			password: pwd.trim(),
+			reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
+		})
+
+		this.client?.on('connect', () => {
+			console.log('MQTT服务器连接成功')
+			console.log(this.client?.options.clientId)
+			this.client?.subscribe(topics, { qos: 1 })
+		})
+
+		this.client?.on('message', callback)
 	}
-	client = connect(_url, {
-		username: user.trim(),
-		password: pwd.trim()
-	})
-
-	client.on('connect', () => {
-		console.log('MQTT服务器连接成功')
-		console.log(client.options.clientId)
-		client.publish(
-			topics,
-			JSON.stringify(data),
-			{
-				qos: 0,
-				retain: true
-			},
-			callback
-		)
-	})
-}
 
-export const close = () => {
-	if (client && client.end) {
-		client.end(true, {}, () => {
+	pub(url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) {
+		const _url = url.trim()
+		if (!/^wss?:\/\/.*$/.test(_url)) {
+			console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+			return false
+		}
+		this.client = connect(_url, {
+			username: user.trim(),
+			password: pwd.trim()
+		})
+
+		this.client?.on('connect', () => {
+			console.log('MQTT服务器连接成功')
+			console.log(this.client?.options.clientId)
+			this.client?.publish(
+				topics,
+				JSON.stringify(data),
+				{
+					qos: 0,
+					retain: true
+				},
+				callback
+			)
+		})
+	}
+
+	close(callback?: () => void) {
+		this.client?.end?.(true, {}, () => {
 			console.log('MQTT服务连接关闭')
+			callback?.()
 		})
 	}
+
+	destroy() {
+		this.client = null
+	}
+}
+
+const t = function () {
+	return new Link()
 }
+
+export default t

package/src/views/Preview.vue

@@ -15,7 +15,7 @@
 <template>
 	<div class="previewPage">
 		<svg-viewer :data="store.data" />
-		<el-button type="text" @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
+		<el-button link @click="back" class="backBtn" :icon="ArrowLeftBold">返回</el-button>
 	</div>
 </template>