0
587
VistasSocket.io Client repeats event action multiple times from one emit
I am creating a simple diffie hellman demo with sockets and it seems that whenever my server emits any event, the client repeats it multiple times.
For example: On the client side whenever I add a message I emit this new message to the server like so.
const addMessage = (text) => {
var newMessage = {
id: nextID,
from: name,
message: text
}
socket.emit("send-message", newMessage);
setNextID(nextID + 1);
setMessages([...messages, newMessage]);
}
And then on the server side I add that message to the messages and emit the new bank of messages to the other clients.
// Send message to other person
socket.on("send-message", (message) => {
messages = [...messages, message];
console.log(messages, "Newline\n");
socket.broadcast.emit("receive-message", messages);
})
The clients receive it and updates their message bank. I console.log these actions.
socket.on("receive-message", (receivedMessages) => {
console.log("receieved messages");
setMessages(receivedMessages);
});
But when I send a message it console.logs it repeats it like 100 times??
This happens for a lot of my other client side events handlers, repeating a action more than once, from just one emit from the server.
Why does this happen and how can I stop it?
3 Respuestas
Responde la pregunta0
If you are using ReactJs, be aware that if you add the listener in your components, any time the component gets updated it will add a new socket listener and for example on second second render, you'll get 2 console.log s. So you must add the listener in your useEffect hook (componentDidMount in class component case).
And consider that even your components can be viewed a few times so then the listener will be duplicated. So you have to close your listeners on useEffect's return (componentWillUnmount in class component case)
So it must be like:
useEffect(() => {
socket.on("receive-message", (receivedMessages) => {
console.log("receieved messages");
setMessages(receivedMessages);
});
return () => {
socket.off("receive-message");
};
}, []);
0
try to change like:
client-side:
socket.emit(“your event name”, “msg”)
server-side:
var io = new require(“socket-io”)()
io.on(“connection”, (socket) => {
socket.on(“your event name”, (msg) => {
io.emit(“your event name”, msg)
})
})
try it out and it will be better :D
0
Just send the new message
Client
socket.on("receive-message", (receivedMessages) => {
console.log("receieved messages");
setMessages(prevMessage => [...prevMessage, receivedMessages]);
});
Server
socket.on("send-message", message => {
messages = [...messages, message];
console.log(messages, "Newline\n");
socket.broadcast.emit("receive-message", message);
})