import{ref,onUnmounted}fromvue;importCookiesfromjs-cookie;exportfunctionuseWebSocket(baseUrl){constmessageref(null);constisConnectedref(false);consterrorref(null);constsocketref(null);// 新增专门存储不同类型的数据constgatewayDataref(null);// 存储第二种数据网关数据constdroneDataref(null);// 存储第二种数据无人机数据constresponseDataref(null);// 存储第三种数据响应数据constaliveDataref(null);// 存储第一种数据心跳数据constdebuggingProgressref(null)// 远程调试进度数据// 从 Cookies 获取 tokenconstgetToken(){returnCookies.get(Admin-Token)||;};constconnect(){error.valuenull;consttokengetToken();if(!token){error.value未找到认证 token请先登录;console.error(Token 不存在);return;}consturlWithToken${baseUrl}?WsToken${encodeURIComponent(token)};console.log(连接 WebSocket使用 token:,urlWithToken);try{socket.valuenewWebSocket(urlWithToken);socket.value.onopen(){isConnected.valuetrue;console.log(V);};// 改造后的 onmessage 方法socket.value.onmessageevent{try{console.log(原始数据:,event.data);// 解析第一层 JSONconstparsedDataJSON.parse(event.data);// 第一种数据心跳数据 {type: alive}if(parsedData.typealive){console.log(接收到心跳数据:,parsedData);aliveData.valueparsedData;message.valueparsedData;// 保持向后兼容return;}// 网关数据data 字段是字符串需要 JSON.parseif(parsedData.biz_codegatewayparsedData.data){console.log(接收到网关数据);try{letgatewayInnerDatanull;// 网关数据需要解析字符串转对象if(typeofparsedData.datastring){gatewayInnerDataJSON.parse(parsedData.data);}else{gatewayInnerDataparsedData.data;}// 远程调试进度数据网关数据中的特殊类型if(gatewayInnerData.biz_codeprogress){console.log(接收到远程调试进度数据,gatewayInnerData);debuggingProgress.value{method:gatewayInnerData.method,result:gatewayInnerData.result,status:gatewayInnerData.status,percent:gatewayInnerData.percent,biz_code:gatewayInnerData.biz_code,timestamp:parsedData.timestamp,version:parsedData.version};console.log(处理后的远程调试进度数据:,debuggingProgress.value);return;}// 普通网关数据gatewayData.valuegatewayInnerData.gateway;// 合并数据到 message.value 保持向后兼容message.value{gateway:gatewayInnerData.gateway,timestamp:gatewayInnerData.timestamp};console.log(处理后的网关数据:,gatewayData.value);}catch(innerError){console.error(解析网关数据错误:,innerError);}return;}// 无人机数据data 字段已经是对象不需要 JSON.parseif(parsedData.biz_codedroneparsedData.data){console.log(接收到无人机数据,parsedData.data);try{// 无人机的 data 直接就是对象不需要解析constdroneInnerDataparsedData.data;droneData.valuedroneInnerData.drone;// 合并数据到 message.value 保持向后兼容message.value{drone:droneInnerData.drone,timestamp:droneInnerData.timestamp};console.log(处理后的无人机数据:,droneData.value);}catch(innerError){console.error(解析无人机数据错误:,innerError);}return;}// 响应数据data 字段是字符串需要 JSON.parseif(parsedData.biz_codemqtt_sync_response){console.log(接收到响应数据:,parsedData);try{letresponseInnerDatanull;// 响应数据需要解析字符串转对象if(typeofparsedData.datastring){responseInnerDataJSON.parse(parsedData.data);}else{responseInnerDataparsedData.data;}responseData.value{result:responseInnerData.result,biz_code:parsedData.biz_code,timestamp:parsedData.timestamp,version:parsedData.version};// 也放到 message.value 中保持兼容message.valueresponseData.value;console.log(处理后的响应数据:,responseData.value);}catch(innerError){console.error(解析响应数据错误:,innerError);}return;}// 其他未知类型的数据console.log(未知类型数据:,parsedData);message.valueparsedData;}catch(parseError){console.error(解析错误:,parseError);message.valueevent.data;}};socket.value.oncloseevent{isConnected.valuefalse;console.log(WebSocket连接关闭,event.code,event.reason);};socket.value.onerrorevent{error.value连接失败: (event.message||未知错误);console.error(WebSocket错误:,event);};}catch(err){error.value创建连接失败: err.message;}};// 检查 token 是否存在consthasToken(){return!!getToken();};// 获取 token 信息用于调试constgetTokenInfo(){consttokengetToken();if(!token)returnnull;return{exists:true,length:token.length,preview:token.substring(0,20)...};};// 发送消息constsenddata{console.log(发送数据:,data);if(socket.valuesocket.value.readyStateWebSocket.OPEN){constmessageToSend{...data};socket.value.send(JSON.stringify(messageToSend));console.log(发送消息:,messageToSend);}};// 断开连接constdisconnect(){if(socket.value){socket.value.close(1000,用户主动断开);socket.valuenull;}};// 重新连接token 可能已更新constreconnectWithNewToken(){disconnect();setTimeout(()connect(),100);};onUnmounted((){disconnect();});return{message,// 向后兼容gatewayData,// 第二种数据 - 网关数据droneData,// 第二种数据 - 无人机数据responseData,// 第三种数据 - 响应数据aliveData,// 第一种数据 - 心跳数据debuggingProgress,isConnected,error,connect,send,disconnect,reconnectWithNewToken,hasToken,getTokenInfo};}