122 lines
4.0 KiB
Markdown
122 lines
4.0 KiB
Markdown
# 🧪 Prueba de Mensajes Nuevos en Tiempo Real
|
|
|
|
## ✅ Cambios Implementados:
|
|
|
|
### 1. **Estilo Visual para Mensajes No Leídos**
|
|
- Fondo amarillo claro (#fffbea) con borde sutil
|
|
- Animación de highlight al aparecer
|
|
- Se quita automáticamente después de 3 segundos
|
|
|
|
### 2. **Detección Mejorada de Scroll**
|
|
- Logs detallados en consola para debugging
|
|
- Cambio de `initial=false` a `initial=true` cuando estás abajo (esto fuerza una recarga completa)
|
|
- Marca el último mensaje como no leído temporalmente
|
|
|
|
### 3. **Flujo de Funcionamiento:**
|
|
|
|
#### **Cuando estás AL FINAL del chat:**
|
|
1. SSE detecta nuevo mensaje entrante
|
|
2. Verifica que estás dentro de 150px del final
|
|
3. Marca flag `_nextMessageUnread = true`
|
|
4. Llama `loadMessages(userId, true, true)` para recargar
|
|
5. El último mensaje se renderiza con clase `unread`
|
|
6. Después de 3 segundos, quita el highlight automáticamente
|
|
|
|
#### **Cuando estás LEYENDO ARRIBA:**
|
|
1. SSE detecta nuevo mensaje entrante
|
|
2. Verifica que NO estás cerca del final
|
|
3. Muestra botón "Nuevo mensaje" o "Nuevos mensajes (N)"
|
|
4. Guarda mensaje en staging
|
|
5. Cuando haces click, baja y muestra todos los mensajes
|
|
|
|
## 🔍 Cómo Probar:
|
|
|
|
### Paso 1: Abrir Navegador y Consola
|
|
```bash
|
|
# Abrir http://localhost:8080/conversations.php
|
|
# Presionar F12 para abrir Developer Tools
|
|
# Ver pestaña "Console"
|
|
```
|
|
|
|
### Paso 2: Abrir una Conversación
|
|
- Hacer click en cualquier conversación de la lista
|
|
- Verificar en consola que ves: `✅ SSE conectado (🔐 autenticado)`
|
|
|
|
### Paso 3: Enviar Mensaje de Prueba desde WhatsApp
|
|
**IMPORTANTE:** Envía el mensaje desde WhatsApp a tu número de bot
|
|
|
|
### Paso 4: Observar Logs en Consola
|
|
Deberías ver algo como:
|
|
```
|
|
📨 SSE new_message recibido: {...}
|
|
📨 Datos parseados del mensaje: {...}
|
|
👤 User ID del mensaje: 123 | Conversación actual: 123
|
|
♻️ Mensaje para conversación ACTIVA, procesando...
|
|
📍 Posición scroll: {scrollHeight: 1234, scrollTop: 1000, clientHeight: 600, distanceFromBottom: 34, isAtBottom: true}
|
|
✅ Usuario AL FINAL, recargando mensajes...
|
|
```
|
|
|
|
### Paso 5: Verificar Resultado
|
|
- El mensaje debe aparecer automáticamente (sin refrescar)
|
|
- Debe tener fondo amarillo claro durante 3 segundos
|
|
- Después el fondo vuelve a blanco
|
|
|
|
### Paso 6: Probar Scroll Arriba
|
|
1. Hacer scroll hacia arriba (leer mensajes viejos)
|
|
2. Enviar otro mensaje desde WhatsApp
|
|
3. Debe aparecer botón "Nuevo mensaje" en la parte inferior
|
|
4. Al hacer click, baja y muestra el mensaje
|
|
|
|
## 🐛 Debugging:
|
|
|
|
### Si no aparece el mensaje cuando estás abajo:
|
|
|
|
1. **Verificar SSE está conectado:**
|
|
```bash
|
|
# En otra terminal:
|
|
./test_sse_debug.sh
|
|
```
|
|
|
|
2. **Verificar logs en consola:**
|
|
- Buscar "SSE new_message recibido"
|
|
- Buscar "Usuario AL FINAL"
|
|
- Buscar errores en rojo
|
|
|
|
3. **Verificar que el mensaje se guardó en BD:**
|
|
```bash
|
|
docker exec -it whatsapp-dev-app php -r "
|
|
require 'config/config.php';
|
|
\$db = Database::getInstance();
|
|
\$msgs = \$db->fetchAll('SELECT * FROM conversations ORDER BY created_at DESC LIMIT 5');
|
|
print_r(\$msgs);
|
|
"
|
|
```
|
|
|
|
4. **Verificar el SSE está enviando eventos:**
|
|
- Abrir http://localhost:8080/api/sse_events.php?token=demo_token directamente
|
|
- Deberías ver stream de eventos (connected, heartbeat cada 30s)
|
|
|
|
### Si el highlight no aparece:
|
|
|
|
1. **Verificar flag se está seteando:**
|
|
- Buscar en consola: "Usuario AL FINAL, recargando mensajes..."
|
|
- Abrir Inspector (Elementos) y buscar la clase `unread` en el mensaje
|
|
|
|
2. **Verificar CSS está cargado:**
|
|
- Buscar en Inspector `.message.unread .message-bubble`
|
|
- Debe tener `background: #fffbea`
|
|
|
|
## 📊 Métricas Esperadas:
|
|
|
|
- **Tiempo de aparición:** 3-5 segundos después de enviar mensaje
|
|
- **Duración del highlight:** 3 segundos
|
|
- **Intervalo de polling SSE:** Cada 3 segundos revisa BD
|
|
- **Heartbeat:** Cada 30 segundos
|
|
|
|
## ✨ Próximas Mejoras (Opcional):
|
|
|
|
1. Contador de mensajes no leídos en la lista de conversaciones
|
|
2. Marcar conversación como leída cuando abres
|
|
3. Notificación de escritura ("Usuario está escribiendo...")
|
|
4. Confirmación de entrega y lectura más precisa
|