您当前的位置：学无止境 > 移动端锁屏断开重连websocket 的重连方法网站首页学无止境

移动端锁屏断开重连websocket 的重连方法

发布时间：2019-12-20 15:23:07编辑：李小白1查看次数：1626

使用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中断的情况

————————————————

版权声明：本文为CSDN博主「李小白1」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq449736038/article/details/80771278

上面that.hiddenTime怎么保存的在例子里三青还没搞懂，也可能原博主在例子里面没有交代清楚，三青认为可以保存在后台，然后visibilitychange事件去取hiddenTime，但是思路都是差不多的，感谢李小白1博主的思路。

三青本人的方法更简单粗暴（直接绑定visibilitychange事件，刷新页面重新连接）

document.addEventListener('visibilitychange',function() {
        if(document.visibilityState=='hidden') {
        }else{
                 window.location.reload();
        }
})