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);
   });
   }, [])