>[info] 加心跳包的目的是为了维持链接，正常的聊天室等工具都是依赖心跳包进行一个长连接的维持，前后端都会有相关的代码逻辑处理
前端逻辑代码更新如下所示：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<script>
// var ws = new WebSocket('ws://123.56.71.69:1234');
// ws.onopen = function(){
// var uid = '{"id":"uid2","msg":"早安123"}';
// ws.send(uid);
// console.log("给服务端发送一个字符串："+uid);
// setInterval(function () {
// ws.send(uid);
// console.log("心跳包给服务端发送一个字符串："+uid);
// }, 20000)
// };
// ws.onmessage = function(e){
// // alert(e.data);
// console.log("收到服务端的消息：" + e.data);
// };
// ws.onerror=function (e) {
// console.log(e);
// }
function longSock(url, fn, intro = '') {
let lockReconnect = false; //避免重复连接
let timeoutFlag = true;
let timeoutSet = null;
let reconectNum = 0;
const timeout = 30000; //超时重连间隔
let ws;
function reconnect() {
if (lockReconnect) return;
lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
if (reconectNum < 3) {
setTimeout(function() {
timeoutFlag = true;
createWebSocket();
console.info(`${intro}正在重连第${reconectNum + 1}次`);
reconectNum++;
lockReconnect = false
},
5000) //这里设置重连间隔(ms)
}
}
//心跳检测
const heartCheck = {
timeout: 5000,
//毫秒
timeoutObj: null,
serverTimeoutObj: null,
reset: function() {
clearInterval(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
return this
},
start: function() {
const self = this;
let count = 0;
this.timeoutObj = setInterval(() =>{
if (count < 2) {
if (ws.readyState === 1) {
ws.send('HeartBeat');
console.info(`${intro}HeartBeat第${count + 1}次`)
}
count++
} else {
console.log('断线了');
ws.close()
createWebSocket();
// clearInterval(this.timeoutObj);
// count = 0;
// if (ws.readyState === 0 && ws.readyState === 1) {
// ws.close()
// }
}
},
self.timeout)
}
};
const createWebSocket = () =>{
console.info(`${intro}创建11`);
// timeoutSet = setTimeout(() =>{
// if (timeoutFlag && reconectNum < 3) {
// console.info(`${intro}重连22`);
// reconectNum++;
// createWebSocket()
// }
// },
// timeout);
ws = new WebSocket(url);
ws.onopen = () =>{
reconectNum = 0;
timeoutFlag = false;
clearTimeout(timeoutSet);
heartCheck.reset().start()
var uid = '{"id":"uid2","msg":"早安123"}';
ws.send(uid);
console.log("给服务端发送一个字符串：" + uid);
setInterval(function() {
ws.send(uid);
console.log("心跳包给服务端发送一个字符串：" + uid);
},
20000)
};
ws.onmessage = evt =>{
heartCheck.reset().start();
// console.info(evt);
if (evt.data === 'HeartBeat') return;
fn(evt, ws)
};
ws.onclose = e =>{
console.info(`${intro}关闭11`, e.code);
if (e.code !== 1000) {
timeoutFlag = false;
clearTimeout(timeoutSet);
reconnect()
} else {
clearInterval(heartCheck.timeoutObj);
clearTimeout(heartCheck.serverTimeoutObj)
}
};
ws.onerror = function() {
console.info(`${intro}错误11`);
reconnect() //重连
}
};
createWebSocket();
return ws
}
//方法调用
const handler = (evt, ws) => {
//evt 是 websockett数据
//ws 是请求名称，方便关闭websocket
console.log('收到服务端消息'+evt.data)
}
longSock(`ws://123.56.71.69:1234`, handler, '数据大屏');
</script>
</body>
</html>
```