Socket.io Socket.onPacket 错误与反向代理 Nginx

Question

我有一个与节点.js服务器通信的小角度应用程序。两者都部署在 aws 上，我使用 Nginx 反向代理在端口 4000 上访问节点.js服务器。

nodejs.server 的所有endpoint都工作正常，除了 socket.io 连接。当我在我的机器中运行两个应用程序（前端应用程序和节点.js服务器）时，socket.io 连接工作正常，但是当我尝试在 aws 上部署它时，我在前端应用程序中收到此错误：

Error: server error
        at Socket.onPacket (socket.js:401)
        at XHR.<anonymous> (socket.js:216)
        at XHR.push.dMso.Emitter.emit (index.js:145)
        at XHR.onPacket (transport.js:103)
        at callback (polling.js:101)
        at Array.forEach (<anonymous>)
        at XHR.onData (polling.js:105)
        at Request.<anonymous> (polling-xhr.js:94)
        at Request.push.dMso.Emitter.emit (index.js:145)
        at Request.onData (polling-xhr.js:236)

这是我在 /etc/nginx/sites-available/default 中的 Nginx 配置：

server{
  charset utf-8;
  listen 80 default_server;
  server_name 18.231.153.164;

  # angular app & front-end files
  location / {

      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;


      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

      root /opt/front-end/dist/admin;
      try_files $uri /index.html;
}

  # node api reverse proxy
  location /api/ {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

  # node api reverse proxy
  location /socket.io {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host; 
      proxy_pass http://localhost:4000/;

      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade"; 
}

如您所见，我的节点.js在端口 4000 上运行，因此每次有人尝试使用路径 /api/ 访问网站时，它都会被重定向到节点.js服务器。

下面是我的node.js代码:

const socketio = require('socket.io');
const express = require('express');
const app = express();

const port = 4000;
const httpServer = app.listen(port, () => {
    console.log('Server listening on port ' + port);
});


let io = socketio(httpServer, {
  cors: {
    origin: "http://localhost:5200",
  },
});

// auth moddleware
io.use((socket, next, err) => {
    const jwtToken = socket.handshake.query.jwtToken;
    // console.log('token --> ', jwtToken);

    const user = socket.handshake.query.user;
    if (!user) {return};
    socket.user = JSON.parse(user);
    next();
 });

io.on('connection', (socket) => {
    socket.emit('messageFromServer', {data: 'Welcome to server'});
})

这是我的一段前端代码：

import {io} from 'socket.io-client';

...

// Connect to server (When I am running locally I change '/api' to 'http://localhost:4000' 
this.socket = io('/api', {secure: true, reconnection: true, rejectUnauthorized: false, query: {user: user, jwtToken: this.authService.authValue.jwtToken}});

// Listen to events
this.socket.on('usersOnline', (usersOnline) => {
  console.log('Users online now:', usersOnline);
});

this.socket.on('connect_error', (err) => {
    console.log('ERR::', err);
  });

套接字的版本。服务器中的io是“^4.0.0”，套接字的版本。io客户端在前面，是“^4.0.0”。

我认为这个问题在某种程度上与反向代理和socket.io有关。正如我之前所说的，socket.io连接在本地环境中工作良好。

有人能帮我吗？

Answer 1

我找到了解决方案。我需要添加＜code＞proxy_redirect off 。io反向代理。

location /socket.io {
    proxy_pass http://localhost:4000;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

然后，我有另一个问题，在字体结束时，我开始得到一个错误或无效的名称空间。因此，我将客户端连接改为< code>/，而不是od /api:

this.socket = io('/', {query: {user: user, jwtToken: this.authService.authValue.jwtToken}});