如何在 AngularJs 中检查互联网连接

Question

This is how I would check internet connection in vanilla javascript:

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

I have angular controllers and modules in my project. Where should I put the code above? It should be executed in global context and not be assigned to a certain controller. Are there some kind of global controllers maybe?

Answer 1

First of all, I advise you to listen to online/offline events .

You can do it this way in AnguarJS:

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

NOTE: I am wrapping changing of root scope's variable in $apply method to notify Angular that something was changed.

After that you can:

In controlller:

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

In HTML markup:

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

Here is a working Plunker: http://plnkr.co/edit/Q3LkiI7Cj4RWBNRLEJUA?p=preview

Other solution could be to broadcast online/offline event. But in this case you need to initialize current status upon loading and then subscribe to event.

Answer 2

It's definitely not as nice, but you could just try an AJAX request to your web server; it'll either succeed or time out.

Also, the HubSpot/offline project looks really good.

Answer 3

Your options:

• addEventListener on the window, document, or document.body.

• setting the .ononline or .onoffline properties on document or
  document.body to a JavaScript Function object.

• specifying ononline="..." or onoffline="..." attributes on the tag in the HTML markup

I will demonstrate the easiest.

In you controller

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

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

Check $scope.connection variable before you try to send requests around.

Answer 4

We can do that simply by using HostListener-Events. We can use it by importing it from @angular/core.

https://angular.io/api/core/HostListener

check the above link for more details, we can use "window:offline" and "window:online" in the place of navigator.online funtion to raise events which automatically listens if there is an internet connection or not. Based on that we can attach the above events in the form of displaying the messages either in a toastr or in a dialog box or what so ever.

As an example:

import { Component, HostListener } from "@angular/core";
import { Subscription } from "rxjs";
import { Observable } from "rxjs/Observable";

@Component({

selector: 'app-online-offline',
templateUrl: './online-offline.component.html',
styleUrls: ['./online-offline.component.css']
})
export class OnlineOfflineComponent {
public isOnline: boolean;
public showConnectionStatus: boolean;
private showConnectionStatusSub: Subscription;
private showConnectionStatusTimer: Observable<any>;

constructor() {
    this.showConnectionStatusTimer = Observable.timer(5000);
}

@HostListener('window:offline', ['$event']) onOffline() {
    this.isOnline = false;
    this.showConnectionStatus = true;
    if (this.showConnectionStatusSub) {
        this.showConnectionStatusSub.unsubscribe();
    }
}

@HostListener('window:online', ['$event']) onOnline() {
    this.isOnline = true;
    this.showConnectionStatus = true;
    this.showConnectionStatusSub = this.showConnectionStatusTimer.subscribe(() => {
        this.showConnectionStatus = false;
        this.showConnectionStatusSub.unsubscribe();
        window.location.reload();
    });
}

ngOnDestroy(): void {
    if (this.showConnectionStatusSub) {
        this.showConnectionStatusSub.unsubscribe();
    }
}

}

Answer 5

For Angular 2+ you can use ng-speed-test :

1. Just install:

npm install ng-speed-test --save

2. Inject into your module:

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

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

3. Use service to get speed:

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