|  |  | 
 |  |  | import { WEBSOCKET_BASE_URL } from '@/config/setting' | 
 |  |  | import { WEBSOCKET_BASE_URL } from '@/config/setting'; | 
 |  |  |  | 
 |  |  | export default class WebSocketClient { | 
 |  |  |  | 
 |  |  |     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 | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     connect() { | 
 |  |  | 
 |  |  |         this.webSocket = new WebSocket(this.url); | 
 |  |  |  | 
 |  |  |         this.webSocket.onopen = (event) => { | 
 |  |  |             console.log('WebSocket connection opened:'); | 
 |  |  |             // 连接成功后可以发送消息 | 
 |  |  |             // this.sendMessage('Hello Server!'); | 
 |  |  |             console.log('websocket connection opened.'); | 
 |  |  |             // Start the heartbeat | 
 |  |  |             this.startHeartbeat(); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onmessage = (event) => { | 
 |  |  |             console.log('WebSocket message received:', event.data); | 
 |  |  |             // console.log('websocket message received:', event.data); | 
 |  |  |             this.onMessage(event.data); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onerror = (event) => { | 
 |  |  |             console.error('WebSocket error observed:', event); | 
 |  |  |             console.error('websocket error observed:', event); | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  |         this.webSocket.onclose = (event) => { | 
 |  |  |             console.log('WebSocket connection closed!'); | 
 |  |  |             console.log('websocket connection closed!'); | 
 |  |  |             // Clear the heartbeat | 
 |  |  |             this.stopHeartbeat();    | 
 |  |  |             this.reconnect(); | 
 |  |  |         }; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     sendMessage(message) { | 
 |  |  |         if (this.webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |         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) { | 
 |  |  |         // 子类可能会重写这个方法来处理消息 | 
 |  |  |         console.log('WebSocketClient: Message received:', data); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     close() { | 
 |  |  |         if (this.webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |         if (this.webSocket && this.webSocket.readyState === WebSocket.OPEN) { | 
 |  |  |             this.webSocket.close(); | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | 
 |  |  |         }, 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; | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  | } |