如何检测在线/离线状态何时发生变化 [英] How to detect when online/offline status changes

问题描述

我想知道互联网连接何时丢失和重新连接，以便我可以在哎呀，没有互联网"的警报和包含来自我的服务器的数据的 Google 地图或网格之间切换.

I want to know when internet connection is lost and regained, so that I can toggle between an alert saying "whoops, no internet" and a Google map or a grid containing data derived from my server.

这个相关问题和这个其他相关问题认为他们有回答，但他们没有.

This related question and this other related question think that they have the answer, but they do not.

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

Their solution works with Chrome Version 34.0.1847.137 m, MS IE v11.0.x.x, but NOT with FireFox v29.0.1, so I am seeking a solution which works with all of those three browsers.

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

[Update] AS @Quad points out there are different ways of defining what it means to be online. I am definign it as "can I fetch the data which I need to show to my user or not?".

我有多个服务，它们负责从多个服务器获取数据(什么是最好的?单个参数化服务?每台服务器一项服务?或者每台服务器每种类型的数据一项服务?我认为是后者，如然后每个服务都可以映射到一个映射到视图的控制器.但我是 Angular 的新手，所以很可能是错误的).

I have several services, which are responsible for fetching data from several servers (what's best? A single, parameterized, service? One service per server? Or one service per type of data per server? I am thinking the latter, as each service can then map to a controller which maps to a view. But I am new to Angular, so may well be wrong).

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

Additionally, I had coded a service which is responsible for attempting to reconnect when connection is lost.

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

Anyone who tries an $http.get and gets 404 can invoke the service which would
1) broadcast that there was no internet (so that no one else would try to connect)
2) regularly attempt to connect to my server and
3) when successful, stop the connection attempts and broadcast that the app is now online again.

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

However, that seemed very klunky and the solution offered in the two related questions seemed elegant - except for FF :-(

我不能在这里重新发明轮子.其他人是怎么做的?事实上，我很惊讶现在还没有官方"的 Angular 解决方案

I cannot be reinventing the wheel here. How do others do it? In fact, I am surprised that there is not already an "official" Angular solution

推荐答案

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

The best way that I would know would be to intercept the HTTP handler, if its a 401 / 501/ etc then to handle it according

例如:

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 of 的代码中，只需添加

then in your code that listens for the on of, just add in

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

您也可以添加一个内部标志并仅在该标志更改时进行广播.

You could also add an internal flag and broadcast only when that flag changed.

但是，如果您正在寻找一种解决方案，用户不会过于频繁地与服务器通信，您可以添加一个部分，每分钟左右 ping 服务器，但这可能不会像您喜欢的那样响应.

But if you are looking for a solution where the user is not communicating with the server too frequently, you could add a section that pings the server every minute or so, but that may not be responsive as you like.

这篇关于如何检测在线/离线状态何时发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！