Cordova开发app——Websocket掉线问题

原文地址： http://www.brandhuang.com/article/1564810311319

在咱们的Cordova+vue开发的app项目中，一直深受websocket掉线问题的困扰

安卓手机手机退到桌面或者锁屏后不知道个多少间就会掉线。当立进入app后就会发现消息收不到、消息接收不到

苹果手机一锁屏就掉线了。。。

由于websocket在链接不上服务器或者断开链接后，会执行一个「onclose」的方法，因此咱们在这里面进行了重连的操做。

可是咱们的app在使用过程当中，若是锁屏时间长一点，仍是会出现发送不了消息的状况，只有清掉app的后台，而后从新进入或者从新登陆app（登陆的时候会建立websocket连接）才会恢复正常

WebSocket.readyState一共有四种状态：

Value	State	Description
0	CONNECTING	Socket has been created. The connection is not yet ope
1	OPEN	The connection is open and ready to communicate.
2	CLOSING	The connection is in the process of closing.
3	CLOSED	The connection is closed or couldn't be opened

只有当state值为1的时候才能正常收发消息。

因而想，能不能在打开app或者解锁的时候就来检测这个状态值呢？当不为1的时候就进行重连？

首先想到的是用HTML5的API「visibilitychange」，判断页面的可见性。先是在网页上测试了下，好像挺好使的。可是打包成app后，发如今ios上没有效果？？！！！

此方案--失败

仔细查看了Cordova的文档，发现，官方提供了一些事件，其中的「pause」和「resume」事件是我想要的

具体事件请查看官方文档： Cordova Events

当手机Home键返回桌面或者手机直接锁屏的时候，会触发app的「pause」事件

当进入手机app或者手机解锁的时候，会触发app的「resume」事件

因此咱们只须要在App.vue中监听这两个事件，而后判断websocket的的状态进行操做就能够了，主要代码以下：

mounted(){
    let _that = this
    document.addEventListener("resume", function () {
        if(_that.ws.readyState !== 1){
          _that.$store.dispatch('reloadWebSocket', getAgentId())
        }
      }, false);
}

此方案已经使用在咱们的测试app中，让测试用了几天了，据反馈目前尚未发现之前常常出现的不能发送消息的问题

才学习使用websocket没有多久，若是有其余更好的方案，但愿能获得各位大佬的指点

感谢你的阅读