|
@@ -2,7 +2,7 @@ import { ElNotification } from "element-plus";
|
|
|
|
|
|
let socket = null; // 实例对象
|
|
let socket = null; // 实例对象
|
|
let lockReconnect = false; // 是否真正建立连接
|
|
let lockReconnect = false; // 是否真正建立连接
|
|
-let timeout = 10 * 1000; // 1秒一次心跳|
|
|
|
|
|
|
+let timeout = 5 * 1000; // 5秒一次心跳|
|
|
let timeoutObj = null; // 心跳倒计时
|
|
let timeoutObj = null; // 心跳倒计时
|
|
let serverTimeoutObj = null; // 服务心跳倒计时
|
|
let serverTimeoutObj = null; // 服务心跳倒计时
|
|
let timeoutnum = null; // 断开 重连倒计时
|
|
let timeoutnum = null; // 断开 重连倒计时
|
|
@@ -33,23 +33,23 @@ const openWebsocket = (e) => {
|
|
}
|
|
}
|
|
|
|
|
|
const start = () => {
|
|
const start = () => {
|
|
- //开启心跳
|
|
|
|
|
|
+ // 开启心跳
|
|
timeoutObj && clearTimeout(timeoutObj);
|
|
timeoutObj && clearTimeout(timeoutObj);
|
|
serverTimeoutObj && clearTimeout(serverTimeoutObj);
|
|
serverTimeoutObj && clearTimeout(serverTimeoutObj);
|
|
timeoutObj = setTimeout(() => {
|
|
timeoutObj = setTimeout(() => {
|
|
- //这里发送一个心跳,后端收到后,返回一个心跳消息
|
|
|
|
- if (socket.readyState == 1) {
|
|
|
|
|
|
+ // 这里发送一个心跳,后端收到后,返回一个心跳消息
|
|
|
|
+ if (socket.readyState === WebSocket.OPEN) {
|
|
if (reLinkNum > 0) {
|
|
if (reLinkNum > 0) {
|
|
reLinkNum = 0;
|
|
reLinkNum = 0;
|
|
}
|
|
}
|
|
- //如果连接正常
|
|
|
|
- // socket.send("heartbeat");
|
|
|
|
|
|
+ // 如果连接正常,发送心跳
|
|
|
|
+ socket.send(JSON.stringify({ type: 'heartbeat' }));
|
|
} else {
|
|
} else {
|
|
- //否则重连
|
|
|
|
|
|
+ // 否则重连
|
|
reconnect();
|
|
reconnect();
|
|
}
|
|
}
|
|
serverTimeoutObj = setTimeout(() => {
|
|
serverTimeoutObj = setTimeout(() => {
|
|
- //超时关闭
|
|
|
|
|
|
+ // 超时关闭
|
|
socket.close();
|
|
socket.close();
|
|
}, timeout);
|
|
}, timeout);
|
|
}, timeout);
|
|
}, timeout);
|
|
@@ -60,6 +60,7 @@ const reconnect = () => {
|
|
if (lockReconnect) {
|
|
if (lockReconnect) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
+ close();
|
|
lockReconnect = true;
|
|
lockReconnect = true;
|
|
//没连接上会一直重连,设置延迟避免请求过多
|
|
//没连接上会一直重连,设置延迟避免请求过多
|
|
timeoutnum && clearTimeout(timeoutnum);
|
|
timeoutnum && clearTimeout(timeoutnum);
|
|
@@ -73,16 +74,16 @@ const reconnect = () => {
|
|
}, 1000);
|
|
}, 1000);
|
|
} else {
|
|
} else {
|
|
console.log(`websocket超过最大重连限制,已手动关闭`);
|
|
console.log(`websocket超过最大重连限制,已手动关闭`);
|
|
- socket && socket?.close && socket?.close();
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//重置心跳
|
|
//重置心跳
|
|
const reset = () => {
|
|
const reset = () => {
|
|
- //清除时间
|
|
|
|
|
|
+ // 清除时间
|
|
clearTimeout(timeoutObj);
|
|
clearTimeout(timeoutObj);
|
|
clearTimeout(serverTimeoutObj);
|
|
clearTimeout(serverTimeoutObj);
|
|
- //重启心跳
|
|
|
|
|
|
+ // 重启心跳
|
|
start();
|
|
start();
|
|
}
|
|
}
|
|
|
|
|
|
@@ -93,30 +94,33 @@ const sendWebsocket = (e) => {
|
|
const webSocketOnError = (e) => {
|
|
const webSocketOnError = (e) => {
|
|
initWebSocket();
|
|
initWebSocket();
|
|
reconnect();
|
|
reconnect();
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
//服务器返回的数据
|
|
//服务器返回的数据
|
|
const webSocketOnMessage = (e) => {
|
|
const webSocketOnMessage = (e) => {
|
|
- //window自定义事件[下面有说明]
|
|
|
|
|
|
+ const data = JSON.parse(JSON.parse(e.data));
|
|
|
|
+ reset();
|
|
|
|
+ console.log(11111, data);
|
|
|
|
+ // 处理其他类型的消息
|
|
window.dispatchEvent(
|
|
window.dispatchEvent(
|
|
new CustomEvent("onmessageWS", {
|
|
new CustomEvent("onmessageWS", {
|
|
detail: {
|
|
detail: {
|
|
- data: JSON.parse(e?.data),
|
|
|
|
|
|
+ data,
|
|
},
|
|
},
|
|
})
|
|
})
|
|
);
|
|
);
|
|
- reset();
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const closeWebsocket = (e) => {
|
|
const closeWebsocket = (e) => {
|
|
- reconnect();
|
|
|
|
|
|
+ // reconnect();
|
|
|
|
+ close();
|
|
}
|
|
}
|
|
|
|
|
|
//断开连接
|
|
//断开连接
|
|
const close = () => {
|
|
const close = () => {
|
|
//WebSocket对象也有发送和关闭的两个方法,只需要在自定义方法中分别调用send()和close()即可实现。
|
|
//WebSocket对象也有发送和关闭的两个方法,只需要在自定义方法中分别调用send()和close()即可实现。
|
|
- socket.close();
|
|
|
|
|
|
+ socket && socket?.close && socket?.close();
|
|
|
|
+ socket = null;
|
|
}
|
|
}
|
|
//具体问题具体分析,把需要用到的方法暴露出去
|
|
//具体问题具体分析,把需要用到的方法暴露出去
|
|
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };
|
|
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };
|