Ionic 3 - 如何使用cordova插件与离子网络接口？

Question

我的问题：我需要我的应用程序搜索本地WiFi网络以查找具有特定端口上的应用程序的服务器计算机。 我不想将服务器IP地址硬编码到应用程序中，因为它可能在许多地方使用。

更新：所以我需要能够找到网络上所有设备的IP地址。

到目前为止我做了什么：

通过执行以下步骤，Iv遵循堆栈溢出和在线的其他指南：

1.安装cordova插件：

 "cordova plugin add cordova-plugin-networkinterface"

2.在全局范围内声明变量以访问该对象

declare var NetworkInterface: any;
export class TestClass{}

3.使用组件内的全局变量调用对象

NetworkInterface.getWiFiIPAddress((ip) => {
   console.log("network ip address = " + ip);
});

但是，从移动设备运行时，这会导致运行时出错：

错误：未捕获（在承诺中）：ReferenceError：未定义NetworkInterface

我还尝试在全局声明一个变量，然后尝试在组件中应用字符串值，只是为了得到同样的问题。 这个变量在全球范围内不起作用似乎更有问题吗？ 任何帮助都会很棒！

Answer 1

您需要使用以下CLI ：

ionic plugin add cordova-plugin-networkinterface --save 

您需要将其声明为global.And您还需要在device或emulator上测试它，因为这是一个plugin 。

 declare var NetworkInterface: any;

旧答案：

您可以使用本机网络插件轻松完成。

ionic cordova plugin add cordova-plugin-network-information
npm install --save @ionic-native/network

来自doc：

import { Network } from '@ionic-native/network';

constructor(private network: Network) { }

...

// watch network for a connection
let connectSubscription = this.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(() => {
    if (this.network.type === 'wifi') {
      console.log('we got a wifi connection, woohoo!');
    }
  }, 3000);
});

Answer 2

通过直接访问window对象然后访问networkinterface对象解决了这个问题。

代码解决方案

 (<any>window).networkinterface.getWiFiIPAddress((ip) => {
     console.log("network ip address = " + ip);
 });

这意味着我不再需要使用全局变量作为参考。 希望这会帮助别人。

感谢Sampath的另一个解决方案; 看来我应该使用：

ionic cordova plugin add cordova-plugin-networkinterface --save

代替：

cordova plugin add cordova-plugin-networkinterface

Answer 3

如果要访问网络插件，只需将其添加到app.module.ts提供程序集合中即可。 这将它注册为单身人士。

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Network
  ]
})
export class AppModule { }

然后，您可以根据插件文档简单地导入并在页面上使用它。