构建时地址未知时如何确定服务器WebSocket url？答案

【问题标题】：How to determine a server WebSocket url when the address is unknown at build time?构建时地址未知时如何确定服务器WebSocket url？
【发布时间】：2019-05-24 12:17:12
【问题描述】：

虽然我对 Web 套接字比较陌生，但我的开发环境的 Angular-7 客户端和 node/express 开发服务器使用 WebSocket 进行通信非常成功。

问题在于，在部署中，实际服务器将在便携式仪器上运行，该仪器本身可以驻留在任何客户网络上的任何手动 IP 地址。

有很多使用 Angular 和 WebSockets 的例子。它们都使用已知的 IP 地址。我所遵循的技术非常简单。基本的WebSocket创建代码如下：

websocket.service.ts

 constructor() {
    this.socket$ = new WebSocketSubject(environment.wsUrl);
    this.subscription$ = this.socket$
      .subscribe(
      (message) => this.processWebSocketMessage(message),
      (err) => console.error(err),
      () => console.warn('Connection closed')
    );
  }

environment.ts

export const environment = {
  production: false,
  wsUrl: 'ws://localhost:8999'
};

我的问题是我没有找到关于 IP 的服务器的生产构建 (environment.prod.ts) 的 wsUrl 属性值应该是什么的示例构建时地址未知。

我强烈怀疑我在这里遗漏了一些非常简单的东西。我应该动态确定服务器 IP 地址吗？欢迎所有建议。

【问题讨论】：

环境属性用于静态数据。您需要能够在运行时配置 URL。有很多方法可以做到这一点。从服务器读取 JSON 文件有什么问题？
是的@cgTag，我已经看到了这种技术的讨论。这是有可能的，因为我可以访问服务器代码来实现它。

标签： angular websocket server

【解决方案1】：

在 environment.ts 中不必有 wsUrl。您可以通过服务获取 url，然后创建您的 websocket 套接字。

websocket.service.ts

constructor(private servUrl:UrlService) {

servUrl.getUrlDinamicaly().subscribe(res => {

    this.socket$ = new WebSocketSubject(res.wsUrl);

    this.subscription$ = this.socket$.subscribe(
      (message) => this.processWebSocketMessage(message),
      (err) => console.error(err),
      () => console.warn('Connection closed')
    );
  }
 );
}

url-service.service.ts

  getUrlDinamicaly(){
    return this.httpClient.get(this.serverUrl + '/get_url_server');
  }

使用 getUrlDinamicaly 您将获得 websocket 服务器的当前 url。服务服务器无法更改其 url。

【讨论】：

我了解 Yordano（请注意，我认为存在剪切和粘贴错误。应该将 res.wsUrl 替换为对 getUrlDynamically() 的调用?)

【解决方案2】：

针对多种浏览器进行更深入的研究和测试。我已经确定了以下解决方案。浏览器已经“知道”服务器的地址。唯一的附加部分是根据当前环境提供正确的端口。

websocket.service.ts

   this.socket$ = new WebSocketSubject(
     'ws://' + window.location.hostname + ':' + environment.wsPort
   );

environment.ts

export const environment = {
  production: false,
  wsPort: 8999
};

environment.prod.ts

export const environment = {
  production: true,
  wsPort: 8080
};

【讨论】：