📡 WebSocket en el Frontend con React (Guía técnica)

Esta guía explica cómo usar WebSocket nativo en una aplicación React, con un enfoque en entender cómo se conecta, recibe y maneja mensajes del servidor.

---

📦 ¿Qué es WebSocket?

• Es una conexión persistente entre el cliente y el servidor.
• Permite enviar y recibir mensajes en tiempo real.
• A diferencia de HTTP, no es request-response, sino que ambos pueden iniciar la comunicación.

---

🔌 Conexión a WebSocket

const ws = new WebSocket("ws://localhost:3000")

✅ Esto crea la conexión al servidor WebSocket. Solo se hace una vez.

---

📥 Escuchar mensajes

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("📩 Mensaje recibido:", data)
}

• event.data es una cadena de texto (normalmente JSON)
• Usamos JSON.parse() para convertirlo a un objeto
• Puedes verificar data.type para saber qué tipo de evento es

---

📤 Enviar mensajes al servidor

const payload = {
  type: "custom_event",
  message: "Hola desde el frontend"
}

ws.send(JSON.stringify(payload))

🔁 Los mensajes se envían como JSON serializado. El servidor decidirá cómo procesarlos.

---

📴 Cerrar conexión

ws.close()

Esto cierra manualmente la conexión. No es obligatorio, pero recomendable si el componente se desmonta.

---

🧩 Código completo modularizado

🧠 Tipos

// ws.ts
export type WSMessage = {
  type: string
  [key: string]: any
}

🔧 Función para inicializar WebSocket

// ws.ts
type OnMessage = (data: WSMessage) => void

export function initWebSocket(onMessage: OnMessage): WebSocket {
  const ws = new WebSocket("ws://localhost:3000")

  ws.onopen = () => {
    console.log("✅ WebSocket conectado")
  }

  ws.onmessage = (event) => {
    const data = JSON.parse(event.data)
    console.log("📩 WS:", data)
    onMessage(data) // 🔁 Reenviamos al componente
  }

  ws.onclose = () => {
    console.log("❌ WebSocket cerrado")
  }

  ws.onerror = (err) => {
    console.error("⚠️ WebSocket error:", err)
  }

  return ws
}

---

⚛️ Integración en React

useEffect(() => {
  const ws = initWebSocket((data) => {
    if (data.type === "product_created") {
      fetchProducts() // 🔁 Vuelve a cargar la lista
    }
  })

  return () => ws.close() // 🛑 Limpieza al desmontar
}, [])

---

🧭 Flujo resumido

1. 🔌 Se crea una conexión WebSocket con new WebSocket(...).
2. 🎧 El frontend escucha mensajes usando .onmessage.
3. 🧠 Según data.type, se toma acción (ej. volver a cargar productos).
4. 🔁 El componente actualiza su estado si es necesario.
5. 📤 También puede enviar mensajes si lo requiere (ej. notificaciones, comandos).

---

❗ Recomendaciones

• No crees múltiples conexiones WebSocket sin cerrarlas.
• Reusa la conexión o ciérrala con ws.close() cuando ya no se necesite.
• Nunca asumas que los mensajes tienen siempre la misma forma, verifica el type.

---

✅ Resultado esperado

• El frontend se conecta automáticamente.
• Escucha eventos como product_created.
• Vuelve a hacer un GET /products para actualizar los datos visibles.
• Se actualiza el componente automáticamente sin recargar la página.