在離子應用程序中監控在線和離線狀態

Question

我想要實時監控用戶的設備是在線還是離線。 我基本上使用這個網站的信息：http://www.joshmorony.com/monitoring-online-and-offline-states-in-an-ionic-application/

我是「升級」的代碼了一下，但我仍然有問題接收實時網絡狀態的變化。在我的工廠裏有一個叫做startWatching()的功能，它的功能非常好 - 隨時在工廠內部和我訪問它後第一次時間。

我的問題：如何實時訪問我的控制器內網絡狀態的變化？每當他的設備脫機時，我需要向用戶顯示一些信息。

我的控制器：

// ### News ### 
    var newsCtrl = function ($scope, $http, $ionicLoading, PostService, BookMarkService, ConnectivityMonitor) { 
    console.log('newsCtrl'); 

    var showNews = false; 
    ConnectivityMonitor.startWatching().then(function(result) { 
     // promise 
     console.log('ConnectivityMonitor result: ', result); 
     showNews = result; 
     $scope.showNews = showNews; 

     console.log('showNews: ', showNews); 
     if(showNews) { 
     displayNews(); 
     } 
    }, function(error) { 
     console.error(error); 
    }); 

    function displayNews() { 
     // do some stuff 
    } 
    }; 
    newsCtrl.$inject = ['$scope', '$http', '$ionicLoading', 'PostService', 'BookMarkService', 'ConnectivityMonitor']; 

我廠：

// ### ConnectivityMonitor ### 
var ConnectivityMonitor = function ($rootScope, $cordovaNetwork, $q) { 
console.log('ConnectivityMonitor'); 

var monitorNow = { 
    isOnline: isOnline, 
    isOffline: isOffline, 
    startWatching: startWatching 
}; 
var deferred = $q.defer(); 

function isOnline() { 
    if(ionic.Platform.isWebView()) { 
    deferred.resolve($cordovaNetwork.isOnline()); 
    } else { 
    deferred.resolve(navigator.onLine); 
    } 
    return deferred.promise; 
}; 

function isOffline() { 
    if(ionic.Platform.isWebView()) { 
    deferred.resolve(!$cordovaNetwork.isOnline()); 
    } else { 
    deferred.resolve(!navigator.onLine); 
    } 
    return deferred.promise; 
}; 

function startWatching() { 
    if(ionic.Platform.isWebView()){ 
    $rootScope.$on('$cordovaNetwork:online', function(event, networkState) { 
     console.log("went online"); 
     console.log("event: ", event); 
     console.log("networkState: ", networkState); 
     deferred.resolve($cordovaNetwork.isOnline()); 
    }); 
    $rootScope.$on('$cordovaNetwork:offline', function(event, networkState) { 
     console.log("went offline"); 
     console.log("event: ", event); 
     console.log("networkState: ", networkState); 
     deferred.resolve(!$cordovaNetwork.isOnline()); 
    }); 
    } 
    else { 
    window.addEventListener("online", function(e) { 
     console.log("went online"); 
     console.log("event: ", e); 
     deferred.resolve(navigator.onLine); 
    }, false); 
    window.addEventListener("offline", function(e) { 
     console.log("went offline"); 
     console.log("event: ", e); 
     deferred.resolve(!navigator.onLine); 
    }, false); 
    } 
    return deferred.promise; 
}; 

console.log('isOnline: ', monitorNow.isOnline()); 
console.log('isOffline: ', monitorNow.isOffline()); 
console.log('startWatching: ', monitorNow.startWatching()); 

return monitorNow; 
}; 
ConnectivityMonitor.$inject = ['$rootScope', '$cordovaNetwork', '$q']; 

Answer 1

你的代碼看起來相當複雜的我，也許你想看看一個demo app of mine，這確實幾乎相同。這不是一個離子應用程序，但Angular和TypeScript ...

首先，我建立了一個service獲取在線狀態並將其存儲在變量deviceIsOnline。

class NetworkStatusService implements INetworkStatusService { 
    deviceIsOnline: boolean; 

    constructor() { 
     document.addEventListener("deviceready",() => { 
      if (navigator.connection.type === Connection.NONE) { 
       this.deviceIsOnline = false; 
      } else { 
       this.deviceIsOnline = true; 
      } 
     }); 

     document.addEventListener("offline",() => { 
      this.deviceIsOnline = false; 
     }); 
     document.addEventListener("online",() => { 
      this.deviceIsOnline = true; 
     }); 
    } 
} 

我注射這種服務到我controller並利用deviceIsOnline變量。

class IndexController { 
    static $inject = ["cordovaStarter.NetworkStatusService"]; 
    constructor(private networkStatusService: INetworkStatusService) { 
    } 

    showNetworkStatus(): void { 
     if (this.networkStatusService.deviceIsOnline) { 
      alert("Online"); 
     } else { 
      alert("Offline"); 
     } 
    } 
} 

在你的情況，如果你可能要watch的deviceIsOnline變量，所以你可以每次執行代碼的變量的變化，而不是在點擊一個按鈕反應... This可能有助於瞭解手錶的模式，你還不知道它;）

---

對於completness起見，請注意，我躲在我的實現如下界面背後：

interface INetworkStatusService { 
    deviceIsOnline: boolean; 
}