18.0.0 • Published 11 months ago

ngx-connection-service v18.0.0

Weekly downloads
660
License
MIT
Repository
github
Last release
11 months ago

Internet Connection Monitoring Service

Detects whether browser has an active internet connection or not in Angular application.

This library is a fork of https://github.com/ultrasonicsoft/ng-connection-service by Balram Chavan.

Install

npm i ngx-connection-service --save

Angular Version Compatibility

Please use following table to determine suitable library version for your Angular project.

ngx-connection-service versionAngular version
7.0.x7.2.16
8.0.x8.2.14
9.0.x9.1.13
10.0.x10.2.5
11.0.x11.2.14
12.0.x12.2.17
13.0.x13.4.0
14.0.x14.3.0
15.0.x15.2.9
16.0.x16.1.8
17.0.x17.1.0
18.0.x18.1.2

Usage

  • Import ConnectionServiceModule in your app.module.ts.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {ConnectionServiceModule} from 'ngx-connection-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ConnectionServiceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
  • Inject ConnectionService in your component's constructor.
  • Subscribe to monitor() method to get push notification whenever internet connection status is changed.
import { Component } from '@angular/core';
import { ConnectionService } from 'ngx-connection-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hasNetworkConnection: boolean;
  hasInternetAccess: boolean;
  status: string;

  constructor(private connectionService: ConnectionService) {
    this.connectionService.monitor().subscribe(currentState => {
      this.hasNetworkConnection = currentState.hasNetworkConnection;
      this.hasInternetAccess = currentState.hasInternetAccess;
      if (this.hasNetworkConnection && this.hasInternetAccess) {
        this.status = 'ONLINE';
      } else {
        this.status = 'OFFLINE';
      }
    });
  }
}

Configuration

You can configure the service using ConnectionServiceOptions configuration variable. Following options are available;

/**
 * Instance of this interface could be used to configure "ConnectionService".
 */
export interface ConnectionServiceOptions {
  /**
   * Controls the Internet connectivity heartbeat system. Default value is 'true'.
   */
  enableHeartbeat?: boolean;
  /**
   * Url used for checking Internet connectivity, heartbeat system periodically makes "HEAD" requests to this URL to determine Internet
   * connection status. Default value is "//api.ipify.org/".
   */
  heartbeatUrl?: string;
  /**
   * Callback function to used for executing heartbeat requests. Defaults to HttpClient.request(...) function.
   */
  heartbeatExecutor?: (options?: ConnectionServiceOptions) => Observable<any>;
  /**
   * Interval used to check Internet connectivity specified in milliseconds. Default value is "30000".
   */
  heartbeatInterval?: number;
  /**
   * Interval used to retry Internet connectivity checks when an error is detected (when no Internet connection). Default value is "1000".
   */
  heartbeatRetryInterval?: number;
  /**
   * HTTP method used for requesting heartbeat Url. Default is 'get'.
   */
  requestMethod?: 'get' | 'post' | 'head' | 'options';

}

You should define a provider for ConnectionServiceOptionsToken in your module as follows;

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {ConnectionServiceModule, ConnectionServiceOptions, ConnectionServiceOptionsToken} from 'ngx-connection-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ConnectionServiceModule
  ],
  providers: [
    {
      provide: ConnectionServiceOptionsToken,
      useValue: <ConnectionServiceOptions>{
        enableHeartbeat: false,
        heartbeatUrl: '/assets/ping.json',
        requestMethod: 'get',
        heartbeatInterval: 3000
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Custom HeartBeat handling function

You could use a callback function for handling heartBeat requests by defining heartbeatExecutor property in ConnectionServiceOptions;

import { Component } from '@angular/core';
import { ConnectionService } from 'ngx-connection-service';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hasNetworkConnection: boolean;
  hasInternetAccess: boolean;
  status: string;

  constructor(private connectionService: ConnectionService) {

    this.connectionService.updateOptions({
      heartbeatExecutor: options => new Observable<any>(subscriber => {
        if (Math.random() > .5) {
          subscriber.next();
          subscriber.complete();
        } else {
          throw new Error('Connection error');
        }
      })
    });

    this.connectionService.monitor().subscribe(currentState => {
      this.hasNetworkConnection = currentState.hasNetworkConnection;
      this.hasInternetAccess = currentState.hasInternetAccess;
      if (this.hasNetworkConnection && this.hasInternetAccess) {
        this.status = 'ONLINE';
      } else {
        this.status = 'OFFLINE';
      }
    });
  }
}

Changes

License

MIT License © M. Yıldıray Meriç & Balram Chavan (orginal work)

18.0.0

11 months ago

17.0.1

1 year ago

17.0.0

1 year ago

15.0.0

2 years ago

15.0.1

2 years ago

10.0.0

2 years ago

10.0.1

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

7.0.4

2 years ago

7.0.7

2 years ago

7.0.6

2 years ago

7.0.5

2 years ago

8.0.1

2 years ago

12.0.0

2 years ago

8.0.0

2 years ago

12.0.1

2 years ago

8.0.2

2 years ago

16.0.1

2 years ago

9.0.1

2 years ago

16.0.0

2 years ago

9.0.0

2 years ago

11.0.0

2 years ago

11.0.1

2 years ago

7.0.3

5 years ago

7.0.2

5 years ago

7.0.1

5 years ago

7.0.0

5 years ago