es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Callback de Socket.io ‘on’ ejecutándose múltiples veces.

25 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    useEffect(() => {
  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)
  })

  return () => {
    // Desuscribirse de todos los eventos del socket para evitar fugas de memoria
    socket.off("question-update")
    socket.off("point-update")
    socket.off("personal-point-update")
  }
}, [])

    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.

Comments are closed.