Ionic 4 IOS Socket.io 如何动态获取配置

Posted 2023-03-13

【中文标题】Ionic 4 IOS Socket.io 如何动态获取配置

【英文标题】：Ionic 4 IOS Socket.io how to get config dynamically

【发布时间】：2020-03-15 07:51:59

【问题描述】：

我正在使用离子和套接字 IO 编写应用程序，在 app.module.ts 中，套接字的导入需要 url 和选项的配置。这是硬编码的，我希望从表单或存储中动态地进行此配置。我不想为 IP 地址或服务器端口的任何更改部署应用程序，也不想使用 dns 链接。 你能告诉我怎么做吗？

我正在使用 ionic : 5.4.5、Cordova 9.0.0 并在 ios 12.4 上部署

这是我的 app.module.ts

import  NgModule  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  RouteReuseStrategy  from '@angular/router';
import  ErrorHandler  from '@angular/core';
import  IonicModule, IonicRouteStrategy  from '@ionic/angular';
import  SplashScreen  from '@ionic-native/splash-screen/ngx';
import  StatusBar  from '@ionic-native/status-bar/ngx';

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  HttpClientModule  from '@angular/common/http';

import  SocketIoModule, SocketIoConfig  from 'ng-socket-io';
const config: SocketIoConfig =  url: 'http://192.168.0.17:3001', options:  ;


@NgModule(
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    SocketIoModule.forRoot(config),
  ],
  providers: [
    StatusBar,
    SplashScreen,
     provide: RouteReuseStrategy, useClass: IonicRouteStrategy 
  ],
  bootstrap: [AppComponent]
)
export class AppModule  

感谢您的回复。

【参考方案1】：

app.module.ts 是您的核心应用程序模块，它应该快速加载以允许其他模块和组件尽快准备好。因此，向其添加业务逻辑以获取 Socket.io 的动态配置可能不是最理想的，因为您可能会导致 UX 问题（更长的加载时间等）。

我建议将 socket.io 的初始化/配置从 app.module.ts 移到另一个模块，该模块稍后会在应用的启动生命周期中加载。

我有类似的要求，我是这样处理的：

-使用其他不需要通过模块初始化的socket.io客户端库：https://github.com/socketio/socket.io-client

-创建一个服务并将这个库导入其中：

import  Injectable  from "@angular/core";
import io from "socket.io-client";

export class FoundationProvider 
    public sockets;

-创建了一个在我从持久性中获取套接字配置详细信息和其他详细信息后调用的方法：

initSocketsIO() 
    if (this.data.userID && this.state.appIsOnline) 
      this.sockets = io(
        this.config.apiBaseUrl + "?_id=" + this.data.userID,
        
          reconnectionAttempts: 3,
          reconnectionDelay: 10000,
          transports: ['websocket']
        
      )
      this.sockets.on("snippets", event => 
        this.handleIncomingNotification(event.message);
      )
      this.sockets.on("tasks", event => 
        this.handleIncomingNotification(event.message);
      )
      this.sockets.on("payments", event => 
        this.handleIncomingNotification(event.message);
      )
    ;
  ;

如果您仍然需要当前的库来工作 - 那么您可能需要尝试将其移至另一个合适的模块，该模块将在您的应用程序启动生命周期的后期加载，此时全局配置和变量已经在整个应用程序中可用。希望这会有所帮助。

【讨论】：

你好@Sergey，很抱歉回复晚了。我一直很愚蠢地想打扰 ng-socket-io 库。它与 socket.io-client 完美配合。我现在可以根据需要更改 ip 服务器和端口。文档很全面。非常感谢这种方法让我不那么疯狂并让我省了一些头痛

cool;) 很高兴它有帮助！请在您方便的时候接受答案。