Socket IO，React - 未接收从服务器发出的事件

Question

在我的 React 应用程序中，我初始化与后端套接字 Io 服务器的连接。在服务器内部，我

console.log

已连接的套接字，一切都按预期工作，客户端连接正常。

但是，连接后，服务器会发出一个事件，并且在客户端上我正在侦听此事件，但是侦听器没有被触发。

这是客户：

import io from "socket.io-client"

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

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

    useEffect(() => {
        socket.on("welcome", (data) => {
            // This code here never gets executed
            console.log("hit")
            setWelcome(data)
        })

        return () => socket.off("welcome")
    }, [socket])

    return (
        <>
            {welcome}
        </>
    )

这是套接字的服务器代码：

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

io.on("connection", (socket) => {
    socket.emit("welcome", "Hello")
    // The console log logs the socket id as expected
    console.log(`User connected: ${socket.id}`)
})

我想补充一点，

socket.on(welcome)

中的代码确实会在页面首次加载时执行一次，但是在页面刷新后，代码永远不会执行。页面刷新后，服务器仍会记录新连接，但是

on("welcome")

侦听器不会被触发。

为什么反应代码没有触发套接字侦听器？谢谢。

Answer 1

我无法发表评论，因为我缺乏声誉。页面刷新时先前的连接是否会关闭？ （因为它应该）。在服务器端，您可以检查类似的内容

socket.on("disconnect", () => { console.log(`User disconnected: ${socket.id}`) })

但是，问题出在前端，因为你说执行页面刷新时会记录新连接。您可以尝试调试 useEffect 以查看套接字实例是否实际上是使用

console.log(socket)

:

创建的

useEffect(() => {
    // Debug
    console.log(socket)
    socket.on("welcome", (data) => {
        // This code here never gets executed
        console.log("hit")
        setWelcome(data)
    })

    return () => socket.off("welcome")
}, [socket])

您在客户端未收到事件的唯一原因是因为没有侦听器，因此您的套接字实例是问题所在。似乎执行了 useEffect 清理，并且事件侦听器被删除并且不再创建。

顺便说一下，如果您正在构建基于 websocket 的应用程序，那么在页面加载或组件安装时连接套接字就不会出现问题。但是，如果您的应用程序仅在某些部分使用套接字，则您应该创建套接字实例，然后在应用程序需要时连接和断开连接。