Express+React.js环境下Socket.io连接成功但事件无法触发

问题原因及修复方案 #

1. 服务器端事件监听逻辑错误

你在服务器端通过io.on('msg')监听自定义事件是错误的。Socket.io中，全局io对象仅负责监听全局级别的连接（connect）事件，而客户端发送的自定义事件（如msg）需要绑定到单个连接对应的socket实例上。

修正后的服务器代码：

const express = require("express")
const cors = require("cors");
const http = require('http')

const app = express()
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cors({
    origin: 'http://localhost:5173',
    credentials: true,
}))

const server = http.createServer(app)
const { Server } = require('socket.io')
// 给Socket.io单独配置CORS，避免和Express的cors中间件冲突
const io = new Server(server, {
  cors: {
    origin: "http://localhost:5173",
    credentials: true
  }
})

io.on('connect', (socket) => {
    console.log('success')
    // 在连接成功的socket实例上绑定msg事件
    socket.on('msg', () => {
        console.log("event")
    })
})

server.listen(8000, () => {
    console.log("port connected");
})

2. React客户端CORS配置错误

你在React的socket配置中把cors.origin设为后端地址http://127.0.0.1:8000/，这是错误的。这里的origin应该设置为前端自身的运行地址（即你的React应用所在的http://localhost:5173）。

修正后的React代码：

import React, { useEffect, useState } from "react"
import { io } from 'socket.io-client';

function useSocket(url) {
    const [socket, setSocket] = useState(null)

    useEffect(() => {
        const socketIo = io(url, {
            reconnectionDelayMax: 10000,
            autoConnect: false,
            transports: ['websocket'],
            cors: {
                // 修正为前端运行地址
                origin: "http://localhost:5173"
            }
        }).connect();

        setSocket(socketIo)

        function cleanup() {
            socketIo.disconnect()
        }
        return cleanup
    }, [])

    return socket
}

function thiscomp() {
    const socket = useSocket('http://127.0.0.1:8000/')

    useEffect(() => {
        if (socket) {
            socket.emit('msg')
        }
    }, [socket])

    return (
        <>
            <div></div>
        </>
    )
}

export default thiscomp

额外提示

• 优先给Socket.io单独配置CORS，避免和Express的cors中间件产生规则冲突。
• 确保前后端地址、端口配置完全匹配，比如前端用localhost:5173，后端用127.0.0.1:8000时，保持配置中的地址格式一致。

内容的提问来源于stack exchange，提问作者Adnaan Sulaiman