import { Notification } from "element-ui"; let hasShownNotification = false; // WebSocket连接实例 let socket = null; // 是否正在尝试重连 let lockReconnect = false; // 心跳间隔,20秒 const timeout = 20 * 1000; // 心跳定时器 let timeoutObj = null; // 服务器无响应超时定时器 let serverTimeoutObj = null; // 重连定时器 let reconnectTimeout = null; // 初始化WebSocket连接 const initWebSocket = () => { if ("WebSocket" in window) { const protocol = window.location.protocol === "https:" ? "wss://" : "ws://"; const wsPath = "/api/xymanager/websocket"; const wshost = window.location.hostname === "localhost" ? "61.169.135.146:40085" : window.location.host; const wsUrl = protocol + wshost + wsPath; socket = new WebSocket(wsUrl); socket.onerror = webSocketOnError; socket.onmessage = webSocketOnMessage; socket.onclose = closeWebsocket; socket.onopen = openWebsocket; } else { // 浏览器不支持WebSocket console.error("您的浏览器不支持WebSocket"); // 这里可以添加更友好的提示方式,如使用Element UI的Notification } }; // 打开WebSocket连接时执行 const openWebsocket = () => { console.log("WebSocket链接成功"); startHeartbeat(); }; // 启动心跳 const startHeartbeat = () => { timeoutObj = setTimeout(() => { if (socket.readyState === WebSocket.OPEN) { socket.send("1"); // 发送心跳消息 console.log("发送心跳消息以保持WebSocket连接活跃"); // 如果需要,可以在这里添加检测服务器响应的逻辑 // 例如,设置一个服务器响应超时检测 // 递归调用以继续发送心跳 startHeartbeat(); } else { // 如果WebSocket已经关闭,则不再发送心跳 console.log("WebSocket连接已关闭,停止发送心跳"); clearTimeout(timeoutObj); // 清除定时器 } }, timeout); }; // WebSocket错误处理 const webSocketOnError = (e) => { console.error("WebSocket发生错误:", e); // 这里通常不需要立即重连,因为onclose会处理重连逻辑 }; // 处理接收到的消息 const webSocketOnMessage = (e) => { // 自定义事件,将接收到的数据派发给其他监听器 window.dispatchEvent( new CustomEvent("onmessageWS", { detail: { data: e.data } }) ); // 收到消息后重置心跳定时器 resetHeartbeat(); }; // WebSocket关闭处理 const closeWebsocket = (e) => { console.log("WebSocket连接已关闭:", e); // if (!hasShownNotification) { // Notification({ // title: "告警", // message: "WebSocket连接已关闭", // position: "bottom-right", // type: "warning", // duration: 2000, // }); // hasShownNotification = true; // 更新状态,防止再次显示 // } // 清除所有定时器 clearTimeout(timeoutObj); clearTimeout(serverTimeoutObj); // 设置重连定时器 reconnectTimeout = setTimeout(() => { initWebSocket(); }, 60 * 1000); // 60秒后重连 }; // 重置心跳定时器 const resetHeartbeat = () => { clearTimeout(timeoutObj); clearTimeout(serverTimeoutObj); startHeartbeat(); }; // 发送消息到WebSocket服务器 const sendWebsocket = (data) => { if (socket && socket.readyState === WebSocket.OPEN) { socket.send(data); } else { console.error("WebSocket未连接,无法发送消息"); } }; // 关闭WebSocket连接(通常不需要在前端主动调用,除非有特定需求) const close = () => { if (socket) { socket.close(); } }; // 导出相关函数,以便在其他地方使用 export default { initWebSocket, sendWebsocket, close }; // 注意:关于离开页面不断开WebSocket连接的需求,这通常取决于浏览器的行为。 // 在一些情况下,浏览器会在页面卸载时自动关闭WebSocket连接。