WebSocket心跳

为什么要实现websocket心跳？

在使用原生websocket的时候,如果设备网络断开,不会触发任何函数,前端程序无法得知当前的连接已经断开.

这个时候如果调用 websocket.send()方法,浏览器就会发现消息发不出去,便会立刻或一定短时间后(不同浏览器或浏览器版本可能表现不同)触发onclose函数.

1.页面初始化调用initWebSocket函数,目的是创建一个websocket方法

var lockReconnect = false //避免重复连接
var wsUrl = 'ws://xxx.xx.xx'
var ws = null
var reconnectTimer = null
var reconnectDelayTime = 10000;//重复连接延迟时间,避免一直重复连接
var heartCheckIntervalTime = 30000;//心跳检测间隔时间
function initWebSocket(){
　　try{
　　　　ws = new WebSocket(wsUrl)
　　　　wsMonitor()
　　}catch(e){
　　　　console.log(e)
　　　　reconnect(wsUrl)
　　}
}

2.实现wsMonitor方法,该方法内把一些监听事件进行封装

function wsMonitor (){
　　ws.onclose = ()=>{
　　　　console.log('连接关闭')
　　　　reconnect(wsUrl)
　　}
　　ws.onerror = ()=>{
　　　　console.log('发生异常')
　　　　reconnect(wsUrl)
　　}
　　ws.onopen = ()=>{
　　　　console.log('连接打开')
　　　　heartCheck.start()
　　}
　　ws.onmessage = ()=>{
　　　　console.log('接收到消息')
　　　　heartCheck.start()
　　}
}

3.当网络断开,会先调用onerror,onclose事件可以监听到,会调用reconnect方法进行重连操作.

正常情况下是先调用onopen方法,接收到数据时会被onmessage事件坚挺到

4.重连操作reconnect方法实现

function reconnect(wsUrl){
　　if(lockReconnect){
　　　　return
　　}
　　lockReconnect = true;
　　reconnectTimer && clearTimeout(reconnectTimer)
　　reconnectTimer = setTimeout(()=>{
　　　　initWebSocket(wsUrl)
　　　　lockReconnect = false
　　},reconnectDelayTime)//设置延迟连接
}

5.实现心跳监测代码(个人理解:关键点在heartCheck.start方法;)

var heartCheck = {
　　timeout:heartCheckIntervalTime,
　　timeoutObj:null,
　　serverTimeoutObj:null,
　　start(){
　　　　this.timeoutObj && clearTimeout(this.timeoutObj)
　　　　this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
　　　　this.timeoutObj = setTimeout(()=>{
　　　　　　ws.send('Is Server Alive?')
　　　　　　this.serverTimeoutObj = setTimeout(()=>{
　　　　　　　　ws.close()
　　　　　　},this.timeout)
　　　　},this.timeout)
　　}
}