多条消息使 socket.io 应用程序变慢

Question

我正在使用 React.js 和 node.js 使用 socket.io 构建游戏。

游戏的目的是通过聊天提问来猜测对手的角色。

我注意到，在发布消息时，消息越多，它们出现的时间就越长，即前 5 条消息几乎立即出现，但每条新消息都需要更长的时间，而且我在第 11 条/第 12 条消息时会超时。

即使在 localhost 中也会出现问题。

Here's some debug log for the first messages (fast)

Here's some debug log for the last messages(slow)

如此处所述 (Socket IO chat example is slow)，我尝试过这样做，但没有成功：

var io = require('socket.io')(http, { wsEngine: 'ws' });

我的 github 存储库： 服务器：https://github.com/tboittin/qsie_server

客户：https://github.com/tboittin/qsie_client

您可以在此处访问游戏：https://qsie-client.vercel.app/ 这是法语所以：

• 在第一个屏幕上 -> 左下角按钮
• 在第二个屏幕上 -> 蓝色按钮
• 在第三个屏幕上 -> 在字段中输入用户名，然后单击屏幕上和模式中的蓝色按钮
• 在第 4 个屏幕上 -> 点击屏幕上的蓝色按钮和模态中的蓝色按钮
• 在第五屏 -> 点击蓝色按钮
• 在第 6 个屏幕 -> 聊天框在右侧

如果您想玩游戏，只需打开另一个标签，重复直到第 4 个屏幕，然后单击大字母。

提前感谢您的帮助！

Answer 1

试试这个，因为你需要一个清理功能用于 useEffect，否则每发送一条消息，渲染就会增加，整个应用程序变慢。如果您使用 message 作为依赖数组，则所有消息都不会加载，并且消息将继续被下一条消息替换。

  useEffect(() => {
    socket.on("message", (message) => {
      setMessages([...messages, message]);
    });
    return()=>{
    socket.off('message')
    }
  }, [messages]);