Question

试图设置websocket连接，当我在本地主机环境中时，它工作正常，但是，一旦我设置了docker envrionment，客户端（反应）就很难与express建立Web套接字通信。我应该定义哪个网址以在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;
    }
}

这是我的docker组成的

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

关键问题是在react容器中，该容器需要使用以下代码行const socket = socketIOClient（“ http：/ api”）;来设置websocket本身，当它在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)

在我的react组件中，我有一个按钮，按下该按钮会执行以下逻辑

  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

引用服务器本身

希望它对某人有帮助

通过react和express（nginx，docker）建立网络套接字通信

1 个答案: