如何检测Angular 2中的网络连接？

Question

我正在尝试编写一个组件来检测应用程序是在线还是离线,以便它可以触发另一个事件.是否有可以利用的内置功能？

Answer 1

• 要收听并做出改变,您需要一个事件处理程序.在Angular中,Observables是最好的

• 要收到有关在线或离线的应用程序的通知,请依赖在线/离线事件

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

将您的其他活动链接到这些:

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

另见本文navigator.onLine.请注意,浏览器不会统一实现此事件.在某些情况下,"在线"只意味着浏览器连接到本地网络,而不是互联网.要获得更可靠的信息,您可能需要在事件触发时尝试ping远程服务器进行测试.

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

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

pingServer将在何处发出远程请求并返回true在请求成功时发出的observable,false否则返回.

Answer 2

侦听网络状态的安全方法

上面给出的答案效果很好，但不被认为是安全的方法。

1.不应该直接引用浏览器依赖的对象，始终检查平台。

2.其他功能如网络连接必须封装到服务中。

下面是可以订阅以监听网络状态的 ConnectionService。它遵循 rxjs 6 风格。

完整代码

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

在组件中，您可以通过订阅 monitor() 或使用异步管道直接进入 HTML 来监听。