Class_generator/test-websocket-simple.html
StillHammer 1f8688c4aa Fix WebSocket logging system and add comprehensive network features
- 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>
2025-09-15 23:05:14 +08:00

75 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Test WebSocket Simple</title>
<style>
body { font-family: monospace; background: #1e1e1e; color: white; }
.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; }
</style>
</head>
<body>
<h2>Test WebSocket Simple</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.textContent = 'Connecté !';
statusDiv.style.color = 'green';
// Clear initial content
logsDiv.innerHTML = '<div style="color: green;">✅ WebSocket connecté - En attente des logs...</div>';
};
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' });
} 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.textContent = `Déconnecté (${messageCount} messages reçus)`;
statusDiv.style.color = 'red';
};
ws.onerror = (error) => {
console.log('❌ Erreur WebSocket:', error);
statusDiv.textContent = 'Erreur de connexion';
statusDiv.style.color = 'red';
};
</script>
</body>
</html>