Socket io 'on' 多次回调运行

Question

我有一个使用套接字 io 发送和接收所有数据的 React 应用程序。我创建了一个全局套接字变量以在所有组件之间共享...

export let gameScoket = null
export const update = (newSocket) => gameScoket = newSocket

然后我在 'Home.jsx' 中设置套接字并进行一些调用...

update(io("ws://localhost:8888"))
socket = gameScoket

socket.on('...')

向这些调用添加回调时出现问题。回调似乎被称为随机（非常大）的次数，每次使用套接字时都会增加。在 'Game.jsx'...

中的这三个套接字中可以看到这方面的一个例子

socket.on("question-update", (data) => {
    console.log("Calling question-update")
    const responce = JSON.parse(data)
    setQuizData(responce.data)
})
socket.on("point-update", (data) => {
    console.log("Calling point-update")
    const responce = JSON.parse(data)
    setUsrData(responce.data)
})
socket.on("personal-point-update", (data) => {
    console.log("Calling personal-point-update")
    const responce = JSON.parse(data)
    setClientScore(responce.data)
})

虽然没有证据表明客户端向服务器发送垃圾邮件请求，但控制台被消息轰炸，并且状态被重新更新多次，应用程序变得无响应和崩溃。这是控制台的屏幕截图...

我不知道我的实施哪里出了问题，希望得到一些建议，谢谢。

Answer 1

尝试使用 socket.once("",(data)=>{});

您的代码中的错误是每次调用新的 connection() 时节点都会注册一个事件侦听器 'Quest'。所以第一次调用new connection()事件监听器的个数'Quest'是一个，第二次调用函数，事件监听器的个数增加到两个，以此类推

套接字。 once() 确保绑定到已注册事件 'Quest' 的套接字的事件侦听器的数量恰好是一个

Answer 2

确保将所有 'socket.on()' 调用保留在 useEffect 中以防止重复。

useEffect(() => {
  socket.on('...')
}, [])

Socket io 'on' 多次回调运行

Socket io 'on' callback running multiple times

javascript

websocket

socket.io

reactjs

Socket io 'on' 多次回调 运行

Socket io 'on' callback running multiple times

javascript

websocket

socket.io

reactjs

Socket io 'on' 多次回调运行