频繁从 socket.io 接收数据时 React 崩溃

Question

我有一个 React 应用程序每 5 秒接收一次数据。服务器处理得很好，但是如果你离开页面再回来或者等待 10 秒左右，页面会变白并且没有响应。

数据包含应用程序更新和显示的信息。

我试过使用异步函数来处理数据，但这没有帮助

socketio 客户端代码：

socket.on('UpdateGames', data => {
    const {j, s, e} = JSON.parse(data)
    setJoin(j.map(item => new Game(item)))

    setSpec(s.map(item => new Game(item)))

    setEnd(e.map(item => new Game(item)))
})

编辑：尝试每 10 秒发送一次数据，但同样的事情发生了

Answer 1

Evert 是正确的，我没有进行任何清理。将此添加到我的组件

useEffect(() => {
    socket.on('connect', socket => {
        console.log('connected')
    })

    socket.on('UpdateGames', data => {
        const {j, s, e} = JSON.parse(data)

        console.log("RECEIVE")

        setJoin(j.map(item => new Game(item)))

        setSpec(s.map(item => new Game(item)))

        setEnd(e.map(item => new Game(item)))
    })
    

    return () => socket.off('UpdateGames', listener)
}, [])

Answer 2

添加 OP @COOKIE 的答案，我发现

socket.removeAllListeners([eventName])

解决了我的网络应用程序中奇怪的递归循环问题。

我相信这是因为 useEffect 开始累积套接字侦听器，并且随着时间的推移呈指数级增长并导致网络应用程序崩溃。

请参阅下文了解我是如何解决我的问题的：

useEffect(() => {
      socket.on(eventName, (res) => {
        func(res);
      });
      return () => socket.removeAllListeners(eventName);
    }
  }, [func, eventName]);

See here for Socket IO docs on this function.

频繁从 socket.io 接收数据时 React 崩溃

React crashing when frequently receiving data from socket.io

browser

socket.io

next.js