H5websoket熄屏断联解决方法

在移动端中应用websoket我们需要注意一个很常见的问题就是当移动端熄屏以后一段时间再打开手机websoket会断联虽然不同设备清后台间隔不一样但是大同小异

这里我的项目背景是vue开发的一个小H5页面功能是发送弹幕另一个页面是PC端用来接收弹幕
 

解决方案:

mounted() {
     this.wsInit();//链接websoket函数
     // 使用箭头函数绑定事件处理器
       document.addEventListener('visibilitychange', () => {
         this.handleVisibilityChange();处理函数
       });//监听关屏事件
   },

methods: {
          handleVisibilityChange() {
                //判断是否熄屏
              if (document.visibilityState === 'hidden') {
                //熄屏时记录熄屏时间戳  hiddenTime要在data中定义
                this.hiddenTime = new Date().getTime();
              } else {
                //当页面屏幕点亮记录亮屏时间戳
                let visibleTime = new Date().getTime();
                 //判断亮屏时间戳减去熄屏时间戳如果大于10秒就调用处理函数
                if ((visibleTime - this.hiddenTime) / 1000 > 10) {
                  this.reconnectWebSocket();
                } else {
                  console.log('还没有到断开的时间');
                }
              }
            },
            //处理函数
           reconnectWebSocket() {
                //在重启websoket前先关闭旧链接
              if (this.ws) {
                this.ws.close(); // 关闭旧连接
              }
              this.wsInit(); // 初始化新连接
            },
           wsInit() {
            this.ws = new WebSocket("你的soket地址");
          }
}

在上述代码中10秒间隔处理是为了节省对服务端的发送次数毕竟当代年轻人熄屏关屏很勤