@ashetm / ng-network

@ashetm/ng-network 是一个库，它提供了一个指令、RxJS observable和一个RxJS操作符来跟踪设备的网络状态（在线/离线、连接质量）。

兼容性表

安装

你可以用npm安装它：

npm install @ashetm/ng-network

API

@ashetm/ng-network 暴露以下内容：

指令

NetworkDirective

• 选择器： [ashetmNetwork]

这个角 独立的 结构 指令监听网络连接状态的变化，并提供有关网络当前状态和连接丢失后经过的时间的可观察数据。它使用 fromNetworkEvents 检测在线/离线状态和 fromNetworkLastTimeConnected 跟踪自设备上次连接以来经过的时间。

使用的例子:

导入独立组件 NetworkDirective 在你的组件（或NgModule）中 imports：

@Component({
  standalone: true,
  imports: [AsyncPipe, NgIf, NetworkDirective],
  // ...
})

<ng-template ashetmNetwork let-network let-lastTimeConnected$="lastTimeConnected$">
  <div *ngIf="network | async">You are online</div>
  <div *ngIf="!(network | async)">You are offline</div>
  <div *ngIf="lastTimeConnected$ | async as lastConnected">Last connected: {{ lastConnected }} ms ago</div>
</ng-template>

或者用结构简写：

<div *ashetmNetwork="let network; lastTimeConnected$ as lastTimeConnected$">
  {{ (network | async) ? 'You are online' : 'You are offline' }}
</div>

解释:

• 网络：这个可观察对象首先发出当前状态，然后 true 当设备上线时 false 当它脱机时。
• lastTimeConnected美元：当设备处于脱机状态时，这个可观察对象每100毫秒发出一次连接丢失后经过的时间（以毫秒为单位）。它释放 undefined 当设备在线时。

自定义RXJS可观察对象

fromOfflineEvent()

function fromOfflineEvent(): Observable<void> { ... }

在设备脱机时发出通知。

返回:

发射空洞的可观测物体

例子:

fromOfflineEvent().subscribe(() => {
  console.log('Device is offline');
});

fromOnlineEvent()

function fromOnlineEvent(): Observable<void> { ... }

当设备上线时发出通知。

例子:

fromOnlineEvent().subscribe(() => {
  console.log('Device is online');
});

fromNetworkEvents()

function fromNetworkEvents(): Observable<boolean> { ... }

发出订阅时的当前状态(navigator.onLine),然后 true 当设备上线时 false 当它脱机时。重复的值将被跳过。

例子:

fromNetworkEvents().subscribe((isOnline: boolean) => {
  console.log(`Network status: ${isOnline ? 'Online' : 'Offline'}`);
});

fromNetworkLastTimeConnected()

function fromNetworkLastTimeConnected(): Observable<number | undefined> { ... }

当设备处于脱机状态时，每隔100毫秒发出连接丢失后经过的时间（以毫秒为单位）。发出 undefined 当设备在线时。

例子:

fromNetworkLastTimeConnected().subscribe((lastConnected: number | undefined) => {
  if(typeof lastConnected === 'number')
    console.log(`Last connected: ${lastConnected} ms ago`);
  else
    console.log(`Last connected: is currently connected`);
});

fromNetworkStatus()

function fromNetworkStatus(): Observable<NetworkStatus | undefined> { ... }

这个可观察对象提供了详细的网络状态信息(参见 NetworkStatus)，基于 网络信息API． 它在订阅时发出当前状态，然后在网络条件发生变化时发出。

它释放 undefined 当浏览器不支持网络信息API时。

例子:

fromNetworkStatus().subscribe((status: NetworkStatus | undefined) => {
  if (!status) {
    console.log('Network Information API not supported');
    return;
  }

  console.log(`Effective type: ${status.effectiveType}`);
  console.log(`Downlink: ${status.downlink} Mbps`);
  console.log(`RTT: ${status.rtt} ms`);
  console.log(`Data Saver Enabled: ${status.saveData}`);
});

自定义RXJS操作符

retryUntilOnline()

function retryUntilOnline<T>(durationStep: number = 1000, timeIncreasing: boolean = false): MonoTypeOperatorFunction<T>  { ... }

这个 retryUntilOnline 操作符 实验特征 当一个可观察操作因为设备离线而失败时，它会重新尝试：

• 如果源故障，而设备处于 离线，它会等待设备重新联机，然后重试 durationStep.
• 如果源故障，而设备处于 在线，错误将通过（这不是网络问题）。

参数:

• durationStep：设备恢复在线后重试的延迟时间，以毫秒为单位（默认为） 1000 ms）。
• timeIncreasing:当 true，延迟乘以尝试次数（1x, 2x, 3x…）(默认为 false）。

例子:

import { of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { catchError, tap } from 'rxjs/operators';

import { retryUntilOnline } from '@ashetm/ng-network';

// Mock API endpoint
const apiEndpoint = 'https://jsonplaceholder.typicode.com/posts/1';

// Simulated HTTP request
const httpRequest$ = ajax.getJSON(apiEndpoint).pipe(
  tap((response) => console.log('Request successful:', response)),
  retryUntilOnline(1000), // If offline, wait for the network, then retry 1 second later
  catchError((error) => {
    console.error('Request failed:', error);
    return of(null); // Handle the error and emit a fallback value
  })
);

// Subscribe to the observable
httpRequest$.subscribe({
  next: (data) => console.log('Final data:', data),
  error: (err) => console.error('Subscription error:', err),
  complete: () => console.log('Request completed'),
});

类型

NetworkStatus

这个 NetworkStatus 对象发出的网络状态对象的结构 fromNetworkStatus() 可观察到的。

参数:

• effectiveType：表示有效网络连接类型的字符串（例如4g、3g、2g或慢速2g）。
• downlink：连接的大致带宽，单位为兆比特/秒。
• rtt：请求的估计往返时间，单位为毫秒。
• saveData：一个布尔值，指示用户是否启用了浏览器的数据保存模式。

服务器端呈现

该库可以安全地与服务器端呈现一起使用。在服务器端，没有浏览器：

• fromOnlineEvent() 和 fromOfflineEvent() 发出。
• fromNetworkEvents() 发出 true (假设在线)。
• fromNetworkLastTimeConnected() 和 fromNetworkStatus() 发出 undefined.
• retryUntilOnline 传递错误。

问题

寻找维护者，或者如果有问题或任何想法要添加。请在github存储库中创建问题。