websocket心跳重连（避免断网、服务器重启等）

背景

websocket链接，为实现断网、服务器重启等特殊情况。

原理

每隔一段时间向服务器发送一次数据 即（heartCheck.start()），服务器接收数据后返回一次信息，用来证明一切正常，否则就开始启动新的定时器来尝试重新连接（websocketReconnect()一定的时间尝试重连，如此重复）。

代码

var lockReconnect = false;//避免重复连接
var wsUrl = "wss://echo.websocket.org";		// websocket链接
var ws;

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("建立链接");
	var sendData = { test: 'test' };        // 正常的请求数据
	sendData = JSON.stringify(sendData);
	ws.send(sendData);
	//心跳检测重置
	heartCheck.start();
}

function onClose(evt) {
	console.log("连接已关闭...");
}

function onMessage(evt) {
	console.log('接收消息: ' + evt.data);
	var data = JSON.parse(evt.data);
	if (data.test && data.test =='hello') {		// 对后端传过来的数据正常处理
        // 所需的正常操作
    }
	//拿到任何消息都说明当前连接是正常的
	heartCheck.start();
}

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('start');
		var self = this;
		this.timeoutObj && clearTimeout(this.timeoutObj);
		this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
		this.timeoutObj = setTimeout(function () {
			//发送测试信息，后端收到后，返回一个消息，
			ws.send("1");
			self.serverTimeoutObj = setTimeout(function () {
				ws.close();
			}, self.timeout);
		}, this.timeout)
	}
}

function onError(evt) {
	console.log('通信错误：' + evt.data);
} 

原文链接：https://www.cnblogs.com/tugenhua0707/p/8648044.html
在实际运用中对原文进行一定修改。