Socket.io 使用 React 和 Node.js

Question

我有点新使用 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>
);

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

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

非常感谢！

Answer 1

如果没有包装到 useEffect 中，则在每次渲染时都会创建 React 组件中的套接字侦听器。

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

Socket.io 使用 React 和 Node.js

Socket.io with React and Node.js

websocket

node.js

socket.io

eventemitter

reactjs