websocket链接

1,utils/websocketService

// src/utils/websocketService.ts
import { ref } from 'vue';
// import { baseURL } from './http';
const isConnected = ref(false);
let socket: WebSocket | null = null;// 连接 WebSocket
const connect = (): void => {// const url = baseURL.split('//')[1];// socket = new WebSocket(`ws://${url}/webSocket/${token}`);
//  const url = `ws://192.168.1.42:9400/api/client-api-server/ws/listen?token=${actualToken}`;socket = new WebSocket(`ws://192.168.1.42:8411/api/client-api-server/ws/listen`);socket.onopen = () => {console.log("WebSocket连接已建立");isConnected.value = true;};socket.onmessage = (event: MessageEvent) => {console.log("收到消息:", event.data);// 这里可以处理接收到的消息};socket.onerror = (error: Event) => {console.error("WebSocket错误:", error);};socket.onclose = (event: CloseEvent) => {console.log("WebSocket连接已关闭", event);isConnected.value = false;};
};// 发送消息
const sendMessage = (message: string): void => {if (socket && isConnected.value) {socket.send(message);} else {console.error("WebSocket未连接，无法发送消息");}
};// 关闭 WebSocket 连接
const close = (): void => {if (socket) {socket.close();}
};// 导出相关功能
export { connect, sendMessage, close, isConnected, socket };

2.页面引用

1.

处理 WebSocket 消息通知，根据不同的消息码(code)执行相应操作：

1. code 209：显示任务进度条，更新进度百分比
2. code 200：标记任务为完成状态，更新图片数据
3. code 202：标记任务为失败状态
4. code 300：根据队列类型(queueType)更新任务队列信息，包括总数量和排序

整体用于实时更新 AI 绘图任务的状态和进度。

onMounted(async () => {// await getRecentlySelectBsGenerategraph()const messageHandler = (event: MessageEvent) => {const dataArry = JSON.parse(event.data)if (dataArry.code == 209) {msgShow.value = truetaskId.value = dataArry.taskIdif (!dataArry.data.completed) {percentage.value = Math.floor(dataArry.data.progress * 100)} else {percentage.value = 100}} else if (dataArry.code == 200) {msgShow.value = falsedataList.value.forEach((item: any) => {if (item.taskId === dataArry.taskId) {item.status = '1'item.children = dataArry.generategraphUrl}});console.log(dataList.value, 999991)// emit('getSelectBsGenerategraph',);} else if (dataArry.code == 202) {msgShow.value = falsedataList.value.forEach((item: any) => {if (item.taskId === dataArry.taskId) {item.status = '2'}});// emit('getSelectBsGenerategraph',);} else if (dataArry.code == 300) {if (dataArry.queueType == 0) {dataList.value.forEach((item: any) => {if (Number(item.jsMessageSort) > 0) {// 直接修改属性item.jsMessageTotal = dataArry.total;}});} else if (dataArry.queueType == 1) {dataList.value.forEach((item: any) => {if (Number(item.jsMessageSort) > 0) {// 直接修改属性if (Number(item.jsMessageSort) > Number(dataArry.sort)) {item.jsMessageSort = item.jsMessageSort - 1;}item.jsMessageTotal = item.jsMessageTotal - 1;}});} else if (dataArry.queueType == 2) {dataList.value.forEach((item: any) => {if (Number(item.jsMessageSort) > 0) {// 直接修改属性item.jsMessageSort = item.jsMessageSort - 1;item.jsMessageTotal = item.jsMessageTotal - 1;}});}}};if (socket) {socket.onmessage = messageHandler; // 设置消息处理程序}})

2.简单应用

import { connect, close } from '@/utils/websocketService';

onMounted(() => {

    connect(store.token); //

    connect1(store.client_id); //

});