javascript节点socket.io请求过多答案

【问题标题】：javascript node socket.io too much requestsjavascript节点socket.io请求过多
【发布时间】：2021-04-08 02:26:53
【问题描述】：

大家好，我有一个简单的套接字示例：

const app = express();
const server = require("http").createServer(app);
const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    credentials: true
  }
});

var userCount = 0;
io.on('connection', function (socket) {
  userCount++;
  io.emit('userCount', { userCount: userCount });

  socket.on('disconnect', function() {
    userCount--;
    io.emit('userCount', { userCount: userCount });
  });

});

和前端：

  const [userCount, setuserCount] = useState(0);
  socket.on('userCount', function (data) {
    setuserCount(data.userCount);
  });

我不明白，但它触发了这么多请求.. 我的问题是使用套接字的正确方法是什么？

【问题讨论】：

“它触发了这么多请求”是什么意思？多少？多久一次？
它每秒发送一次请求，它不知道成员如何，它只是在增加数字
webm.red/view/8oOJ.webm @ 但是当我替换 setuserCount(data.userCount);使用 console.log(data.userCount);效果很好，为什么？
我不知道你之前评论中的那个链接是干什么用的。当我尝试查看它时，我没有得到任何有用的信息。
在右侧的页脚 Active: 并且有 data.usercount，它只是显示套接字如何处理过多的请求

标签： node.js socket.io

【解决方案1】：

问题似乎出在您的前端。每次您的组件渲染时，以下代码都会运行多次：

socket.on('userCount', function (data) {
  setuserCount(data.userCount);
});

这意味着您要为一个userCount 事件添加多个事件侦听器函数。要解决这个问题，您可以使用 React 的 useEffect() 挂钩，您可以使用它在组件挂载时运行一次代码：

import React, {useState, useEffect} from "react";

... 
// Inside your component:
const [userCount, setuserCount] = useState(0);
useEffect(() => {
  const listener = data => setuserCount(data.userCount);
  socket.on('userCount', listener);
  return () => socket.off('userCount', listener);
}, [setuserCount]);

这样你的监听器只会在你的组件挂载时被添加一次，而不是多次。从 useEffect 挂钩返回的清理函数还允许您在组件卸载时删除侦听器（感谢 @Codebling 的此建议）。您的 socket.on 回调仍将执行多次，因为 socket.io 将在您的事件发生时调用它。

【讨论】：

好收获。不错的做法是在卸载时删除侦听器useEffect(() => { const listener = (data) => setuserCount(data.userCount); socket.on('userCount', listener); return () => socket.off(listener);})
@Codebling 感谢您的建议。当我写答案时，我打算添加这个，但它完全让我忘记了哈哈。我现在已将其添加到我的答案中:)
非常感谢 4 位试图提供帮助的家伙，但这并没有解决我的问题，它仍然是一样的......
我做了一些小改动，我用你给出的例子解决了问题，问题出在我的代码而不是你的例子中，非常感谢：]
看起来你的套接字很好，你可以看看stackoverflow.com/questions/65555995/…也许你可以帮助我..谢谢

【解决方案2】：

我在这里找到了类似的代码 (http://sahatyalkabov.com/jsrecipes/#!/backend/who-is-online-with-socketio)，是的，这是使用套接字的正确方法。它会触发如此多的请求，因为每次用户连接和每次用户断开连接都会触发一条消息（包括重新加载时。重新加载时会触发两次，1 次用于退出，1 次用于返回网站）。

【讨论】：

是的，我在下面使用了此代码，但它的工作方式非常奇怪，它向我发送了多个进程和数字，例如 0 2 5 10 12 24 ...当我打开更多选项卡并连接时，我只得到0不动..
webm.red/view/8oOJ.webm @ 但是当我替换 setuserCount(data.userCount);使用 console.log(data.userCount);效果很好，为什么？
嗯...有趣。尝试发出socket.client.conn.server.clientsCount，如下所示stackoverflow.com/questions/10275667/…（答案3）
ye 它真的很奇怪，我在你给出的例子中没有得到任何结果。奇怪的是，当我设置 console.log 时，我返回了很好的计数，但是状态不工作。我不知道怎么做在客户端外部获取变量，所以我尝试了这个状态示例。谢谢 4 帮助