乐趣区

Cordova开发appWebsocket掉线问题

原文地址: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 没有多久,如果有其他更好的方案,希望能得到各位大佬的指点

感谢你的阅读

退出移动版