|
|
@ -2,29 +2,38 @@ |
|
|
* Author: Fu Guobin |
|
|
* Author: Fu Guobin |
|
|
* Date: 2022/08/02 |
|
|
* Date: 2022/08/02 |
|
|
* Last Modified by: Fu Guobin |
|
|
* Last Modified by: Fu Guobin |
|
|
* Last Modified time: 2023/08/28 |
|
|
* Last Modified time: 2023/09/15 |
|
|
* Copyright:Daniel(Fu Guobin) |
|
|
* Copyright:Daniel(Fu Guobin) |
|
|
* Description:websocket函数封装 |
|
|
* Description:websocket方法封装 |
|
|
*/ |
|
|
*/ |
|
|
import { reactive, toRefs } from 'vue'; |
|
|
|
|
|
import { tableStore } from '@/store/modules/table'; |
|
|
|
|
|
import mitt from '@/plugins/bus'; |
|
|
import mitt from '@/plugins/bus'; |
|
|
// const tableStoreCounter = tableStore();
|
|
|
|
|
|
|
|
|
|
|
|
class WebSocketService { |
|
|
class WebSocketService { |
|
|
|
|
|
url: string; |
|
|
websocket: WebSocket | null; |
|
|
websocket: WebSocket | null; |
|
|
isInitialized: boolean; |
|
|
isInitialized: boolean; |
|
|
isConnected: boolean; |
|
|
isConnected: boolean; |
|
|
|
|
|
heartbeatInterval: number; |
|
|
|
|
|
reconnectInterval: number; |
|
|
|
|
|
maxReconnectAttempts: number; |
|
|
|
|
|
reconnectAttempts: number; |
|
|
data: any; |
|
|
data: any; |
|
|
|
|
|
|
|
|
constructor() { |
|
|
constructor() { |
|
|
|
|
|
this.url = ''; |
|
|
this.websocket = null; |
|
|
this.websocket = null; |
|
|
this.isInitialized = false; |
|
|
this.isInitialized = false; |
|
|
this.isConnected = false; |
|
|
this.isConnected = false; //握手
|
|
|
|
|
|
this.heartbeatInterval = 30000; // 默认心跳30秒
|
|
|
|
|
|
this.reconnectInterval = 5000; // 默认重连5秒
|
|
|
|
|
|
this.maxReconnectAttempts = 5; // 默认尝试重连5次
|
|
|
|
|
|
this.reconnectAttempts = 0; |
|
|
this.data = null; |
|
|
this.data = null; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
initialize(url: string): void { |
|
|
initialize(url: string): void { |
|
|
|
|
|
//初始化
|
|
|
|
|
|
this.url = url; |
|
|
this.websocket = new WebSocket(url); |
|
|
this.websocket = new WebSocket(url); |
|
|
this.websocket.onopen = this.onOpen.bind(this); |
|
|
this.websocket.onopen = this.onOpen.bind(this); |
|
|
this.websocket.onclose = this.onClose.bind(this); |
|
|
this.websocket.onclose = this.onClose.bind(this); |
|
|
@ -34,24 +43,24 @@ class WebSocketService { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onOpen(): void { |
|
|
onOpen(): void { |
|
|
this.isConnected = true; |
|
|
this.isConnected = true; // 进行握手操作，如果需要的话
|
|
|
// 进行握手操作，如果需要的话
|
|
|
this.reconnectAttempts = 0; // 重置重连次数
|
|
|
|
|
|
this.startHeartbeat(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onClose(): void { |
|
|
onSend(data: any): void { |
|
|
this.isConnected = false; |
|
|
//发送消息处理
|
|
|
// 关闭WebSocket连接的处理逻辑
|
|
|
console.log('websocketSend:', JSON.stringify(data)); |
|
|
|
|
|
if (this.isConnected) { |
|
|
|
|
|
this.websocket?.send(JSON.stringify(data)); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onError(error: Event): void { |
|
|
|
|
|
console.error('WebSocket error:', error); |
|
|
|
|
|
// 错误处理的逻辑
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMessage(event: MessageEvent): void { |
|
|
onMessage(event: MessageEvent): void { |
|
|
|
|
|
//获取消息处理
|
|
|
if (event.data != '连接成功') { |
|
|
if (event.data != '连接成功') { |
|
|
const response = JSON.parse(event.data); |
|
|
const response = JSON.parse(event.data); |
|
|
console.log("response:",response); |
|
|
console.log('response:', response); |
|
|
this.data = response; |
|
|
this.data = response; |
|
|
// 处理返回的数据
|
|
|
// 处理返回的数据
|
|
|
if (response.code === 'datareal') { |
|
|
if (response.code === 'datareal') { |
|
|
@ -61,19 +70,40 @@ class WebSocketService { |
|
|
console.log('waring'); |
|
|
console.log('waring'); |
|
|
mitt.emit('waringMessage', response); |
|
|
mitt.emit('waringMessage', response); |
|
|
} |
|
|
} |
|
|
// const oldData = tableStoreCounter.tableDataStore;
|
|
|
|
|
|
// const index = oldData.findIndex((obj) => obj.id === response.id);
|
|
|
|
|
|
// if (index !== -1) {
|
|
|
|
|
|
// oldData.splice(index, 1, response);
|
|
|
|
|
|
// }
|
|
|
|
|
|
// tableStoreCounter.tableDataAction(oldData);
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
send(data: any): void { |
|
|
onClose(): void { |
|
|
console.log('websocketSend:', JSON.stringify(data)); |
|
|
// 关闭WebSocket连接的处理逻辑
|
|
|
if (this.isConnected) { |
|
|
this.isConnected = false; |
|
|
this.websocket?.send(JSON.stringify(data)); |
|
|
this.stopHeartbeat(); |
|
|
|
|
|
if (this.reconnectAttempts < this.maxReconnectAttempts) { |
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
this.reconnectAttempts++; |
|
|
|
|
|
this.initialize(this.url); |
|
|
|
|
|
}, this.reconnectInterval); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onError(error: Event): void { |
|
|
|
|
|
console.error('WebSocket error:', error); |
|
|
|
|
|
// 错误处理的逻辑
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
startHeartbeat() { |
|
|
|
|
|
// 发送心跳
|
|
|
|
|
|
this.heartbeatInterval = setInterval(() => { |
|
|
|
|
|
if (this.websocket?.readyState === WebSocket.OPEN) { |
|
|
|
|
|
this.websocket.send('ping'); //心跳消息
|
|
|
|
|
|
} |
|
|
|
|
|
}, this.heartbeatInterval); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
stopHeartbeat() { |
|
|
|
|
|
// 停止心跳
|
|
|
|
|
|
if (this.heartbeatInterval) { |
|
|
|
|
|
clearInterval(this.heartbeatInterval); |
|
|
|
|
|
this.heartbeatInterval = 0; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
fuguobin
1 year ago