- Fix WebSocket server to properly broadcast logs to all connected clients - Integrate professional logging system with real-time WebSocket interface - Add network status indicator with DigitalOcean Spaces connectivity - Implement AWS Signature V4 authentication for private bucket access - Add JSON content loader with backward compatibility to JS modules - Restore navigation breadcrumb system with comprehensive logging - Add multiple content formats: JSON + JS with automatic discovery - Enhance top bar with logger toggle and network status indicator - Remove deprecated temp-games module and clean up unused files 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
78 lines
2.8 KiB
HTML
78 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Logs Interface Direct</title>
|
|
<style>
|
|
body { font-family: monospace; background: #1e1e1e; color: white; padding: 20px; }
|
|
.log { margin: 2px 0; padding: 4px; border-left: 3px solid #007bff; }
|
|
.ERROR { border-color: #dc3545; }
|
|
.WARN { border-color: #ffc107; }
|
|
.DEBUG { border-color: #6c757d; }
|
|
.INFO { border-color: #17a2b8; }
|
|
#status {
|
|
padding: 10px;
|
|
background: #333;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Test Direct Interface de Logs</h2>
|
|
<div id="status">En attente...</div>
|
|
<div id="logs"></div>
|
|
|
|
<script>
|
|
const statusDiv = document.getElementById('status');
|
|
const logsDiv = document.getElementById('logs');
|
|
let messageCount = 0;
|
|
|
|
console.log('🔌 Tentative connexion WebSocket ws://localhost:8082');
|
|
const ws = new WebSocket('ws://localhost:8082');
|
|
|
|
ws.onopen = () => {
|
|
console.log('✅ WebSocket connecté !');
|
|
statusDiv.innerHTML = '<span style="color: green;">✅ WebSocket connecté - En attente des logs...</span>';
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
messageCount++;
|
|
console.log(`📨 Message #${messageCount} reçu:`, event.data);
|
|
|
|
try {
|
|
const logData = JSON.parse(event.data);
|
|
const logDiv = document.createElement('div');
|
|
logDiv.className = `log ${logData.level}`;
|
|
|
|
const time = new Date(logData.timestamp).toLocaleTimeString();
|
|
logDiv.innerHTML = `<strong>[${time}] ${logData.level}:</strong> ${logData.message}`;
|
|
|
|
logsDiv.appendChild(logDiv);
|
|
|
|
// Auto-scroll
|
|
logDiv.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
|
|
|
// Update status
|
|
statusDiv.innerHTML = `<span style="color: green;">✅ Connecté - ${messageCount} messages reçus</span>`;
|
|
|
|
} catch (error) {
|
|
console.log('❌ Erreur parsing:', error);
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'log ERROR';
|
|
errorDiv.textContent = `Erreur parsing: ${event.data}`;
|
|
logsDiv.appendChild(errorDiv);
|
|
}
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('❌ Connexion fermée');
|
|
statusDiv.innerHTML = `<span style="color: red;">❌ Déconnecté (${messageCount} messages reçus)</span>`;
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.log('❌ Erreur WebSocket:', error);
|
|
statusDiv.innerHTML = '<span style="color: red;">❌ Erreur de connexion</span>';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |