From a96e571b174fa30697f3aa6fdb22b3cf93d21b71 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 14 五月 2025 17:32:06 +0800
Subject: [PATCH] 动态溯源 1. 添加websocket逻辑
---
src/views/sourcetrace/SourceTrace.vue | 49 +++++++++++++++----------------------------------
1 files changed, 15 insertions(+), 34 deletions(-)
diff --git a/src/views/sourcetrace/SourceTrace.vue b/src/views/sourcetrace/SourceTrace.vue
index a58da81..b4a2a63 100644
--- a/src/views/sourcetrace/SourceTrace.vue
+++ b/src/views/sourcetrace/SourceTrace.vue
@@ -18,8 +18,12 @@
</BaseCard>
</template>
<script setup>
+/**
+ * 鍔ㄦ�佹函婧愪俊鎭鐞�
+ * 閫氳繃websocket鏂瑰紡鎺ユ敹鍚庣鎺ㄩ�佺殑寮傚父淇℃伅骞跺睍绀�
+ */
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
-import { ws } from '@/api/index';
+import websocket from '@/api/websocket';
const height = `60vh`;
@@ -35,48 +39,25 @@
const streams = reactive([]);
-let socket;
-
const inputVal = ref('');
const handleSend = () => {
- if (socket) {
- socket.send(inputVal.value);
- }
-};
-
-const handleLink = () => {
- if (socket) {
- socket.close();
- }
- const url = 'ws://' + ws + '/ws';
- // socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
- socket = new WebSocket(url);
- // 涓庢湇鍔″櫒寤虹珛杩炴帴锛氬彂閫佹秷鎭埌鏈嶅姟鍣�
- socket.onopen = () => {
- console.log('connect: ');
- };
- // 鏀跺埌鏈嶅姟鍣ㄥ彂閫佺殑娑堟伅锛歟vent澶勭悊鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁
- socket.onmessage = (event) => {
- console.log('receive: ', event.data);
- putWorkStream(event.data);
- };
- // 杩炴帴鎴栭�氫俊杩囩▼涓彂鐢熼敊璇�
- socket.onerror = (event) => {
- console.log('errror: ', event);
- };
- // 涓庢湇鍔″櫒鏂紑杩炴帴
- socket.onclose = (event) => {
- console.log('close: ', event.code);
- };
+ websocket.send(inputVal.value);
};
/**
* 娣诲姞涓�鏉″伐浣滄祦淇℃伅
* @param {*} data
*/
-function putWorkStream(data) {
+const putWorkStream = (data) => {
const obj = JSON.parse(data);
streams.push(obj);
scrollToBottom();
-}
+};
+
+onMounted(() => {
+ websocket.registerReceiveEvent(putWorkStream);
+});
+onUnmounted(() => {
+ websocket.removeReceiveEvent(putWorkStream);
+});
</script>
--
Gitblit v1.9.3