Установить связь через веб-сокет с реагированием и экспрессом (nginx, docker)

Question

Попытался настроить соединение через веб-сокет, и оно работало нормально, когда я работал в среде локального хоста, однако, как только я настроил среду докера, клиенту (реагировать) трудно установить связь через веб-сокет с экспресс-связью.Какой URL я должен определить, чтобы веб-сокет был открыт между 2?я пробовал http:/api или http://localhost:3050, но ни один из них не был успешным

Это мой файл nginx.conf

upstream client {
    server client:3000;
}

upstream api {
    server api:8080;
}

server{

    listen 80;

    location / {
        proxy_pass http://client;
    }

    location /socket.io {
        proxy_pass http://api;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api{
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

, и этот мой докер составляет

version: "3"
services:
  nginx:
    restart: always
    image: coco/nginx
    build:
      dockerfile: Dockerfile.dev
      context: ./nginx
    ports:
      - "3050:80"
  api:
    image: coco/server
    build:
      dockerfile: Dockerfile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
  client:
    image: coco/client
    build:
      dockerfile: Dockerfile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app

Ключевая проблема в реактивном контейнере, который требует настроить саму websocket с этой строкой кода const socket = socketIOClient ("http: / api") ;, Когда он был на localhost, он работал нормально, а теперь, когда я запускаюdocker-compose, он терпит неудачу.Однако сервер может принимать вызовы Axios и т. Д., Его просто невозможно установить через веб-сокет из клиента

в моем файле app.js, у меня есть этот

// configuring the port which is from config folder
let server = app.listen(config.port, function (err) {
    if (err) throw err;
    console.log("Server started on port " + config.port);
});

const io = require('socket.io').listen(server)
require('./routes/routes')(app, io)

В моем компоненте реакцииУ меня есть кнопка, и при нажатии она выполняет следующую логику

  const socket = socketIOClient("http://api");
    socket.on("connect", () => {
      console.log("Socket Connected");
      socket.on("tweets", data => {
       console.log(data)
      });
    });

, но она ничего не отображает и не подключается ни к чему

ОБНОВЛЕНИЕ:

В какой-то момент этоработал без особых изменений, а затем он замерз, я добавил несколько строк кода, пытаясь отладить его

 socket.on("error", function(err) {
        console.log("Socket.IO Error");
        console.log(err); // this is changed from your code in last comment
      });

и вот что я нашел

Socket.IO Error
 Invalid namespace

Answer 1

Если кто-нибудь когда-нибудь сталкивался с этой проблемой, вот решение

1) Указание пути для производства в экземпляре socket.io

const socket = socketIOClient({ path: "/socket.io" });

2) Внутри nginx, необходимо настроитьмаршрутизация

location /socket.io {
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_http_version 1.1;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://api/socket.io/;
}

Примечание: расположение идентично указанному пути в socketIOClient из предыдущего шага.Затем proxy_pass: отправляет запрос на сам сервер с помощью /socket.io

Надеюсь, это кому-нибудь поможет