无法建立 websocket 连接 - React js + Node Express + Nginx

Question

请帮忙，
在生产中出现以下错误

WebSocket 连接到“wss://subdomain.example.com/socket.io/?EIO=3&transport=websocket”失败：WebSocket 握手期间出错：意外响应代码：404

这是我的 Nginx 配置和代码 - React Js 和 Node Express

Nginx 配置

http {

    map $http_upgrade $connection_upgrade {
            default upgrade;
            '' close;
    }

    upstream node-js-myapp {
            server 127.0.0.1:5000;
    }

tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

server {
    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name subdomain.example.com;

    location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.html;
        }
        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }
        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }
        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    location /app2/ {
                proxy_pass http://localhost:5000/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
        location ^~ /socket.io/ {
               try_files $uri @node-js-myapp;
        }
        location @node-js-myapp {
               proxy_set_header X-Real-IP  $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header Host $http_host;
               proxy_pass  http://node-js-myapp;
       }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
        listen 443 ssl; # managed by Certbot
        ssl_certificate /etc/letsencrypt/live/subdomain.example.com/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/subdomain.example.com/privkey.pem; # managed by Certbot
        include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
}

反应 Js

import socketIOClient from 'socket.io-client';
const socket = socketIOClient(
  'wss://subdomain.example.com',
  { transports: ['websocket'] }
);
socket.on('socketToMe', function (data) {
  console.log(data);
  socket.emit('ABC', "abcdef");
});

节点快递

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

var server = require('http').Server(app);
var io = require('socket.io')(server);

io.on('connection', function(socket) {
 console.log("Con");

socket.on("ABC", (data) => {
 console.log(data);
 io.sockets.emit('socketToMe', "test test");
})
socket.on('disconnect', () => {
 console.log('user disconnected')
})
})

Answer 1

Socket.io并不用于连接到 Websocket 客户端。 在这里阅读更多。 您将需要使用 Websocket 客户端和 Socket.io 客户端来广播数据。

Socket.IO 不是 WebSocket 实现。 尽管 Socket.IO 确实在可能的情况下使用 WebSocket 作为传输，但它为每个数据包添加了一些元数据：数据包类型、命名空间和需要消息确认时的数据包 ID。 这就是为什么 WebSocket 客户端无法成功连接到 Socket.IO 服务器，Socket.IO 客户端也无法连接到 WebSocket 服务器的原因。