Node.js+React聊天应用遇Socket.IO WebSocket连接失败求助

问题背景 #

我用Node.js和React.js开发聊天应用，一开始遇到跨域错误，通过npm cors解决后，出现以下错误：

websocket.js:50 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' failed:

尝试添加transports : ['websocket']等方法均无效，这是我首次接触Socket开发，恳请帮忙解决，已查阅视频及Stack Overflow方案但无果。

服务端代码 #

const express = require('express')
const app = express();
const socket = require('socket.io')
const http = require('http')
const Port = 5000 || process.env.Port;
const cors = require('cors')
const myRouter = require('./router/router');
const server = http.createServer(app)
const io = socket(server)

app.use(cors({
    origin: "*"
}))

io.on('connection', function(socket) {
    console.log('A user has connected');
 
    socket.on('disconnect', function () {
       console.log('A user has disconnected');
    });
 });

app.use('/',myRouter)

app.listen(Port,()=>{
    console.log(`App is running at http://localhost:${Port}`)
})

客户端Chat组件代码 #

import React from 'react'
import querystring from 'query-string';
import io from 'socket.io-client';
import { useEffect } from 'react';
import { useState } from 'react';

let Socket;

export default function Chat() {
  const [name, setName] = useState('')
  const [room, setRoom] = useState('')

  const Endpoint = 'localhost:5000'

  const location = window.location;

  useEffect(() => {
    const { name, room } = querystring.parse(location.search);
    Socket = io(Endpoint , {transports: ["websocket"]})
    setName(name)
    setRoom(room)
    console.log(Socket)
  }, [location.search, Endpoint])

  return (
    <div>
      <h1> lets chat</h1>
    </div>
  )
}

问题排查与解决方案 #

1. 服务端启动方式错误 #

你创建了http.Server实例server用于绑定Socket.io，但最后用app.listen()启动服务，导致Socket.io绑定的server未被正确启动，无法监听WebSocket连接。

修复：
将app.listen(...)替换为server.listen(...)：

server.listen(Port,()=>{
    console.log(`App is running at http://localhost:${Port}`)
})

2. 客户端Endpoint缺少协议 #

客户端的Endpoint仅写了localhost:5000，未指定协议（http/ws），Socket.io客户端无法正确解析连接地址。

修复：
修改为带协议的完整地址：

const Endpoint = 'http://localhost:5000'

3. Socket.io跨域配置优化 #

虽然使用了cors中间件，但Socket.io本身有独立的跨域配置，建议直接在初始化时配置，避免冲突：

const io = socket(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

可以移除app.use(cors())，减少重复配置。

4. 客户端传输方式调整 #

强制使用websocket传输可能在部分环境下失败，建议先保留默认传输逻辑（先通过polling升级到websocket），去掉transports: ["websocket"]测试连接，确认正常后再按需调整。

内容的提问来源于stack exchange，提问作者Abdullah moiz