|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|