ionic2 中的网络监测功能

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

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

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

$ ionic plugin add cordova-plugin-network-information

开启网络状态动态检测：

// 开启网络监测startNetDetect() {// watch network for a disconnectlet disconnectSubscription = Network.onDisconnect().subscribe(() => {console.log('network was disconnected :-(');});// stop disconnect watch （停止断网检测）// disconnectSubscription.unsubscribe();// watch network for a connectionlet 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 disconnectlet disconnectSubscription = Network.onDisconnect().subscribe(() => {console.log('network was disconnected :-(');});// stop disconnect watch （停止断网检测）// disconnectSubscription.unsubscribe();// watch network for a connectionlet 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

The 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。

ionic2 中的网络监测功能相关推荐

ionic3实现app启动时进行网络监测功能
需要联网的app一般都需要进行网络监测,尤其是在app启动时,若未发现网络连接应给出提示,本文在参照官网的基础上实现了app启动进行网络监测,实现该功能其实非常简单,只需用到cordova的一个插件- ...
Linux用ICMP协议实现简单Ping网络监测功能
From: http://www.linuxidc.com/Linux/2012-05/61073.htm ICMP是(Internet Control Message Protocol)Intern ...
iOS APP中嵌入网速监测功能
企鹅的手机管家.一些网页都提供了网速监测功能.在开发过程中我们偶尔也需要开发这个模块,以提示用户网速的状况,增强用户体验. 常见的网络测速方案通过调研发现,目前常见的网络测速方案只有两种: 方案1: ...
ping 丢包网络摄像头_FIFA21 新加入网络连接监测功能
EA 于昨日开始推送 FIFA21 主机平台最新的更新补丁,除了之前讲到的一些内容之外,新加入了 FIFA21 网络连接监测功能.这个功能允许你在游戏的同时,通过屏幕上显示的相关图标,来查看当前网络对 ...
电子商务网站建设策划书_电子商务网站建设方案：网站设计中网络营销功能不容忽视...
如果你的网站要在同行业中脱颖而出,那么你的网站必须是网络营销和电子商务的完美结合,一个拥有很强网络营销功能的电子商务网站.以前更多的网站在电子商务上下功夫,而忽视了网络营销的重要性. 一个电子商务网站 ...
sqlserver 安装共享功能什么意思_网络多功能电力仪表安装要注意什么
ACR 系列网络多功能电力仪表,是针对电力系统.工矿企业.公用设施.智能大厦的电力监控需求而设计的智能表,它集成电力参数的测量(如单相或者三相的电流.电压.有功功率.无功功率.视在功率.频率.功率因数 ...
论无线网络中的网络与信息安全技术
试题一论无线网络中的网络与信息安全技术无线网络应用越来越广泛,也带来了极大的便利.但是,无线网络各类应用也带来了各种安全问题,迫使管理员采用相应的网络与信息安全技术. 请围绕"论无线网络 ...
网络监测是如何工作的？
网络监测是如何工作的? 网络监测(Website Monitoring,又名Network Monitoring),顾名思义,是在网络上对特定的目标进行监测的一种服务. 被监测的一般是在网络上需要长时 ...
Windows CE下的网络监测工具(上)
作者:马宁最近被一个软件网络连接的问题,折腾得死去活来.问题本身不复杂,主要是网络设置不同造成的,在这里不多说了.在调试过程中,用到了Windows CE下的几个网络监测工具,才了解到Windows ...

ionic2 中的网络监测功能

ionic2 中的网络监测功能相关推荐

最新文章

热门文章