如何检查是否有网络连接

Question

如何检查浏览器是否有网络连接....

使用角码....

我需要设置一个场景，当连接离线时，应用程序会提醒一条消息。据说论坛中的 sn-p 在移动设备中可以正常工作。如何调整代码以使其在浏览器中正常工作环境也是。任何帮助表示赞赏，。我是 ionic 4 的新手。

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx'
import { BehaviorSubject, Observable } from 'rxjs';
import { ToastController, Platform } from '@ionic/angular';

export enum ConnectionStatus {
  Online,
  Offline
}

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

  private status: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  constructor(private network: Network, private toastController: ToastController, private plt: Platform) {
    this.plt.ready().then(() => {
      this.initializeNetworkEvents();
      let status =  this.network.type !== 'none' ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.status.next(status);
    });
  }

  public initializeNetworkEvents() {

    this.network.onDisconnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Online) {
        console.log('WE ARE OFFLINE');
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    });

    this.network.onConnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Offline) {
        console.log('WE ARE ONLINE');
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
    });
  }

  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);

    let connection = status == ConnectionStatus.Offline ? 'Offline' : 'Online';
    let toast = this.toastController.create({
      message: `You are now ${connection}`,
      duration: 3000,
      position: 'bottom'
    });
    toast.then(toast => toast.present());
  }

  public onNetworkChange(): Observable<ConnectionStatus> {
    return this.status.asObservable();
  }

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();
  }
}

Answer 1

在 Angular 或原生 javascript 中，您可以使用浏览器窗口 API 事件 online 和 offline。

稍后您可以使用 Behaviorsubject

将其包装在任何服务中

您可以将以下事件与 angular 中的 HostListener 装饰器一起使用来检测在线或离线。 这适用于所有主流浏览器，包括移动浏览器。

  @HostListener("window:online", ["$event"])
  onlineEvent(event) {
    this.processOnline(event);
  }
  processOnline(event){
    if (event.type == "online") {
      // do something here when app is online or become online after gets offline
    }
  }
  @HostListener("window:offline", ["$event"])
  offlineEvent(event) {
    this.processOfflineEvent(event);
  }
  processOfflineEvent(event){
    if (event.type == "offline") {
      // do something here when app is offline
    }
  }

您可以检查实现here 看demohere，打开页面，断开wifi或者电脑上任何连接的网络。