使用websocket长连接进行实时通信,在制作客服聊天或是必要的数据实时更新需求中是很好的选择,毕竟轮询大家都懂的
但是websocket服务端通常为了保证资源的有效利用,会加入心跳机制,当超过心跳时间未收到连接发过来的心跳,就主动断开连接释放资源,这种做法主要是为了应对断电,断网之类的极端情况,使得浏览器来不及发送断开请求。
问题也随之而来,js在手机熄屏后会中断,在唤醒之后js会继续执行。所以设置在js中的定时发送心跳包的功能在手机熄屏后就没法执行了。熄屏时间过长,这个时候链接就会被服务端强制断开,并且大部分手机在熄屏时,websocket连接就已经断开了。
问题的解决办法是,使用H5提供的页面隐藏/显示API。
document.addEventListener('visibilitychange',function() {
if(document.visibilityState=='hidden') {
that.hiddenTime = new Date().getTime() //记录页面隐藏时间
}else{
let visibleTime = new Date().getTime();
if((visibleTime-that.hiddenTime)/1000>10){ //页面再次可见的时间-隐藏时间>10S,重连
typeof that.ws.close == 'function' && that.ws.close(); //先主动关闭连接
console.log('主动关闭连接后重连');
setTimeout(function(){
that.openSocket() //打开连接,使用的vuejs,这是websocket的连接方法
},1500); //1.5S后重连
}else{
console.log('还没有到断开的时间')
}
}
});
至于为什么断开要1.5s之后再重连,当然是因为断开需要时间啊。不然ws会报错,说连接早就关闭了。
总结:这个方法不仅适用熄屏后重连,也适用于手机浏览器被切换至后台运行时js中断的情况