React 19 de Cero a Experto / Tiempo real y sistemas distribuidos

Reto: chat en tiempo real con presencia

Reto45 min100 XP

Juntas todo el módulo en un chat en tiempo real funcional: mensajes que van y vienen por el socket, envío OPTIMISTA (tu mensaje aparece al instante), PRESENCIA (quién está en línea) e indicador de "está escribiendo…". Lo corres en vivo con el socket simulado —mismo modelo mental que Socket.io—. Es el ensayo general del proyecto final del curso: el chat colaborativo. Cuando termines, el tiempo real no tendrá secretos.

Reto

Chat en tiempo real

Difícil45 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un chat en vivo con presencia, sobre el socket simulado:

Enviar y recibir mensajes por el socket, con lista que crece y auto-scroll al último.
Envío optimista: tu mensaje aparece al instante (marcado "enviando") y se confirma al volver del servidor (deduplicado por id).
Presencia: una lista de "en línea" que reacciona a eventos "presencia" del servidor.
Indicador "escribiendo…": cuando llega un evento "escribiendo", muestra "X está escribiendo…" por unos segundos.
Gestión correcta de la conexión: conectar en un efecto, desuscribir todos los manejadores en el cleanup.

Reglas

Cada socket.on(...) con su socket.off(...) en el cleanup (una conexión, sin manejadores duplicados).
Mensajes con id generado en el cliente para deduplicar el optimista con su confirmación.
Todo tipado; la conexión guardada en un ref.

45:00

Cuando estés listo, arranca el reloj.

Lo que este reto consolida:

El tiempo real es React + un canal que empuja. Cada evento entrante (mensaje, presencia, escribiendo) es un socket.on que actualiza estado, y React repinta. No hay nada mágico: es el patrón de siempre con una fuente de datos que llega sola.
El cleanup es sagrado. Tres on, tres off. Sin eso, mensajes triplicados y fugas.
El optimismo + id hacen el chat fluido y sin duplicados —la combinación del módulo 4 y este—.

Autoevaluación: envía mensajes —¿aparecen al instante con ⏳ y se confirman? ¿el bot "está escribiendo…" antes de responder? ¿ves el "3 en línea" de la presencia? Compara con Socket.io real: tu crearSocketSimulado() sería io("https://..."), tus socket.on("mensaje"/"presencia"/"escribiendo") serían idénticos, y el servidor (SC-10) haría el io.emit y el io.to(sala).emit que aquí simula el bot. Le falta un backend de verdad, salas múltiples y persistencia —pero el modelo mental del tiempo real en React es EXACTAMENTE este: eventos que entran, estado que se actualiza, UI que repinta—.

Qué sigue

Módulo 9 conquistado: dominas el tiempo real —WebSockets, Socket.io, chat, envío optimista, presencia y salas—. Tu app puede vivir en vivo. Antes del proyecto final, el módulo 10 te lleva a NIVEL PRODUCCIÓN: rendimiento (Profiler, virtualización), code splitting, testing y arquitectura por features —lo que separa un proyecto que "funciona en mi máquina" de uno listo para usuarios reales—.