up
This commit is contained in:
Lizandro Guarnizo
@@ -0,0 +1,352 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user