直接上代码

分方法代码-util.ts中

let websock: any = null;
let global_callback: any = null;
//创建多个WebSocket实例，没想到怎么优化，先这么写
function createWebSocket(callback: any, url: any) {// || websock.readyState === WebSocket.CLOSEDif (websock == null || typeof websock !== WebSocket) {initWebSocket(callback, url);}
}
function initWebSocket(callback: any, url: any) {global_callback = callback;// 初始化websocketwebsock = new WebSocket(url);websock.onmessage = function (e: any) {websocketonmessage(e, "0");};websock.onclose = function (e: any) {websocketclose(e);};// 连接发生错误的回调方法websock.onerror = function () {console.log("WebSocket连接发生错误");};
}// 实际调用的方法
function sendSock(agentData: any) {if (websock.readyState === websock.OPEN) {// 若是ws开启状态websocketsend(agentData);} else if (websock.readyState === websock.CONNECTING) {// 若是 正在开启状态，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);} else {// 若未开启 ，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);}
}// 数据接收 type是当有多个websocket接受数据的时候 能区分哪个对应哪个
function websocketonmessage(msg: any, type) {let result: any = null;result = msg.data;switch (type) {case "0":global_callback(result);break;default:break;}
}
// 关闭链接
function closeSock() {if (websock) {websock.close();}
}// 关闭
function websocketclose(e: any) {console.log("connection closed (" + e.code + ")");
}export { sendSock, createWebSocket, closeSock };

页面使用

onMounted(() => {// 引用之前暴露出来的创建  WebSocketUrl1 是链接地址eg：ws://192.168.0.0:8080/websocket/page1createWebSocket((msg: any) => {// console.log("websocket1的回调函数收到服务器信息：" + msg);// 当接收到消息的时候 调用的方法mapFlightPositionFun(msg);}, WebSocketUrl1);
}
onBeforeUnmount(() => {closeSock();
}const mapFlightPositionFun = Data => {//  当Data开始传递数据的时候 在里面调用if (Data !== "连接成功") {}
}