0
589
VistasEl cliente Socket.io repite la acción del evento varias veces desde una emisión
Estoy creando una demostración simple de Diffie Hellman con sockets y parece que cada vez que mi servidor emite un evento, el cliente lo repite varias veces.
Por ejemplo: en el lado del cliente, cada vez que agrego un mensaje, emito este nuevo mensaje al servidor así.
const addMessage = (text) => { var newMessage = { id: nextID, from: name, message: text } socket.emit("send-message", newMessage); setNextID(nextID + 1); setMessages([...messages, newMessage]); }Y luego, en el lado del servidor, agrego ese mensaje a los mensajes y emito el nuevo banco de mensajes a los otros clientes.
// Send message to other person socket.on("send-message", (message) => { messages = [...messages, message]; console.log(messages, "Newline\n"); socket.broadcast.emit("receive-message", messages); })Los clientes lo reciben y actualizan su banco de mensajes. Yo console.log estas acciones.
socket.on("receive-message", (receivedMessages) => { console.log("receieved messages"); setMessages(receivedMessages); }); Pero cuando envío un mensaje, console.logs lo repite como 100 veces. 
Esto sucede con muchos de mis otros controladores de eventos del lado del cliente, repitiendo una acción más de una vez, desde una sola emisión del servidor.
¿Por qué sucede esto y cómo puedo detenerlo?
3 Respuestas
Responde la pregunta0
Si está utilizando ReactJs , tenga en cuenta que si agrega el oyente en sus componentes, cada vez que el componente se actualice, agregará un nuevo oyente de socket y, por ejemplo, en el segundo renderizado, obtendrá 2 console.log s. Por lo tanto, debe agregar el oyente en su gancho useEffect ( componentDidMount en el caso del componente de clase).
Y considere que incluso sus componentes se pueden ver varias veces, por lo que el oyente se duplicará. Por lo tanto, debe cerrar sus oyentes en el return de useEffect ( componentWillUnmount en el caso del componente de clase)
Así que debe ser como:
useEffect(() => { socket.on("receive-message", (receivedMessages) => { console.log("receieved messages"); setMessages(receivedMessages); }); return () => { socket.off("receive-message"); }; }, []);0
intenta cambiar como:
lado del cliente:
socket.emit(“your event name”, “msg”)lado del servidor:
var io = new require(“socket-io”)() io.on(“connection”, (socket) => { socket.on(“your event name”, (msg) => { io.emit(“your event name”, msg) }) })pruébalo y será mejor :D
0
Solo envía el nuevo mensaje
Cliente
socket.on("receive-message", (receivedMessages) => { console.log("receieved messages"); setMessages(prevMessage => [...prevMessage, receivedMessages]); });Servidor
socket.on("send-message", message => { messages = [...messages, message]; console.log(messages, "Newline\n"); socket.broadcast.emit("receive-message", message); })