SpringBoot 整合 websocket （四）——前端封装重连设置、心跳监测，服务器监测

上篇文章简单讲了下前端websocket的封装，实现了socket通讯的整个流程，但是并没有考虑正式使用过程中的安全性。例如服务器断线就会导致前端不断的去连接；而且有的浏览器在长时间不发送消息时也可能会断开，而一旦断开，下次发送消息时就会发送不成功。为了解决这些问题，我们就要限制重连的次数以及定时的去和后端socket通讯，以保证前后端始终在握手状态。

重连设置

上一版如果后端服务宕机了，前端会不停的发起重连，效果如下图，火狐浏览器直接就挂了

 防止瞬间发起N次重连请求，就要新增一个重连函数，并且设置最大重连次数。

class HnWebSocket{
    isEmpty(obj){
			return obj == ""  || obj == undefined  ||  obj == null || obj == "null";
	}	
	/**
	 * 构造函数
	 * @param url 路径
	 * @param isAutoConnect 是否自动连接 true/false
	 * @param receiveMsgFun 接收消息后处理函数
	 * @param reconnectTotalNum 重连总的次数，超过了就断开，不填写默认5次
	 */
	constructor(url,isAutoConnect,receiveMsgFun,reconnectTotalNum) {
		this.reconnectTotalNum = this.isEmpty(reconnectTotalNum) ? 5 : reconnectTotalNum;//重连总次数
		this.reconnectNum= 0; //已重连次数		
		this.lockReconnect = false; //避免重复连接
		this.socket=null;
		this.url=url;
		this.isSupport=typeof(WebSocket) != "undefined";
		if(!this.isSupport){
			alert("你的浏览器不支持此功能，请使用最新版本的谷歌、火狐浏览器！");
		}else if(isAutoConnect){
			console.log("自动打开websocket");
			this.init(receiveMsgFun);
		}else{
			console.log("需要手动打开websocket");
		}
	}
	/**
	 * 重新连接
	 */
	reconnect(receiveMsgFun){
		if(this.lockReconnect){
			return;
		}
		this.lockReconnect=true;
		this.reconnectNum++;
		if(this.reconnectNum>this.reconnectTotalNum){
		    console.log("重连次数超过了，不在发起重连请求："+this.reconnectNum+"-->"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
			return; 
		}
		var $this=this;
		//没连接上会一直重连，设置延迟避免请求过多
		setTimeout(function() {
			 $this.init(receiveMsgFun);
			 console.info($this.reconnectNum+'正在重连...'+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
		     $this.lockReconnect = false;
		 	}, 3000); //这里设置重连间隔(ms)
	}
	...... // 其他代码参看上篇文章
	}

reconnect(receiveMsgFun) 就是重连方法，然后将相应的socket.close（）和socke.error（）里添加上这个函数。这样就可以避免重连导致浏览器挂掉的情况。效果如下图

从上图可以看出总共重连了5次，后面不在发出重连请求

心跳监测与服务器监测

class HnWebSocket{
/**
	 * 构造函数
	 * @param url 路径
	 * @param isAutoConnect 是否自动连接 true/false
	 * @param receiveMsgFun 接收消息后处理函数
	 * @param reconnectTotalNum 重连总的次数，超过了就断开，不填写默认5次
	 */
	constructor(url,isAutoConnect,receiveMsgFun,reconnectTotalNum) {
		this.reconnectTotalNum = this.isEmpty(reconnectTotalNum) ? 5 : reconnectTotalNum;//重连总次数
		this.reconnectNum= 0; //已重连次数
		this.timeout=60000;//心跳时间
		this.timeoutObj=null;//心跳对象
		this.serverTimeoutObj=null;//服务器断网对象
		this.lockReconnect = false; //避免重复连接
		this.socket=null;
		this.url=url;
		this.isSupport=typeof(WebSocket) != "undefined";
		if(!this.isSupport){
			alert("你的浏览器不支持此功能，请使用最新版本的谷歌、火狐浏览器！");
		}else if(isAutoConnect){
			console.log("自动打开websocket");
			this.init(receiveMsgFun);
		}else{
			console.log("需要手动打开websocket");
		}
	}

/**
	 * 重置心跳监测
	 */
	reset(){
		console.log("重置心跳监测---HeartBeat"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
		clearTimeout(this.timeoutObj);
		clearTimeout(this.serverTimeoutObj);
		return this;
	}
	/**
	 * 启动心跳监测
	 */
	start(){
		console.log("启动心跳监测---HeartBeat"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
		var $this = this;
		this.timeoutObj = setTimeout(function(){
            //这里发送一个心跳，后端收到后，返回一个心跳消息，
            //onmessage拿到返回的心跳就说明连接正常
	     var heartBeatJson={"content":"心跳监测","sendMsgType":"HeartBeat"};
            $this.sendMessage(JSON.stringify(heartBeatJson));
            console.log("发起心跳监测---HeartBeat"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
            $this.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
            	console.log("心跳监测未重置,服务器断开->"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
            	$this.socket.close();//如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
            }, $this.timeout)
        }, this.timeout);
	}
/**
	 * 重新连接
	 */
	reconnect(receiveMsgFun){
		if(this.lockReconnect){
			return;
		}
		this.lockReconnect=true;
		this.reconnectNum++;
		if(this.reconnectNum>this.reconnectTotalNum){
		    console.log("重连次数超过了，不在发起重连请求："+this.reconnectNum+"-->"+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
			return; 
		}
		var $this=this;
		//没连接上会一直重连，设置延迟避免请求过多
		setTimeout(function() {
			 $this.init(receiveMsgFun);
			 console.info($this.reconnectNum+'正在重连...'+new Date().formatDate("yyyy-MM-dd hh:mm:ss"));
		     $this.lockReconnect = false;
		 	}, 3000); //这里设置重连间隔(ms)
	}
	...... // 其他代码参看上篇文章
	}

代码里的注释比较详细，看看应该就明白了，这里主要就是定义2个timeout对象，然后每隔60秒自动向后端发一条“心跳”数据，然后再返回给自己，只要自己能收到，那么就说明还在握手状态，否则就触发重连。
这里发起“心跳”数据为固定格式，即代码中的
var heartBeatJson={“content”:“心跳监测”,“sendMsgType”:“HeartBeat”}。
相应的后端接收数据的代码也要做修改。

// 收到客户端信息
	@OnMessage
	public void onMessage(final String message, @PathParam(value = "id") final String id) throws IOException {
		System.out.println("收到客户端消息：" + message + "** ToId:" + id);
		try {
			if (!WebSocketServer.sessionPools.isEmpty()) {
				final WebSocketMsgVO messageVO = JSON.parseObject(message, WebSocketMsgVO.class);
				
				if (messageVO.getSendMsgType().equals("HeartBeat")	&& messageVO.getToId()==null) {
					messageVO.setToId(id);
				}

				if (WebSocketServer.sessionPools.containsKey(messageVO.getToId())) {
					this.sendMessage(WebSocketServer.sessionPools.get(messageVO.getToId()),
							JSON.parseObject(messageVO));
				}
			}
		} catch (final Exception e) {
			e.printStackTrace();
		}
	}

效果如下，我这里是为了做测试，设置10秒做一次心跳监测，实际项目中可以设置时间长一点，60秒发起一次即可。

前端文件下载：https://download.csdn.net/download/zhuiyue82/86500113

使用方式很简单，直接根据构造函数new一个对象即可
构造函数的结构如下
/**
* 构造函数
* @param url 路径
* @param isAutoConnect 是否自动连接 true/false
* @param receiveMsgFun 接收消息后处理函数
* @param reconnectTotalNum 重连总的次数，超过了就断开，不填写默认5次
*/
constructor(url,isAutoConnect,receiveMsgFun,reconnectTotalNum)
前面3个参数上篇文章已经说过了，最后一个参数 reconnectTotalNum 代表是当与后端服务器断开后，重连的总次数，超过了就断开，默认为重新连接5次。
例如：

var socketUrl="ws://127.0.0.1/socketweb/webSocket/${fromId}";
var socket = new HnWebSocket(socketUrl,true,receiveMsg);

上面的代码就是最基本的一次握手，第四个参数没有填写就表示当前后端断开后继续重连5次，如果5次都没有重新握手成功就断开。
发送消息 ：socket.sendMessage(str) ; str：就是发送的消息，是一组符合后端消息体对象的JSON字符串。