1.声明的var heartCheck可以理解成一个类吗？为什么可以用heartCheck.start()的方法去调用?
2.为什么在heartCheck.start()方法中,要去调用close()方法关闭一下，这个有性能损耗吗?
3.网上这个断线重连方法靠谱吗?有没有更好的方法推荐?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var lockReconnect = false;//避免重复连接
var wsUrl = "ws://localhost:8080/websocket/111"; // websocket链接
var ws;
if ("WebSocket" in window) {
function createWebSocket(){
try {
ws = new WebSocket(wsUrl);
websocketInit();
} catch (e) {
console.log('catch');
websocketReconnect(wsUrl);
}
}
createWebSocket(); // 创建websocket
function websocketInit () {
// 建立 web socket 连接成功触发事件
ws.onopen = function (evt) {
onOpen(evt);
};
// 断开 web socket 连接成功触发事件
ws.onclose = function (evt) {
websocketReconnect(wsUrl);
onClose(evt);
};
// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
onMessage(evt);
};
// 通信发生错误时触发
ws.onerror = function (evt) {
websocketReconnect(wsUrl);
onError(evt);
};
};
function onOpen(evt) {
console.log("建立连接");
//心跳检测重置
heartCheck.start();
}
function onClose(evt) {
console.log("连接已关闭...");
}
function onMessage(evt) {
console.log('接收消息: ' + evt.data);
var data = JSON.parse(evt.data);
console.log(data);
console.log(data.heart);
if (data.hasOwnProperty("heart")) {// 存在key为heart
if (data.heart=="live"){// 心跳正常 再次执行
heartCheck.start();
console.log('心跳正常 再次执行心跳检测方法！');
}
return;
}
}
function onError(evt) {
console.log('通信错误：' + evt.data);
}
function websocketReconnect(url) {
if (lockReconnect) { // 是否已经执行重连
return;
};
lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
tt && clearTimeout(tt);
var tt = setTimeout(function () {
createWebSocket(url);
lockReconnect = false;
}, 5000);
}
//心跳检测
var heartCheck = {
timeout: 30000,
timeoutObj: null,
serverTimeoutObj: null,
start: function () {
console.log('执行心跳检测');
var self = this;
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
this.timeoutObj = setTimeout(function () {
//发送测试信息，后端收到后，返回一个消息，
ws.send("heart");
self.serverTimeoutObj = setTimeout(function () {
ws.close();
}, self.timeout);
}, this.timeout)
}
}
}else{
alert("您的浏览器不支持websocket 请更换浏览器后重试！");
}
</script>
</body>
</html>
