|  |  | 
 |  |  | export const createWs = () => { | 
 |  |  |     console.log('Creating WebSocket connection...'); | 
 |  |  |     const webSocket = new WebSocket('ws://127.0.0.1:9090/wcs/map/websocket'); | 
 |  |  | import { WEBSOCKET_BASE_URL } from '@/config/setting'; | 
 |  |  |  | 
 |  |  |     // 连接打开时触发 | 
 |  |  |     webSocket.onopen = function (event) { | 
 |  |  |         console.log('WebSocket connection opened:', event); | 
 |  |  |         // 在此添加可以在连接打开时发送的任何消息 | 
 |  |  |         // webSocket.send('Hello Server!'); | 
 |  |  |     }; | 
 |  |  | export default class WebSocketClient { | 
 |  |  |  | 
 |  |  |     // 从服务器接收到消息时触发 | 
 |  |  |     webSocket.onmessage = function (event) { | 
 |  |  |         console.log('WebSocket message received:', event.data); | 
 |  |  |         // 在这里处理接收到的消息 | 
 |  |  |     }; | 
 |  |  |     constructor(path) { | 
 |  |  |         this.url = WEBSOCKET_BASE_URL + path; | 
 |  |  |         this.webSocket = null; | 
 |  |  |         this.heartbeatInterval = null; // Store the interval ID | 
 |  |  |         this.heartbeatFrequency = 30000; // Heartbeat every 30 seconds | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // 出现错误时触发 | 
 |  |  |     webSocket.onerror = function (event) { | 
 |  |  |         console.error('WebSocket error observed:', event); | 
 |  |  |         // 在这里处理WebSocket错误 | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 连接关闭时触发 | 
 |  |  |     webSocket.onclose = function (event) { | 
 |  |  |         console.log('WebSocket connection closed:', event); | 
 |  |  |         // 在这里处理连接关闭事件 | 
 |  |  |         // 你可能想要重新连接或对用户进行友好提示 | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     // 请求关闭WebSocket连接(主动关闭),你可以从其他函数调用这个 | 
 |  |  |     const closeWebSocket = () => { | 
 |  |  |         if (webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |             webSocket.close(); // 这将触发'onclose'事件 | 
 |  |  |     connect() { | 
 |  |  |         if (!this.url) { | 
 |  |  |             console.error('WebSocketClient: Cannot connect without url.'); | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return { | 
 |  |  |         webSocket, | 
 |  |  |         closeWebSocket | 
 |  |  |     }; | 
 |  |  | }; | 
 |  |  |         this.webSocket = new WebSocket(this.url); | 
 |  |  |  | 
 |  |  |         this.webSocket.onopen = (event) => { | 
 |  |  |             console.log('websocket connection opened.'); | 
 |  |  |             // Start the heartbeat | 
 |  |  |             this.startHeartbeat(); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onmessage = (event) => { | 
 |  |  |             // console.log('websocket message received:', event.data); | 
 |  |  |             this.onMessage(event.data); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onerror = (event) => { | 
 |  |  |             console.error('websocket error observed:', event); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onclose = (event) => { | 
 |  |  |             console.log('websocket connection closed!'); | 
 |  |  |             // Clear the heartbeat | 
 |  |  |             this.stopHeartbeat();    | 
 |  |  |             this.reconnect(); | 
 |  |  |         }; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     sendMessage(message) { | 
 |  |  |         if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |             this.webSocket.send(message); | 
 |  |  |         } else { | 
 |  |  |             console.error('WebSocketClient: Cannot send message, WebSocket connection is not open.'); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // Override | 
 |  |  |     onMessage(data) { | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     close() { | 
 |  |  |         if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |             this.webSocket.close(); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     reconnect() { | 
 |  |  |         setTimeout(() => { | 
 |  |  |             console.log('WebSocketClient: Attempting to reconnect...'); | 
 |  |  |             this.connect(); | 
 |  |  |         }, 3000); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     startHeartbeat() { | 
 |  |  |         if(this.heartbeatInterval) { | 
 |  |  |             clearInterval(this.heartbeatInterval); | 
 |  |  |         } | 
 |  |  |         this.heartbeatInterval = setInterval(() => { | 
 |  |  |             this.sendMessage('1'); | 
 |  |  |         }, this.heartbeatFrequency); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     stopHeartbeat() { | 
 |  |  |         if (this.heartbeatInterval) { | 
 |  |  |             clearInterval(this.heartbeatInterval); | 
 |  |  |             this.heartbeatInterval = null; | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | } |