Chat en Tiempo Real

Lo que vas a construir

Una sala de chat donde los mensajes aparecen instantaneamente para todos los usuarios conectados, sin necesidad de refrescar la pagina. Implementaras conexiones en tiempo real con Firebase Realtime Database, sincronizacion automatica de mensajes entre clientes, indicador de "escribiendo..." y scroll automatico a nuevos mensajes. Al terminar, tendras un chat funcional que puedes integrar en cualquier aplicacion o usar como base para un sistema de mensajeria mas complejo.

Opciones

Paso 1: Pidele a una IA el chat

Necesito un chat en tiempo real con:
- Firebase Realtime Database
- Múltiples usuarios
- Mensajes con timestamp
- Scroll automático al nuevo mensaje
- Indicador de "escribiendo..."
- React + TypeScript

Dame el código completo.

Código típico (Firebase)

import { ref, push, onValue } from 'firebase/database'

// Enviar mensaje
const sendMessage = (text: string) => {
  push(ref(db, 'messages'), {
    text,
    userId: user.uid,
    userName: user.displayName,
    timestamp: Date.now()
  })
}

// Escuchar mensajes
useEffect(() => {
  const messagesRef = ref(db, 'messages')
  return onValue(messagesRef, (snapshot) => {
    const data = snapshot.val()
    setMessages(Object.values(data || {}))
  })
}, [])

Próximo paso

→ Subida de Archivos S3