@zhangqingcq/vgce 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhangqingcq/vgce",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Vector graphics configure editor. svg组态编辑器。基于vue3.3+ts+element-plus+vite",
   "publishConfig": {
     "access": "public"
@@ -60,7 +60,7 @@
     "echarts": "^5.4.1",
     "element-plus": "^2.3.8",
     "lodash-es": "^4.17.21",
-    "mqtt": "^4.3.7",
+    "mqtt": "^5.1.3",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-echarts": "^6.5.1",

package/src/components/svg-viewer.vue

@@ -240,7 +240,7 @@
 				1.用你的项目里前后端约定的svg组件唯一标识符替换掉编辑器生成的id（必须保证唯一），然后调用setNodeAttrByID改变组件属性。
 				2.如果不想改动id（避免因不能保证手动改过的id唯一性导致编辑器功能异常），可以在config里给想要改变的组件的配置文件的props里增加一个字段，
 				如deviceCode(svg-text的配置文件里有被注释的例子)，然后在编辑组态时，给对应组件填上对应的deviceCode（这样deviceCode就和组件id实现
-				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode找在done_json
+				了映射关系），并保存，后台给前台推MQTT消息时带上指定的deviceCode，前台预览时，在收到MQTT消息后，凭借消息里的deviceCode在done_json
 				找到组件的id（可以用vue的computed计算一份deviceCode和id的映射关系存到一个对象里，这样在需要id时可直接在计算出的对象凭借deviceCode
 				直接取到），即可用setNodeAttrByID改变组件属性*/
 				emit('onMessage', {

package/src/utils/mqtt-net.ts

@@ -4,9 +4,14 @@ import type { MqttClient, PacketCallback } from 'mqtt'
 let client: MqttClient
 
 export const sub = (url: string, user: string, pwd: string, topics: string, callback: Function) => {
-	client = connect(url, {
-		username: user,
-		password: pwd,
+	const _url = url.trim()
+	if (!/^wss?:\/\/.*$/.test(_url)) {
+		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+		return
+	}
+	client = connect(_url, {
+		username: user.trim(),
+		password: pwd.trim(),
 		reconnectPeriod: 600000 /*如果连不上，10分钟后重试*/
 	})
 
@@ -20,9 +25,14 @@ export const sub = (url: string, user: string, pwd: string, topics: string, call
 }
 
 export const pub = (url: string, user: string, pwd: string, topics: string, data: any, callback: PacketCallback) => {
-	client = connect(url, {
-		username: user,
-		password: pwd
+	const _url = url.trim()
+	if (!/^wss?:\/\/.*$/.test(_url)) {
+		console.error('编辑器MQTT通信只支持ws协议 (url必须以"ws://"开头)')
+		return
+	}
+	client = connect(_url, {
+		username: user.trim(),
+		password: pwd.trim()
 	})
 
 	client.on('connect', () => {