Socket-io动态初始化

Question

问题陈述

在我的 Angular 应用程序上实现 socket.io 之后，我很好奇是否可以在客户端（前端）app.module 文件上动态设置 "SocketIoModule" .

的描述从服务器（后端）配置文件加载 URL 和端口

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
import { SocketService } from './services/socket.service';
const socketConfig: SocketIoConfig = { url: 'http://localhost:3000', options: {} };

@NgModule({

[..]

imports: [
    BrowserModule,
    SocketIoModule.forRoot(socketConfig)
  ],
providers: [
  // all other providers
  <SocketProvider>
]

[..]

//package.json

   "ngx-socket-io": "^2.1.1",
   "socket.io": "^2.2.0",
   "socket.io-client": "^2.2.0"

期望的结束状态

//backend config service
let url = config.env.url.base + config.env.url.socketIoPort;
const socketConfig: SocketIoConfig = { url: url, options: {} };

附带说明一下，主要挑战是当客户端正在加载时，UI 无法访问服务器端（Angular 安全性）。

我还读到，实现此目的的最佳方法是使用 "environment/environments" 文件 [Dev、Staging、Prod]。

最后的说明：这一切的重点是有一个集中的文件来包含所有配置并使其更容易维护。

Answer 1

为了客户端从服务器动态获取 socket.io 配置信息，您必须在 <script> 标签中的 Javascript 变量中包含配置信息22=] 客户端来自运行的文件，或者你必须有一个已知的 URL 客户端可以发送 Ajax 调用来请求 socket.io 配置信息。

第一个可能是服务器端模板系统的一部分，该系统包含一个脚本标记，该标记定义了一个 Javascript 对象，该对象在站点的每个页面中包含 socket.io 配置信息，因此 socket.io 配置信息始终可用。该服务器端模板系统可以从您在服务器中的一个中心位置获取数据。

第二个可以在已知 URL 处设置一个 Ajax 可达路由，客户端可以根据需要获取配置信息。这可能比第一个选项慢，因为它涉及到服务器的单独往返，但可能对站点架构的影响较小，因为它不必影响站点上 HTML 文件的生成，它只是 Javascript 与您的 socket.io 初始化代码一起使用。在服务器上，它只是一个额外的添加路径，独立于其他所有内容。

Socket-io动态初始化

Socket-io dynamic initialization

node.js

socket.io

typescript

angular5

问题陈述

期望的结束状态