angularjs - 如何检测在线/离线状态何时发生变化

Question

我想知道互联网连接何时丢失和恢复，以便我可以在“哎呀，没有互联网”的警报和 Google map 或包含从我的服务器派生的数据的网格之间切换。

This related question和 this other related question认为他们有答案，但他们没有。

他们的解决方案适用于 Chrome 版本 34.0.1847.137 m、MS IE v11.0.x.x，但不适用于 FireFox v29.0.1，因此我正在寻找适用于所有这三种浏览器的解决方案。

<小时/>

[更新] AS @Quad 指出有不同的方法来定义在线的含义。我将其定义为“我是否可以获取需要向用户显示的数据？”。

<小时/>

我有几个服务，它们负责从多个服务器获取数据(什么是最好的？单个参数化服务？每个服务器一个服务？或者每个服务器每种数据类型一个服务？我认为后者，因为然后，每个服务都可以映射到一个 Controller ，该 Controller 映射到一个 View 。但我是 Angular 的新手，所以很可能是错误的)。

此外，我编写了一个服务，负责在连接丢失时尝试重新连接。

任何尝试 $http.get 并收到 404 错误的人都可以调用该服务
1)广播没有互联网(这样就没有其他人尝试连接)
2)定期尝试连接到我的服务器并且
3) 成功后，停止连接尝试并广播该应用程序现在再次在线。

但是，这看起来非常笨拙，并且两个相关问题中提供的解决方案似乎很优雅 - 除了 FF :-(

我不能在这里重新发明轮子。其他人是怎么做的？事实上，令我惊讶的是还没有一个“官方”Angular 解决方案

Answer 1

我知道的最好方法是拦截 HTTP 处理程序，如果它是 401/501/等，则根据它进行处理

例如:

angular.module('myApp', ['myApp.services'], 
    function ($httpProvider) {

    var interceptor = ['$rootScope', '$q', function ($rootScope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status; // error code

            if ((status >= 400) && (status < 500)) {
                $rootScope.broadcast("AuthError", status);
                return;
            }

            if ( (status >= 500) && (status < 600) ) {
                $rootScope.broadcast("ServerError", status);
                return;
            }

            // otherwise
            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

然后在监听 on 的代码中，只需添加

$rootScope.$on("ServerError", someServerErrorFunction);

您还可以添加内部标志并仅在该标志更改时进行广播。

但是，如果您正在寻找一种用户不太频繁与服务器通信的解决方案，您可以添加一个每隔一分钟左右对服务器进行 ping 操作的部分，但这可能无法按照您的意愿进行响应。