353 lines
11 KiB
HTML
353 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test SSE - WhatsApp Bot</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #25d366;
|
|
margin-bottom: 20px;
|
|
}
|
|
.controls {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
}
|
|
button {
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
}
|
|
.btn-connect {
|
|
background: #25d366;
|
|
color: white;
|
|
}
|
|
.btn-connect:hover {
|
|
background: #128c7e;
|
|
}
|
|
.btn-disconnect {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
.btn-disconnect:hover {
|
|
background: #c82333;
|
|
}
|
|
.btn-clear {
|
|
background: #6c757d;
|
|
color: white;
|
|
}
|
|
.status {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
margin-bottom: 15px;
|
|
font-weight: bold;
|
|
}
|
|
.status.connected {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.status.disconnected {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.status.connecting {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeeba;
|
|
}
|
|
.events {
|
|
margin-top: 20px;
|
|
}
|
|
.event {
|
|
padding: 12px;
|
|
margin: 8px 0;
|
|
border-left: 4px solid;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 13px;
|
|
}
|
|
.event-connected {
|
|
border-color: #28a745;
|
|
background: #d4edda;
|
|
}
|
|
.event-new_message {
|
|
border-color: #007bff;
|
|
background: #cfe2ff;
|
|
}
|
|
.event-new_conversation {
|
|
border-color: #17a2b8;
|
|
background: #d1ecf1;
|
|
}
|
|
.event-notification {
|
|
border-color: #ffc107;
|
|
background: #fff3cd;
|
|
}
|
|
.event-heartbeat {
|
|
border-color: #6c757d;
|
|
background: #e2e3e5;
|
|
opacity: 0.7;
|
|
}
|
|
.event-error {
|
|
border-color: #dc3545;
|
|
background: #f8d7da;
|
|
}
|
|
.timestamp {
|
|
color: #6c757d;
|
|
font-size: 11px;
|
|
margin-right: 10px;
|
|
}
|
|
.event-type {
|
|
font-weight: bold;
|
|
color: #495057;
|
|
margin-right: 10px;
|
|
}
|
|
.event-data {
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: white;
|
|
border-radius: 3px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.stat {
|
|
background: #e9ecef;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #495057;
|
|
}
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🔌 Test SSE - WhatsApp Bot</h1>
|
|
|
|
<div class="controls">
|
|
<button class="btn-connect" onclick="connect()">▶️ Conectar SSE</button>
|
|
<button class="btn-disconnect" onclick="disconnect()">⏹️ Desconectar</button>
|
|
<button class="btn-clear" onclick="clearEvents()">🗑️ Limpiar eventos</button>
|
|
</div>
|
|
|
|
<div class="status disconnected" id="status">
|
|
⚪ Desconectado
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value" id="stat-messages">0</div>
|
|
<div class="stat-label">Mensajes</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="stat-conversations">0</div>
|
|
<div class="stat-label">Conversaciones</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="stat-notifications">0</div>
|
|
<div class="stat-label">Notificaciones</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value" id="stat-heartbeats">0</div>
|
|
<div class="stat-label">Heartbeats</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="events">
|
|
<h3>📋 Eventos Recibidos:</h3>
|
|
<div id="events"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let eventSource = null;
|
|
let stats = {
|
|
messages: 0,
|
|
conversations: 0,
|
|
notifications: 0,
|
|
heartbeats: 0
|
|
};
|
|
|
|
function updateStatus(text, className) {
|
|
const statusEl = document.getElementById('status');
|
|
statusEl.textContent = text;
|
|
statusEl.className = 'status ' + className;
|
|
}
|
|
|
|
function updateStats() {
|
|
document.getElementById('stat-messages').textContent = stats.messages;
|
|
document.getElementById('stat-conversations').textContent = stats.conversations;
|
|
document.getElementById('stat-notifications').textContent = stats.notifications;
|
|
document.getElementById('stat-heartbeats').textContent = stats.heartbeats;
|
|
}
|
|
|
|
function addEvent(type, data) {
|
|
const eventsDiv = document.getElementById('events');
|
|
const eventDiv = document.createElement('div');
|
|
eventDiv.className = 'event event-' + type;
|
|
|
|
const now = new Date();
|
|
const timestamp = now.toLocaleTimeString() + '.' + now.getMilliseconds();
|
|
|
|
eventDiv.innerHTML = `
|
|
<div>
|
|
<span class="timestamp">${timestamp}</span>
|
|
<span class="event-type">${type}</span>
|
|
</div>
|
|
<div class="event-data">${JSON.stringify(data, null, 2)}</div>
|
|
`;
|
|
|
|
eventsDiv.insertBefore(eventDiv, eventsDiv.firstChild);
|
|
|
|
// Limitar a 50 eventos
|
|
while (eventsDiv.children.length > 50) {
|
|
eventsDiv.removeChild(eventsDiv.lastChild);
|
|
}
|
|
}
|
|
|
|
function connect() {
|
|
if (eventSource) {
|
|
console.log('Ya hay una conexión activa');
|
|
return;
|
|
}
|
|
|
|
updateStatus('🔄 Conectando...', 'connecting');
|
|
|
|
const baseUrl = window.location.origin;
|
|
const sseUrl = `${baseUrl}/api/sse_events.php?token=demo_token&t=${Date.now()}`;
|
|
|
|
console.log('Conectando a:', sseUrl);
|
|
eventSource = new EventSource(sseUrl);
|
|
|
|
eventSource.addEventListener('connected', (e) => {
|
|
console.log('✅ Conectado:', e.data);
|
|
const data = JSON.parse(e.data);
|
|
updateStatus('🟢 Conectado (' + data.mode + ')', 'connected');
|
|
addEvent('connected', data);
|
|
});
|
|
|
|
eventSource.addEventListener('new_message', (e) => {
|
|
console.log('📨 Nuevo mensaje:', e.data);
|
|
const data = JSON.parse(e.data);
|
|
stats.messages++;
|
|
updateStats();
|
|
addEvent('new_message', data);
|
|
|
|
// Reproducir sonido
|
|
const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZUQ0NVKzo8bllHAU+jdfyvmwhBTGH0fPTgjMGHm7A7+OZUQ0NVKzo8bllHAU+jdfyv2whBTGH0fPTgjMGHm7A7+OZUQ0NVKzo8bllHAU+jdfy');
|
|
audio.play().catch(e => console.log('No se pudo reproducir sonido'));
|
|
});
|
|
|
|
eventSource.addEventListener('new_conversation', (e) => {
|
|
console.log('💬 Nueva conversación:', e.data);
|
|
const data = JSON.parse(e.data);
|
|
stats.conversations++;
|
|
updateStats();
|
|
addEvent('new_conversation', data);
|
|
});
|
|
|
|
eventSource.addEventListener('notification', (e) => {
|
|
console.log('🔔 Notificación:', e.data);
|
|
const data = JSON.parse(e.data);
|
|
stats.notifications++;
|
|
updateStats();
|
|
addEvent('notification', data);
|
|
});
|
|
|
|
eventSource.addEventListener('heartbeat', (e) => {
|
|
const data = JSON.parse(e.data);
|
|
stats.heartbeats++;
|
|
updateStats();
|
|
addEvent('heartbeat', data);
|
|
});
|
|
|
|
eventSource.addEventListener('error', (e) => {
|
|
console.error('❌ Error SSE:', e);
|
|
if (e.data) {
|
|
try {
|
|
const data = JSON.parse(e.data);
|
|
addEvent('error', data);
|
|
} catch (err) {
|
|
addEvent('error', { message: 'Error desconocido' });
|
|
}
|
|
}
|
|
});
|
|
|
|
eventSource.onerror = (error) => {
|
|
console.error('❌ Error en conexión SSE:', error);
|
|
const state = eventSource.readyState;
|
|
|
|
if (state === EventSource.CONNECTING) {
|
|
updateStatus('🔄 Reconectando...', 'connecting');
|
|
} else if (state === EventSource.CLOSED) {
|
|
updateStatus('🔴 Desconectado', 'disconnected');
|
|
addEvent('error', { message: 'Conexión cerrada', state: state });
|
|
eventSource = null;
|
|
}
|
|
};
|
|
}
|
|
|
|
function disconnect() {
|
|
if (eventSource) {
|
|
eventSource.close();
|
|
eventSource = null;
|
|
updateStatus('🔴 Desconectado', 'disconnected');
|
|
console.log('Desconectado');
|
|
}
|
|
}
|
|
|
|
function clearEvents() {
|
|
document.getElementById('events').innerHTML = '';
|
|
stats = {
|
|
messages: 0,
|
|
conversations: 0,
|
|
notifications: 0,
|
|
heartbeats: 0
|
|
};
|
|
updateStats();
|
|
}
|
|
|
|
// Auto-conectar al cargar
|
|
window.addEventListener('load', () => {
|
|
console.log('Página cargada, conectando automáticamente...');
|
|
setTimeout(connect, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|