How to check your internet connection in AngularJs

Question

Here's how I can test my javascript internet connection in vanilla:

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

There are angular controllers and modules in my project. Where should I put the code above? It must be run in a global context and not assigned to a specific controller. Are there any global controllers?

Answer 1

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

You can do this 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 moving the change of the root region variable to the $apply method to notify Angular that something has been changed.

After that you can:

In controlller:

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

In the 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

Another solution could be a live / offline event. But in this case, you need to initialize the current status at boot, and then subscribe to the event.

Answer 2

This is definitely not so good, but you can just try the AJAX request on your web server; it will either succeed or time out.

In addition, the HubSpot / offline project looks really good.

Answer 3

Your options:

• addEventListener in a window, document or .body document.

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

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

I will demonstrate the simplest.

In the 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 the $ scope.connection variable before trying to send requests.

Answer 4

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

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

check the link above for more details, we can use "window: offline" and "window: online" instead of the navigator.online function to trigger events that are automatically listened to if there is an Internet connection or not. Based on this, we can attach the above events in the form of displaying messages either in the toaster, in the dialog box, or whatever.

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

}