Skip to content

Manual Técnico – Frontend ElephanTalk

DESCRIPCIÓN GENERAL

La feature de chat grupal permite la comunicación en tiempo real entre usuarios autenticados de la plataforma. Está implementada como un componente React ubicado en Chat.jsx y utiliza la librería socket.io-client para la comunicación bidireccional con el backend.

ESTRUCTURA DEL COMPONENTE

  • Archivo principal: Chat.jsx
  • Utiliza hooks de React (useState, useEffect) para el manejo de estado y ciclo de vida.
  • Utiliza el store global de usuario (useAuthStore con zustand) para obtener datos del usuario autenticado.
  • Se conecta al backend mediante socket.io-client usando la URL definida en la variable de entorno VITE_PUBLIC_API_URL.
  • Renderiza la interfaz de chat: área de mensajes, input de texto y (opcionalmente) lista de usuarios conectados.

FLUJO DE FUNCIONAMIENTO

  • Al montar el componente, se inicializa la conexión con el servidor de chat usando socket.io-client.
  • El usuario autenticado se une automáticamente a la sala de chat grupal.
  • Los mensajes enviados por el usuario se emiten al backend y se muestran en la interfaz.
  • Los mensajes recibidos desde el backend se agregan al estado local y se renderizan en tiempo real.
  • Si el backend lo soporta, se puede mostrar la lista de usuarios conectados mediante un evento específico.
  • Al desmontar el componente, se cierra la conexión de socket para liberar recursos.

PRINCIPALES FUNCIONES Y EVENTOS

  • Conexión: const socket = io(VITE_PUBLIC_API_URL, opciones)
  • Unirse al chat: socket.emit('join', { userId, username })
  • Enviar mensaje: socket.emit('message', { userId, username, content })
  • Recibir mensaje: socket.on('message', callback)
  • Actualizar usuarios conectados: socket.on('users:update', callback)
  • Desconexión: socket.disconnect() en el cleanup de useEffect

INTERFAZ DE USUARIO

  • Campo de texto para escribir mensajes.
  • Botón o acción para enviar el mensaje.
  • Área de mensajes que se actualiza en tiempo real.

MANEJO DE ERRORES Y ESTADOS

  • Si la conexión con el servidor falla, se muestra un mensaje de error o se intenta reconectar.
  • Si el usuario no está autenticado, se bloquea el acceso al chat o se redirige a login.
  • Los mensajes de error del backend se pueden mostrar mediante notificaciones o alertas.

DEPENDENCIAS Y LIBRERÍAS

  • socket.io-client: Comunicación en tiempo real.
  • zustand: Manejo de estado global.
  • React: UI y hooks.

VARIABLES DE ENTORNO

  • VITE_PUBLIC_API_URL: URL base del backend para inicializar la conexión de socket.

ARCHIVOS RELACIONADOS

  • Chat.jsx: Componente principal del chat grupal.
  • Componentes de UI para mensajes, input, usuarios.