Docker Compose 和 React JS 的 WebSocket 连接问题

Question

我遇到本地部署问题。当使用 Docker Compose 运行 Kaldi 服务器和 React JS 前端时，问题出在 WebSocket 连接上。当 Kaldi 服务器在容器中运行并且 Node.js 服务器在本地计算机上运行时，设置工作正常。但是，当两者都在 Docker 容器中运行时，WebSocket 连接会失败。

Docker Compose 配置 这是我的 docker-compose.yml 文件：

version: '3'
services:
  websocket-server:
    image: alphacep/kaldi-ru:latest
    expose:
      - "2700"
    ports:
      - "2700:2700"

  frontend-server:
    build:
      context: .
      dockerfile: docker/Dockerfile.frontend
    ports:
      - "3000:3000"
    stdin_open: true

React JS 配置 在我的 React JS 前端中，我使用 WebSocket 连接到 Kaldi 服务器。 WebSocket URL 配置如下：

const URL = `ws://${process.env.REACT_APP_WS_HOST_NAME}:2700`;

我已在与 Docker Compose 一起使用的生产环境中将环境变量

REACT_APP_WS_HOST_NAME

设置为

"websocket-server"

。

错误信息 当我在 Docker 容器中运行这两个服务时，出现以下错误：

Updated transcription:
LessonPage.js:40 WebSocket connection to 'ws://websocket-server:2700/' failed:
b @ LessonPage.js:40

LessonPage.js:76 WebSocket error: undefined No reason provided
d.current.d.current.readyState.WebSocket.OPEN.d.current.onerror @ LessonPage.js:76

LessonPage.js:69 WebSocket connection closed
LessonPage.js:71 WebSocket closed abnormally with code: 1006

LessonPage.js:103 [Deprecation] The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead.
b @ LessonPage.js:103

LessonPage.js:141 Uncaught (in promise) InvalidStateError: Cannot close a closed AudioContext.

当 Kaldi 服务器在容器中运行并且 Node.js 服务器在本地计算机上运行时，WebSocket 连接工作正常。 仅当这两个服务都在 Docker 容器中运行时才会出现此问题。

1. 当这两个服务都在 Docker 容器中运行时，什么可能导致 WebSocket 连接失败？
2. 如何排查并解决此问题？

任何帮助或见解将不胜感激！

附注

1. 我尝试在没有环境的情况下显式设置

   URL

   ：

   const URL = 'ws://websocket-server:2700';

2. 我也尝试过使用网络设置；
3. 我已经确保 kaldi 图像映射到 0.0.0.0 地址 https://github.com/alphacep/vosk-server/blob/ddd8e93a95fc9dc09ea17f914e8834f62944e556/websocket/asr_server.py#L93

docker-compose exec frontend-server sh
# ls
README.md  build  node_modules  package-lock.json  package.json  
# wscat -c "ws://websocket-server:2700"
Connected (press CTRL+C to quit)

Answer 1

出乎意料的是，我尝试用

const URL = 'ws://websocket-server:2700';

更改

const URL = 'ws://localhost:2700';

并且成功了。