web-dev-qa-db-fra.com

Comment détecter la connectivité réseau dans Angular 2?

J'essaie d'écrire un composant qui détectera si l'application est en ligne ou hors ligne afin de déclencher un autre événement. Existe-t-il une fonction intégrée pouvant être exploitée?

angulartypescriptnetworking
7
Farhan Islam
  • Pour écouter et réagir au changement, vous avez besoin d'un gestionnaire d'événements. En angulaire, les observables sont les meilleurs

  • Pour être informé de la mise en ligne ou de la déconnexion de l'application, utilisez les événements en ligne/hors ligne

    online$ = fromEvent(window, 'online');
offline$ = fromEvent(window, 'offline');

Enchaînez vos autres événements à ceux-ci:

online$.subscribe(e => this.syncWithServer());

Voir également cet article sur navigator.onLine . Notez que les navigateurs n'implémentent pas cet événement de manière uniforme. Dans certains cas, "en ligne" signifie simplement que le navigateur est connecté à un réseau local, pas à Internet. Pour obtenir des informations plus fiables, vous devrez peut-être effectuer un test en essayant d'envoyer une requête ping à un serveur distant lors du déclenchement de l'événement.

online$ = fromEvent(window, 'online').pipe(
            switchMap(e => this.pingServer()),
            filter(e => e)
          );

offline$ = fromEvent(window, 'offline').pipe(
            switchMap(e => this.pingServer()),
            filter(e => !e)
          );

Où pingServer fera une demande à distance et retournera un observable qui émettra true lorsque la demande aboutira, ou false sinon.

10
BeetleJuice
export class HomeComponent implements OnInit {
   public isOnline : boolean = navigator.onLine;
}
2
Amin Najafi

Approche sûre pour écouter les états du réseau

Les réponses données ci-dessus fonctionnent bien mais ne sont pas considérées comme une approche sûre.

1.Les objets dépendants du navigateur ne doivent pas être référencés directement. Vérifiez toujours la plateforme. 

2. En outre, des fonctionnalités telles que la connexion réseau doivent être encapsulées dans un service. 

Ci-dessous, le ConnectionService qui peut être abonné pour écouter les états du réseau. Il suit le style rxjs 6.

Code complet 

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { Observable, fromEvent, merge, empty } from 'rxjs';
import { isPlatformBrowser } from '@angular/common';
import { mapTo } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {

  private connectionMonitor: Observable<boolean>;

  constructor(@Inject(PLATFORM_ID) platform) {
if (isPlatformBrowser(platform)) {
  const offline$ = fromEvent(window, 'offline').pipe(mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = empty();
}



 }

  monitor(): Observable<boolean> {
    return this.connectionMonitor;
  }
}

dans le composant, vous pouvez écouter en vous abonnant à monitor () ou directement en HTML à l'aide d'un canal asynchrone.

0
abhay tripathi