Как определить URL сервера WebSocket, когда адрес неизвестен во время сборки?

Question

Хотя я относительно новичок в веб-сокетах, клиент моей среды разработки Angular-7 и сервер разработки узлов / экспрессов довольно успешно взаимодействуют с помощью WebSockets.

Проблема заключается в том, что при развертывании реальный сервербудет работать на портативном приборе, который сам может находиться на любом 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'
};

Моя проблема в том, что я не нашел примеров того, каким должно быть значение свойства wsUrl для производственной сборки ( environment.prod.ts ) для сервера с IP-адресом:неизвестно во время сборки.

Я сильно подозреваю, что мне здесь не хватает чего-то очень простого.Должен ли я определять IP-адрес сервера динамически?Все предложения приветствуются.

Answer 1

После более глубокого исследования и тестирования на нескольких браузерах. Я остановился на следующем решении. Браузер уже «знает» адрес сервера. Единственной дополнительной деталью является предоставление правильного порта в зависимости от текущей среды.

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
};

Answer 2

Не обязательно иметь wsUrl в environment.ts. Вы можете получить URL-адрес через службу, а затем создать сокет веб-сокета.

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 вы получите текущий URL-адрес сервера веб-сокетов. Сервер службы не может изменить свой URL.