React集成Socket.IO：页面刷新后无法接收服务端事件的问题

问题根源 #

页面首次加载时能收到welcome事件，但刷新后收不到，核心原因是：服务端在socket连接建立的瞬间就发送了事件，但此时React组件的useEffect还未执行，监听器还没完成注册，导致事件被客户端错过。服务端能打印新的socket ID，说明连接确实建立了，只是事件时机不匹配。

解决方案 #

方案1：客户端主动请求事件（推荐） #

这种方式能确保客户端监听器注册完成后，再触发服务端发送事件，完全避免时机问题。

服务端代码修改：

const io = new Server(httpServer, {
    cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"]
    },
})

io.on("connection", (socket) => {
    console.log(`User connected: ${socket.id}`)
    // 监听客户端的请求事件，收到后再发送welcome
    socket.on("requestWelcome", () => {
        socket.emit("welcome", "Hello")
    })
})

客户端代码修改：

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

const socket = io.connect("http://localhost:5000")

const Home = () => {
    const [welcome, setWelcome] = useState("")

    useEffect(() => {
        const handleWelcome = (data) => {
            console.log("hit")
            setWelcome(data)
        }

        // 先注册监听器
        socket.on("welcome", handleWelcome)
        // 主动向服务端请求welcome事件
        socket.emit("requestWelcome")

        // 清理时传入对应处理函数，精准移除监听器
        return () => socket.off("welcome", handleWelcome)
    }, [socket])

    return (
        <>
            {welcome}
        </>
    )
}

export default Home

方案2：服务端延迟发送事件（临时方案） #

通过延迟发送给客户端足够的注册监听器时间，这种方式依赖时间设置，可靠性不如方案1，但适合快速验证：

// 服务端代码修改
io.on("connection", (socket) => {
    console.log(`User connected: ${socket.id}`)
    // 延迟100ms发送，适配组件挂载时间
    setTimeout(() => {
        socket.emit("welcome", "Hello")
    }, 100)
})

额外注意事项 #

• 清理监听器时，尽量传入对应的处理函数（如方案1中的handleWelcome），避免误移除其他同名监听器。
• 组件外创建socket实例是合理的，能保证全局唯一连接，但要注意单页应用路由切换时不要重复创建实例。

内容的提问来源于stack exchange，提问作者Max adam