最近被问到一个项目中比较常见的问题，因为之前自己只是用过，但并未真正了解具体是怎么实现的，所以今天抽时间整理了下，避免下次再掉坑中。。
一般toB的项目中，如果有实时通信的需求，目前较为广泛的都会采用websocket来实现客户端与服务端的双向通信，其实主要原理是客户端定时向服务端发送消息，如果在规定时间内，收到服务端推送回的消息，则说明通信正常，否则就挂掉了，及时关闭连接；
今天简单封装了下，websocket中的心跳重连，主要代码如下：
class HeartSocket { constructor(options) { this.url = options.url; //请求路径 this.timeout = options.timeout;//心跳超时时间 毫秒 this.isHeart = options.isHeart;//是否开启心跳 this.isReconnection = options.isReconnection; //是否断开重连 this.ws = null; ///WebSocket的引用 this.status = null;//记录状态 this.lockReconnect = false,//避免重复连接 this.timeoutObj = null;//模拟延时器1 this.serverTimeoutObj = null;//模拟延时器2 } reConnection() { if (this.lockReconnect) return; this.lockReconnect = true; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { this.ws = new WebSocket(this.url); } else { alert('Not support websocket') } //打开连接 this.ws.onopen = (e) => { this.status = 'open'; console.log('socket连接成功', e) if (this.isHeart) this.heartCheck(); } //消息交互 this.ws.onmessage = (e) => { console.log('后台接收到前台传值，还有心跳...'); //心跳检测重置 this.heartCheck(); } //关闭连接 this.ws.onclose = (e) => { console.log('关闭连接', e); this.closeSocket(e); } //报错 this.ws.onerror = (e) => { console.log('error', e); this.closeSocket(e); } } resetHeart() { this.timeoutObj && clearTimeout(this.timeoutObj); this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj); } heartCheck() { console.log('开始测试心跳'); this.timeoutObj = setTimeout(() => { //这里发送一个心跳，后端收到后，返回一个心跳消息， console.log('发送消息，测试后台是否运行中...'); //任意发一个消息过去，后台接收，如果在onmessage收到消息，说明后台没有挂掉，有心跳 this.ws.send("666"); this.serverTimeoutObj = setTimeout(() => { console.log("后台挂掉，没有心跳了...."); console.log("打印websocket的地址:" + this.url); this.ws.close(); // createWebSocket(); }, this.timeout); this.lockReconnect = false; }, this.timeout); } closeSocket(e) { this.resetHeart(); if (this.status !== 'close') { console.log('断开，重连', e) if (this.isReconnection) { console.log("正在重连，当前时间" + new Date()) //重连 this.reConnection(); } } else { //手动关闭 console.log('手动关闭', e) } } close() { this.status = 'close'; this.resetHeart(); return this.ws.close(); } sendMsg(data) { let msg = JSON.stringify(data); return this.ws.send(msg) } }
调用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>websocket心跳重连</title>
</head>
<body>
<div>
<input type="text" placeholder="请输入路径" value="ws://172.16.253.166:48081/websocket" id="url">
<button onclick="concat()"> concat </button>
<button onclick="closeWebSocket()"> close </button>
</div>
<script src="./index.js"></script>
<script>
let url = document.getElementById('url').value;
const ws = new HeartSocket({
url: url,
isHeart: true, //是否心跳
timeout: 10000,// 心跳间隔时间
isReconnection: true, //是否断开后自动重连
})
function concat() {
//判断客户端是否联网
// if (navigator.onLine) {
// console.log('网络已连接');
// } else {
// console.log('已断网');
// }
ws.reConnection();
}
// 发送消息
//ws.sendMsg(message);
//关闭连接
function closeWebSocket() {
if (ws) ws.close();
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
ws.close();
}
</script>
</body>
</html>
如有问题，还请及时指正，蟹蟹~