套接字 IO 服务器正在发送消息，但客户端未收到消息

Question

我有一种奇怪的经历。

我有一个在 Spring Boot 中实现的 Socket IO 服务器。当服务器发送一个事件时，我在 Chrome 网络选项卡中检查了这个，我发现事件确实被发送了，但是我的 react js 客户端没有记录发送的事件。可能有什么问题。

这是我的客户：

 const initSocketIO = () => {
        socket.on("connect", (data: any) => {
            console.log("I am connected!");
            socket.io.emit("test", "Test Data!");
        })
        socket.on("game", (data: any) => {
            console.log("New SocketIO Data Received as: ");
        });
        socket.on("disconnect", () => {
            console.log("I've being disconnected");
        });
    }

    useEffect(() => {
        initSocketIO();
        return () => {
            socket.off("game")
        }
    }, [loaded]);

在 Chrome 的“网络”选项卡中，我可以看到每当服务器发送消息时，它都会进来，但上面的代码没有触发......

以下是 Chrome 网络标签下的消息

我该如何解决这个问题？

谢谢。

Answer 1

尝试将 socket.on 放入 useEffect。

useEffect(() => {
    socket.on("connect", (data: any) => {
        console.log("I am connected!");
        socket.io.emit("test", "Test Data!");
    })
    socket.on("game", (data: any) => {
        console.log("New SocketIO Data Received as: ");
    });
    socket.on("disconnect", () => {
        console.log("I've being disconnected");
    });
    return () => {
        socket.off("game")
    }
}, [loaded]);