带有 React 和 Node.js 的 Socket.io答案

【问题标题】：Socket.io with React and Node.js带有 React 和 Node.js 的 Socket.io
【发布时间】：2021-12-30 03:14:55
【问题描述】：

我对使用 sockets.io 有点陌生，我有一个非常基本的问题。

我在服务器端有这段代码，我基本上尝试侦听名为 setName 的事件，并传递用户名参数并向客户端发出一个名为“setNameCb”的新事件。

io.on("connection", (socket) => {
  socket.on("setName", (username) => {
    socket.emit("setNameCb", username);
  });
});

在客户端，我尝试在单击按钮时传递用户名的这段代码。之后，我从服务器端监听 setNameCb 事件并尝试获取用户名值。

const setNameFunction = () => {
  socket.emit("setName", "Cristian");
};
socket.on("setNameCb", (username) => {
  alert(username);
});

return (
  <div className="App">
    <button onClick={setNameFunction}>set name</button>
  </div>
);

好的，一切正常，但问题是我收到了多个关于用户名的警报，我就是不知道为什么会这样。

我非常感谢对此的解释。我知道这是一个非常基本的问题，但这将有助于我更好地理解这个概念。

非常感谢！

【问题讨论】：

您收到多少警报，总是 2 或者可能更多？您可能已多次连接。如果你在你的发射中包含和额外的 socket.id 和你的用户名，你可以验证这一点。如果您只想从发件人事件中回复，您还可以使用内置回调函数并在没有额外发出的情况下回复
如果我放置一个console.log，它在任何地方都可以正常工作，除了“setNameCb”事件内部，此时警报所在的位置。我还尝试在我的发射器上放置一个 socket.id，它也可以正常工作。当我重新启动服务器并按下按钮时，警报是第一次 2，但如果我多次按下按钮，我会收到很多警报。所以我想问题出在客户端问题上，因为我只在 setNameCb 上收到多个 console.logs。
另外，我注意到当我按下按钮时，我总是收到 2 个警报。我的意思是，如果我按下按钮 10 次，我总共会收到 20 个警报。
我认为您在同一个会话中连接了两次。请在警报中包含console.log(socket.id)，看看你是否在两边都得到了相同的ID
好的，我发现在同一个会话中连接两次的可能性很大，但我该如何解决这个问题或以后避免它？

标签： node.js reactjs websocket socket.io eventemitter

【解决方案1】：

react 组件中的套接字侦听器在每次渲染时创建，如果未包装到 useEffect 中。

useEffect(() => {
     const setNameFunction = () => {
     socket.emit("setName", "Cristian");
   };
   socket.on("setNameCb", (username) => {
     alert(username);
   });
   }, [])

【讨论】：