首页 > 其他分享 >ionic2 中的网络监测功能

ionic2 中的网络监测功能

时间:2022-11-28 19:04:31浏览次数:87  
标签:console Network watch 网络 ionic2 connection log 监测 network


参考:​​http://ionicframework.com/docs/v2/native/network/​

(后须还将发表其他我正在ionic2使用的插件或功能)

增加网络监测功能的cordova插件:

$ ionic plugin add cordova-plugin-network-information


开启网络状态动态检测:

// 开启网络监测
startNetDetect() {
// watch network for a disconnect
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});

// stop disconnect watch (停止断网检测)
// disconnectSubscription.unsubscribe();

// watch network for a connection
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait

// prior to doing any api requests as well.
setTimeout(() => {
this.showNetworkStatus();
}, 3000);
});

// stop connect watch (停止联网检测)
// connectSubscription.unsubscribe();
}


为加入显示正在查看当前网络状态的效果,加入LoadingController,显示网络检测过程:

checkNetwork() {
let loader = this.loadingCtrl.create({
content: "网络监测中..."
});
loader.present();

setTimeout(() => {
loader.dismiss();
this.showNetworkStatus();
}, 3000);
}

显示网络状态信息的方法:

showNetworkStatus() {
if(Network.connection == 'unknown') {
console.log('This is a unknown network!');
} else if(Network.connection == 'none') {
console.log('none network!');
} else {
console.log('we got a ' + Network.connection + ' connection, woohoo!');
}
}


程序如下:

home.html

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding class="home">
<h2>Welcome to Ionic!</h2>
<button (click)="startNetDetect()">开启网络监测</button>
<button (click)="checkNetwork()">当前网络状态</button>
</ion-content>


home.ts

import {Component} from '@angular/core';
import {NavController, LoadingController} from 'ionic-angular';
import {Network} from "ionic-native";

@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(private navCtrl: NavController,
private loadingCtrl: LoadingController) {

}

// 开启网络监测
startNetDetect() {
// watch network for a disconnect
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});

// stop disconnect watch (停止断网检测)
// disconnectSubscription.unsubscribe();

// watch network for a connection
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait

// prior to doing any api requests as well.
setTimeout(() => {
this.showNetworkStatus();
}, 3000);
});

// stop connect watch (停止联网检测)
// connectSubscription.unsubscribe();
}

checkNetwork() {
let loader = this.loadingCtrl.create({
content: "网络监测中..."
});
loader.present();

setTimeout(() => {
loader.dismiss();
this.showNetworkStatus();
}, 3000);
}

showNetworkStatus() {
if(Network.connection == 'unknown') {
console.log('This is a unknown network!');
} else if(Network.connection == 'none') {
console.log('none network!');
} else {
console.log('we got a ' + Network.connection + ' connection, woohoo!');
}
}
}



Advanced

​connection​​ property will return one of the following connection types: ​​unknown​​, ​​ethernet​​, ​​wifi​​, ​​2g​​, ​​3g​​, ​​4g​​, ​​cellular​​, ​​none​​ Network.connection 的可能值为unknown、ethernet、wifi、2g、3g、4g、cellular、none。



标签:console,Network,watch,网络,ionic2,connection,log,监测,network
From: https://blog.51cto.com/u_15894233/5893494

相关文章

  • ionic2上实现跳转应用市场的功能
        需要使用到如下插件:(参考官网的ionic-native)​​AppVersion​​ 主要用于获取Appde包名:AppVersion.getPackageName();​​WebIntent​​用于在Android平台上调......
  • Ionic2中的相册选择和拍照上传——ImgService
    目录​​目录​​​​前言​​​​Cordova准备​​​​ImgService服务的实现​​​​ImgService服务的使用​​​​示例效果​​​​相册选择器的汉化​​​​参考​​前言......
  • Linux中的网络管理——网络配置及命令
    目录​​目录​​​Linux网络配置​​​ifconfig命令​​​Linux网络配置文件​​​网卡信息文件​​​​主机名文件​​​​DNS配置文件​​​VMWare中Linux的网络参数配置......
  • 全连接神经网络手写数字识别实验
    【实验目的】理解神经网络原理,掌握神经网络前向推理和后向传播方法;掌握使用pytorch框架训练和推理全连接神经网络模型的编程实现方法。【实验内容】1.使用pytorch框架,......
  • 学习过程中遇到报错 通过网络和自己的理解独立解决问题的集合 这个将会是我的宝藏哦
    第一次自己独立解决问题2022-11-2817:37:34星期一1.报错信息:TypeError:objectsupportingthebufferAPIrequired2.翻译报错:TypeError:需要支持缓冲区API的对象3......
  • 实验五:全连接神经网络手写数字识别实验
    【实验目的】理解神经网络原理,掌握神经网络前向推理和后向传播方法;掌握使用pytorch框架训练和推理全连接神经网络模型的编程实现方法。【实验内容】1.使用pytorch框架,......
  • java程序员计算机网络面试题大全含答案
    java程序员计算机网络面试题大全含答案java程序员计算机网络面试题大全含答案GET请求请注意,查询字符串(名称/值对)是在GET请求的URL中发送的:/test/demo_form?name1=val......
  • iOS开发之检测网络链接的实际状态RealReachability
    之前写的项目用了苹果自带的Reachability文件进行网络状态判断,发现判断情况并不是很理想,所以为了解决这个问题,查找了一些资料,来改变旧的判断方式,使用的是一个很好用的、封装......
  • Prometheus 监测 RocketMQ 最佳实践
    本文作者:郭雨杰,阿里云智能技术专家。Prometheus集成的50多款云产品中,RocketMQ在可观测方面实现了非常完善的功能,是一个特别具有代表性的云产品。RocketMQ如何接入......
  • 基于图数据库的复杂网络分析能力
    基于图数据库的复杂网络分析能力概览​​一、社交网络与图数据库技术​​​​二、搜索排名与图数据库技术​​​​三、评分系统与图数据库技术​​​​四、自然语言处理与图......