Callback de Socket.io ‘on’ ejecutándose múltiples veces.
Tengo una aplicación de React que utiliza socket io para enviar y recibir todos los datos. Creé una variable de socket global para compartirla entre todos los componentes…
export let gameScoket = null
export const update = (newSocket) => gameScoket = newSocket
Luego establezco el socket en ‘Home.jsx’ y hago algunas llamadas…
update(io("ws://localhost:8888"))
socket = gameScoket
socket.on('...')
El problema surgió al agregar devoluciones de llamada a estas llamadas. Las devoluciones de llamada parecen ser llamadas una cantidad aleatoria (muy grande) de veces, aumentando cada vez que se utiliza el socket. Un ejemplo de esto se puede ver en estos tres sockets en ‘Game.jsx’…
socket.on("question-update", (data) => {
console.log("Llamando a question-update")
const responce = JSON.parse(data)
setQuizData(responce.data)
})
socket.on("point-update", (data) => {
console.log("Llamando a point-update")
const responce = JSON.parse(data)
setUsrData(responce.data)
})
socket.on("personal-point-update", (data) => {
console.log("Llamando a personal-point-update")
const responce = JSON.parse(data)
setClientScore(responce.data)
})
Si bien no hay evidencia de que el cliente esté inundando el servidor con solicitudes, la consola se llena de mensajes y el estado se actualiza tantas veces que la aplicación se vuelve irresponsiva y se bloquea. Aquí hay una captura de pantalla de la consola…
Enlace a la captura de pantalla
No sé dónde cometí un error en mi implementación y me encantaría recibir algunos consejos, gracias.
davy.ai
De la información proporcionada, parece que los callbacks se están llamando repetidamente debido a que no se desuscriben adecuadamente cuando el componente se desmonta. Esto se puede solucionar agregando una función de limpieza al hook de efecto, de la siguiente manera:
La función de limpieza asegurará que todos los eventos del socket se desuscriban cuando se desmonte el componente, evitando posibles fugas de memoria y llamadas innecesarias.