Socket.io 仅向发送者发回多个响应

Question

所以我想深入研究 Socket.io，我是一个完整的初学者。 我是一名 react 开发人员，并决定使用 react 对其进行测试，这是我的客户端：

import { io } from "socket.io-client";
function App() {
  let [message, setMessage] = useState("");
  let [messages, setMessages] = useState([]);
  const socket = io("http://localhost:4000/", {
    withCredentials: true,
    cors: {
      origin: "http://localhost:4000",
    },
  });

  const sendMessage = (msg) => {
    socket.emit("messageToServer", msg);
  };
  socket.on("messageToClient", (msg) => {
    setMessages((prevMessage) => prevMessage.concat(msg));
  });

  return (
    <div className="App">
      {messages}

      <input
        id="input"
        autoComplete="off"
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={() => sendMessage(message)}>Send</button>
    </div>
  );
}

这是我的服务器端（节点，快递）：

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

io.on("connection", (socket) => {
  let messages = [];
  socket.on("messageToServer", (msg) => {
    io.emit("messageToClient", msg);
    console.log(msg);
  });
});

http.listen(4000, () => {
  console.log("listening on *:3000");
});

所以基本上当我在输入上写一些东西并单击按钮时，在节点服务器上一切似乎都很好并且消息只记录一次，但是当我打开我发送消息的选项卡时，例如我输入了“第一条消息”它将打印类似：'First messageFirst messageFirst messageFirst message'等等......但显然，重复只发生在我发送它的选项卡中，因为当我打开一个新的并测试它时，在发件人选项卡上就像我说的那样，我得到了多个，但是在新的上，我只收到一个，就像它应该的那样。 先感谢您！

Answer 1

下面的代码片段将保持 App 组件被多次渲染，因此messageToClient的相同事件处理程序将被多次注册并在 React 中导致意外行为。

  socket.on("messageToClient", (msg) => {
    setMessages((prevMessage) => prevMessage.concat(msg));
  });

您应该使用useEffect将套接字包装在事件上，以便我们可以确保没有任何重复。

  useEffect(()=>{
    socket.on("messageToClient", (msg) => {
      setMessages((prevMessage) => prevMessage.concat(msg));
    });
    
    // unbind the event handler when the component gets unmounted
    return () => {
      socket.off('messageToClient')
    }
  },[])