Búsqueda de sitios web

typescript - ¿Cómo puedes detectar la conectividad de red en Angular 2?

Estoy tratando de escribir un componente que detecte si la aplicación está en línea o fuera de línea para que pueda activar otro evento. ¿Existe una función incorporada que se pueda utilizar?

Respuesta #1

  • Para escuchar y reaccionar al cambio, necesitas un manejador de eventos. En Angular, los Observables son los mejores

  • Para ser notificado de que la aplicación se conecta o se desconecta, confía en los eventos de en línea/fuera de línea

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

Encadena tus otros eventos a estos:

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

Vea también este artículo sobre navigator.onLine. Tenga en cuenta que los navegadores no implementan este evento de manera uniforme. En algunos casos, "en línea" solo significa que el navegador está conectado a una red local, no a Internet. Para obtener información más confiable, es posible que necesite hacer la prueba intentando hacer ping a un servidor remoto cuando se dispare el evento.

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

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

Donde pingServer hará una solicitud remota y devolverá un observable que emite true cuando la solicitud sea exitosa, o false de lo contrario.

Respuesta #2

Enfoque seguro para escuchar los estados de la red

Las respuestas dadas arriba funcionan bien pero no se consideran un enfoque seguro.

1. No se debe hacer referencia directa a objetos dependientes del navegador, siempre verifique la plataforma.

2. Además, funcionalidades como la Conexión de Red deben ser encapsuladas en un servicio.

A continuación se muestra el ConnectionService al que se puede suscribir para escuchar los estados de la red. Sigue el estilo de rxjs 6.

Código Completo

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(startWith(!window.navigator.onLine), mapTo(false));
  const online$ = fromEvent(window, 'online').pipe(startWith(window.navigator.onLine), mapTo(true));
  this.connectionMonitor = merge(
    offline$, online$
  );
} else {
  this.connectionMonitor = EMPTY;
}



 }

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

en el componente, puedes escuchar suscribiéndote a monitor() o directamente en HTML usando el pipe async.

Artículos relacionados