yudao-dev/src/views/OperationalOverview/websocket.js
‘937886381’ 0aa509e430 修改bug
2024-03-27 09:30:16 +08:00

207 lines
6.4 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 发起websocket请求函数
* @param {string} url ws连接地址
* @param {Object} agentData 传给后台的参数
* @param {function} successCallback 接收到ws数据对数据进行处理的回调函数
* @param {function} errCallback ws连接错误的回调函数
*/
export function WsConnect(url, agentData, successCallback, errCallback) {
this.wsUrl = url;
this.wsObj = null;
// 是否执行重连 true/不执行 false/执行
this.lockReconnect = false;
// 重连定时器
this.wsCreateHandler = null;
// 连接成功,执行回调函数
this.messageCallback = successCallback;
// 连接失败,执行回调函数
this.errorCallback = errCallback;
// 发送给后台的数据
this.sendDatas = agentData;
// 创建ws函数
this.createWebSoket = () => {
if (typeof WebSocket === "undefined") {
writeToScreen("您的浏览器不支持WebSocket无法获取数据");
return false;
}
try {
this.wsObj = new WebSocket(url);
initWsEventHandle();
} catch (e) {
writeToScreen("连接异常,开始重连");
reconnect();
}
};
// 手动关闭websocket 这里手动关闭会执行onclose事件
this.closeWebsocket = () => {
if (this.wsObj) {
writeToScreen("手动关闭websocket");
this.wsObj.close(); // 关闭websocket
// this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
// 关闭重连
this.lockReconnect = true;
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
// 关闭心跳检查
heartCheck.stop();
}
};
const initWsEventHandle = () => {
try {
// 连接成功
this.wsObj.onopen = (event) => {
onWsOpen(event);
heartCheck.start();
};
// 监听服务器端返回的信息
this.wsObj.onmessage = (event) => {
onWsMessage(event);
heartCheck.start();
};
this.wsObj.onclose = (event) => {
writeToScreen("onclose执行关闭事件");
onWsClose(event);
};
this.wsObj.onerror = (event) => {
writeToScreen("onerror执行error事件开始重连");
onWsError(event);
reconnect();
};
} catch (err) {
writeToScreen("绑定事件没有成功,开始重连");
reconnect();
}
};
const onWsOpen = (event) => {
writeToScreen("CONNECT");
// // 客户端与服务器端通信
// wsObj.send('我发送消息给服务端');
// 添加状态判断当为OPEN时发送消息
if (this.wsObj.readyState === this.wsObj.OPEN) {
// wsObj.OPEN = 1
// 发给后端的数据需要字符串化
this.wsObj.send(JSON.stringify(this.sendDatas));
}
if (this.wsObj.readyState === this.wsObj.CLOSED) {
// wsObj.CLOSED = 3
writeToScreen("wsObj.readyState=3, ws连接异常开始重连");
reconnect();
this.errorCallback(event);
}
};
const onWsMessage = (event) => {
const jsonStr = event.data;
// writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
this.messageCallback(jsonStr);
};
const onWsClose = (event) => {
writeToScreen("DISCONNECT");
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
// e.code !== 1000 表示非正常关闭。
console.log("onclose event: ", event);
if (event && event.code !== 1000) {
writeToScreen("非正常关闭");
this.errorCallback(event);
// 如果不是手动关闭,这里的重连会执行;如果调用了手动关闭函数,这里重连不会执行
reconnect();
}
};
const onWsError = (event) => {
writeToScreen("onWsError: ", event.data);
this.errorCallback(event);
};
const writeToScreen = (massage) => {
console.log(massage);
};
// 重连函数
const reconnect = () => {
if (this.lockReconnect) {
return;
}
writeToScreen("5秒后重连");
this.lockReconnect = true;
// 没连接上会一直重连,设置延迟避免请求过多
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
this.wsCreateHandler = setTimeout(() => {
writeToScreen("重连..." + this.wsUrl);
this.createWebSoket();
this.lockReconnect = false;
writeToScreen("重连完成");
}, 5000);
};
// 心跳检查看看websocket是否还在正常连接中不需要服务端返回单向的
let _this = this
let heartCheck = {
timeout: 55000,
timeoutObj: null,
// 重启
reset() {
clearTimeout(this.timeoutObj);
this.start();
},
// 停止
stop() {
clearTimeout(this.timeoutObj);
},
// 开启定时器
start() {
this.timeoutObj && clearTimeout(this.timeoutObj);
this.timeoutObj = setTimeout(() => {
writeToScreen("心跳检查发送ping到后台");
try {
const datas = { ping: true };
_this.wsObj.send(JSON.stringify(datas));
} catch (err) {
writeToScreen("发送ping异常");
}
}, this.timeout);
},
};
// 心跳检查看看websocket是否还在正常连接中,和服务端通信,双向的)
// let heartCheck = {
// timeout: 15000,
// timeoutObj: null,
// serverTimeoutObj: null,
// // 重启
// reset() {
// clearTimeout(this.timeoutObj);
// clearTimeout(this.serverTimeoutObj);
// this.start();
// },
// // 停止
// stop() {
// clearTimeout(this.timeoutObj);
// clearTimeout(this.serverTimeoutObj);
// },
// // 开启定时器
// start() {
// this.timeoutObj && clearTimeout(this.timeoutObj);
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
// // 15s之内如果没有收到后台的消息则认为是连接断开了需要重连
// this.timeoutObj = setTimeout(() => {
// writeToScreen("心跳检查发送ping到后台");
// try {
// const datas = { ping: true };
// _this.wsObj.send(JSON.stringify(datas));
// } catch (err) {
// writeToScreen("发送ping异常");
// }
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
// // 内嵌定时器
// this.serverTimeoutObj = setTimeout(() => {
// writeToScreen("没有收到后台的数据,重新连接");
// reconnect();
// }, this.timeout);
// }, this.timeout);
// },
// };
}