插座.IO只向发送方发送多个响应

Question

所以我想深入了解Socket。我在这方面完全是个初学者。我是一个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>
);
}

，这是我的服务器端(Node, Express):

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 message'，它会打印类似'First 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')
}
},[])