动态溯源 1. 添加websocket逻辑

riku

2025-05-14 a96e571b174fa30697f3aa6fdb22b3cf93d21b71

 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: ');
  };
  // 收到服务器发送的消息：event处理服务器返回的数据
  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>