React 和 Express - 本地主机上的 WebSocket 握手期间出错答案

【问题标题】：React and Express - Error during WebSocket handshake on localhostReact 和 Express - 本地主机上的 WebSocket 握手期间出错
【发布时间】：2021-03-25 08:05:03
【问题描述】：

我在本地主机上使用 socket.io 设置 WebSocket 连接时遇到问题。我在服务器端使用 express，在客户端使用 React。

每当我尝试打开连接时都会收到以下消息：

WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 404

我看到有些人遇到与 nginx 或其他 Web 服务器相关的类似问题，但我的问题发生在 localhost 上，这就是我问这个问题的原因

服务器端代码（我正在使用模块进行导入，我希望保持这种方式）

import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { createServer } from 'http';
import * as socketio from 'socket.io';

const app = express();
app.use(bodyParser.json({ limit: '30mb', extended: true }));
app.use(bodyParser.urlencoded({ limit: '30mb', extended: true }));
app.use(cors());
app.use('/foo', bar);

const server = createServer(app)
const io = new socketio.Server(server);

io.on('connect', socket => {...});

const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server running on port ${PORT}`)))

客户端代码（我已经尝试将不同的值传递给“transport”数组，但没有帮助）：

import io from 'socket.io-client';

let socket;
const Component = () => {
    ...

    const { id } = useParams();
    const ENDPOINT = 'ws://localhost:5000';

    useEffect(() => {
        socket = io(ENDPOINT, { transports: ['websocket', 'polling', 'flashsocket'] });

        return () => {
            socket.emit('disconnect');
            socket.off();
        }

    }, [ENDPOINT, id]);

    return (...)
})

【问题讨论】：

我猜它实际上并没有通过ws 协议进行握手。如果您将客户端端点更改为 http:// 会发生什么
@azium 发生同样的错误。而且报错信息是一样的，虽然我改成http

标签： node.js reactjs express socket.io

【解决方案1】：

将服务器端代码的最后一行更改为

server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

【讨论】：