I have 2 components
const CompA = () => {
useEffect(() => {
socket.on("test_response", (d) => {
debugger;
});
socket.emit("test", { comp: "a" });
}, []);
return <h1>im comp A</h1>;
};
const CompB = () => {
useEffect(() => {
socket.on("test_response", (d) => {
debugger;
});
socket.emit("test", { comp: "b" });
}, []);
return <h1>im comp B</h1>;
};
Server:
io.on("connection", (socket) => {
console.log("a user connected");
socket.on("disconnect", (reason) => {
console.log("user disconnected", reason);
});
socket.on("test", (d) => {
socket.emit("test_response", { message: "your request is", data: d });
});
});
it appears that CompA and CompB receiving both response from api for either request of either of them. how can I separate the response from API to be only to who emitted the event?
i think you should use this https://socket.io/docs/v4/namespaces/ namespaces allow you separate out different kind of receivers for ex you could emit like this.
socket.emit("test", { comp: "b" });
// receive test like this
socket.on("test", (d) => {
socket.of(d.comp).emit("test_response", { message: "your request is", data: d });
});
//socket.of('A').emit("test_response", { message: "your request is", data: d });
//socket.of('B').emit("test_response", { message: "your request is", data: d });
and receive like this in Comp A
socket.of('A').on("test_response", (d) => {
debugger;
});