const userSocketMap = {};
io.on("connection", (socket) => {
socket.on("register-id", (username) => {
userSocketMap[username] = socket.id;
console.log(socket.id);
});
socket.on("sendingMessage", (data) => {
const { sender, receiver, message } = data;
const receiverId = userSocketMap[receiver];
if (receiverId) {
console.log(data);
io.to(receiverId).emit("receiveMessage", data);
} else {
}
});
});
server.listen(3000, () => {
console.log(`Server running on http://localhost:3000`);
});
here is part of my backend code, as you can see there is console.log(data) (it is just temporary), but anyways, it is working, and I see how it console.logs it on server side, but:
useEffect(() => {
const handleMessageReceive = (data) => {
const message = {
sender: data.sender,
receiver: data.receiver,
message: data.message,
timestamp: new Date(data.timestamp).toISOString().slice(11, 16),
};
console.log(message);
};
socket.on("receiveMessage", handleMessageReceive);
return () => {
socket.off("receiveMessage", handleMessageReceive);
};
}, []);
btw
I have socket.js:
import { io } from "socket.io-client";
const socket = io("http://localhost:3000");
export { socket };
I have function handleSending which you can ignore because which works fine, but the receivingMessage inside of the hook useEffect doesnt work fine it does not console.logs anything. I tried to move it to other components, I mean sometimes they work, but when I refresh the page it stops working.
Could you suggest me something?
0
React.useEffect triggers every time the given variable is changed. In your case whenever socket is changed, it will trigger this code which will add the event listener, without any cleaning up. I would suggest to use the socket like indicated here : link
useEffect(() => {
function onConnect() {
setIsConnected(true);
}
function onDisconnect() {
setIsConnected(false);
}
function onFooEvent(value) {
setFooEvents(previous => [...previous, value]);
}
socket.on('connect', onConnect);
socket.on('disconnect', onDisconnect);
socket.on('foo', onFooEvent);
return () => {
socket.off('connect', onConnect);
socket.off('disconnect', onDisconnect);
socket.off('foo', onFooEvent);
};
}, []);
1