Socket io 'on' 回调运行多次

Posted 2023-04-18

【中文标题】Socket io \'on\' 回调运行多次

【英文标题】：Socket io 'on' callback running multiple timesSocket io 'on' 回调运行多次

【发布时间】：2022-01-22 16:28:08

【问题描述】：

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

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)
)

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

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

【参考方案1】：

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

代码中的错误是每次调用新的 connection() 时，节点都会注册一个事件侦听器“Quest”。因此，第一次调用 new connection() 时，事件“Quest”的事件监听器数量为 1，第二次调用函数，事件监听器数量增加到 2 个，依此类推

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

【讨论】：

嗨，我已经尝试将我的所有 socket.on 侦听器更新为 socket.once 侦听器，但仍然收到相同的结果，奇怪。尽管如此，还是感谢您的建议。

【参考方案2】：

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

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