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沒有多久，若是有其餘更好的方案，但願能獲得各位大佬的指點

感謝你的閱讀