온라인/오프라인 상태 변화 감지 방법

온라인/오프라인 상태 변화 감지 방법

인터넷 연결이 끊겼다가 다시 복구되면 "와, 인터넷이 안 돼"라는 경고와 서버에서 파생된 데이터를 포함하는 Google 지도 또는 그리드를 전환할 수 있습니다.

이 관련 질문과 다른 관련 질문은 답을 알고 있다고 생각하지만 정답이 없습니다.

이 솔루션은 Chrome 버전 34.0.1847.137m, MS IE v11.0.x.x에서는 동작하지만 FireFox v29.0.1에서는 동작하지 않기 때문에 이 3개의 브라우저 모두에서 동작하는 솔루션을 찾고 있습니다.

---

[갱신] AS @Quad는 온라인의 의미를 정의하는 방법은 다양하다고 지적합니다.「사용자에게 표시할 필요가 있는 데이터를 취득할 수 있는가」라고 정의하고 있습니다.

---

여러 서버에서 데이터 가져오기를 담당하는 여러 서비스가 있습니다(최적의 서비스는 무엇입니까?)파라미터화된 단일 서비스?서버 1대당 1개의 서비스?또는 서버당 데이터 유형별로 1개의 서비스를 제공합니까?후자는 각 서비스가 뷰에 매핑되는 컨트롤러에 매핑할 수 있기 때문에 후자를 생각하고 있습니다.하지만 저는 Angular에 처음 왔기 때문에 틀릴 수도 있어요.

또한 연결이 끊겼을 때 재접속을 시도하는 서비스를 코드화했습니다.

어떤 사람이든 시도하면$http.get404를 취득하면 다음과 같은 서비스를 실행할 수 있습니다.
1) 인터넷이 없음을 브로드캐스트(다른 사람이 접속을 시도하지 않도록)
2) 정기적으로 서버에 접속을 시도하여
3) 성공하면 연결 시도를 중지하고 앱이 다시 온라인 상태임을 브로드캐스트합니다.

그러나, 그것은 매우 투박해 보였고, FF를 제외하고, 2개의 관련 질문에서 제시된 솔루션은 우아해 보였습니다.

여기서 바퀴를 재발명할 수는 없어요.다른 사람들은 어떻게 하나요?사실, 나는 이미 "공식적인" Angular 솔루션이 없다는 것에 놀랐다.

401 / 501 / etc의 경우 HTTP 핸들러를 가로채는 것이 가장 좋은 방법입니다.

예:

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);

다음 중 하나를 수신하는 코드에 추가만 하면 됩니다.

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

또한 내부 플래그를 추가하고 해당 플래그가 변경된 경우에만 브로드캐스트할 수 있습니다.

그러나 사용자가 서버와 너무 자주 통신하지 않는 솔루션을 찾는 경우 1분마다 서버에 ping을 실행하는 섹션을 추가할 수 있지만 원하는 대로 응답하지 않을 수 있습니다.

에는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★./ping십일조를 하다물론 이것은 대규모 앱에는 적합하지 않을 수 있습니다.

angular.module("pingMod", [])
    .run(function ($http, $interval) {
        var TIME = 60000;
        function ping() {
            $http.get("/ping");
        }
        $interval(ping, TIME);
    });

@Gil gil제 httpHTTP @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @.0태,, 오오입입 다오다$http는 AJAX를 사용합니다.

입니다.$http물론 대신 Resangular를 사용하기로 결정할 수도 있지만, 앱의 필요에 따라 다릅니다.

angular.module("myModule", [])
    .config(function ($httpProvider) {
    var interceptor = [
        '$q',
    function ($q) {
        return function (promise) {
            return promise.then(function (response) {
                return response;
            }, function (response) {
                if (response.status === 0) {
                    // We're offline!
                }
                return $q.reject(response);
            });
        };
    }];
    $httpProvider.responseInterceptors.push(interceptor);
})

서버 폴링을 하거나 실패한 응답을 기다리는 것만으로 연결 해제를 검출할 수 있습니다.특별한 요건이 없는 한 후자의 접근방식이 바람직합니다.절단이 검출되면 폴링을 사용하여 재접속을 검출해야 합니다.

이를 각도로 구현하는 우아한 방법은 모든 XHR 액티비티가 흐르는 주입 가능한 서비스인 를 사용하여 모든 네트워크액티비티를 감시하는 것입니다.리스앵커는 다음을 통해 이를 추상화합니다.

• : 서버에 데이터를 전송하기 전에 요청에 대한 전체 액세스를 제공합니다RestangularProvider.addFullRequestInterceptor.

• : 서버로부터의 각 에러 응답 후에 호출됩니다RestangularProvider.setErrorInterceptor.

Resangular를 사용하여 상태 감시기를 구현하기 위한 의사 코드를 다음에 나타냅니다.

var last_request

RestangularProvider.addFullRequestInterceptor:
  last_request = Save last request

RestangularProvider.setErrorInterceptor:
    - Display the 'offline' status message to user
    - Use $interval to periodically re-submit last_request until successful
    - When periodic re-submission succeeds, hide 'offline' status message

Restangular를 사용하여 특별히 답변을 요구하지는 않았지만, 당신은 확립된 패턴을 찾고 있다고 말했고, Restangular에는 매우 사용하기 쉽고 강력한 패턴이 내장되어 있습니다. 있는 것과 해서 '아까운 생각'만으로 할 수 .$http.

언급URL : https://stackoverflow.com/questions/23851424/how-to-detect-when-online-offline-status-changes