AngularJs에서 인터넷 연결을 확인하는 방법

AngularJs에서 인터넷 연결을 확인하는 방법

바닐라 자바스크립트로 인터넷 연결을 확인하는 방법은 다음과 같습니다.

setInterval(function(){
    if(navigator.onLine){
        $("body").html("Connected.");
    }else{
        $("body").html("Not connected.");
    }
},1000);

프로젝트에는 각도 컨트롤러와 모듈이 있습니다.위 코드는 어디에 넣어야 하나요?특정 컨트롤러에 할당하지 않고 글로벌콘텍스트에서 실행해야 합니다.글로벌 컨트롤러 같은 게 있을까요?

우선 온라인/오프라인 이벤트를 듣는 것이 좋습니다.

앵가르에서는 이렇게 할 수 있다.JS:

var app = module('yourApp', []);

app.run(function($window, $rootScope) {
      $rootScope.online = navigator.onLine;
      $window.addEventListener("offline", function() {
        $rootScope.$apply(function() {
          $rootScope.online = false;
        });
      }, false);

      $window.addEventListener("online", function() {
        $rootScope.$apply(function() {
          $rootScope.online = true;
        });
      }, false);
});

메모: 루트 스코프의 변수 변경에 대해 설명하겠습니다.$apply변경되었음을 Angular에게 통지하는 방법.

그 후 다음 작업을 수행할 수 있습니다.

컨트롤러 내:

$scope.$watch('online', function(newStatus) { ... });

HTML 마크업:

 <div ng-show="online">You're online</div>
 <div ng-hide="online">You're offline</div>

여기 동작하는 Pluker가 있습니다.http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

온라인/오프라인 이벤트를 브로드캐스트하는 방법도 있습니다.그러나 이 경우 로드 시 현재 상태를 초기화하고 이벤트에 등록해야 합니다.

확실히 좋은 것은 아니지만 웹 서버에 대한 AJAX 요청을 시도하면 성공하거나 타임아웃할 수 있습니다.

또한 HubSpot/offline 프로젝트는 매우 좋아 보입니다.

옵션:

• 창, 문서 또는 document.body에서 addEventListener를 선택합니다.

• 문서의 .online 또는 .online 속성을 설정합니다.
  문서.JavaScript Function 개체로 바디를 지정합니다.

• HTML 마크업의 태그에 on-line="..." 또는 on-offline="..." 속성을 지정합니다.

가장 쉬운 걸 보여드릴게요.

인유 컨트롤러

document.body.onoffline = function() {
   alert('You are offline now');
   $scope.connection = 'offline' 
}

document.body.ononline = function() {
   alert('You are online again');
   $scope.connection = 'online' 
}

요청을 전송하기 전에 $scope.connection 변수를 확인하십시오.

Angular 2+의 경우 ng-speed-test를 사용할 수 있습니다.

1. 설치만 하면 됩니다.

npm install ng-speed-test --save

2. 모듈에 주입:

import { SpeedTestModule } from 'ng-speed-test';

@NgModule({
   ...
   imports: [
       SpeedTestModule,
       ...
   ],
   ...
})
export class AppModule {}

3. 서비스를 사용하여 속도 향상:

import {SpeedTestService} from 'ng-speed-test';

@Injectable()
export class TechCheckService {
  constructor(
    private speedTestService:SpeedTestService
  ) {
    this.speedTestService.getMbps().subscribe(
      (speed) => {
        console.log('Your speed is ' + speed);
      }
    );
  }
}

언급URL : https://stackoverflow.com/questions/16242389/how-to-check-internet-connection-in-angularjs