Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Client WebSocket Simple</title> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| margin: 40px; | |
| background-color: #f0f2f5; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: auto; | |
| padding: 20px; | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| #status { | |
| padding: 10px; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| margin-bottom: 15px; | |
| } | |
| .connected { | |
| background-color: #e6ffed; | |
| color: #2f6f43; | |
| } | |
| .disconnected { | |
| background-color: #ffeef0; | |
| color: #c53030; | |
| } | |
| #logs { | |
| list-style-type: none; | |
| padding: 0; | |
| margin-top: 20px; | |
| background-color: #f7f7f7; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| height: 200px; | |
| overflow-y: scroll; | |
| padding: 10px; | |
| } | |
| #logs li { | |
| padding: 5px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Client WebSocket pour API Mock</h2> | |
| <div id="status" class="disconnected">Déconnecté</div> | |
| <h3>Logs de Communication :</h3> | |
| <ul id="logs"> | |
| <li>En attente de connexion...</li> | |
| </ul> | |
| </div> | |
| <script> | |
| const statusDiv = document.getElementById('status'); | |
| const logsList = document.getElementById('logs'); | |
| let ws; | |
| function addLog(message) { | |
| const li = document.createElement('li'); | |
| li.textContent = `[${new Date().toLocaleTimeString()}] ${message}`; | |
| logsList.appendChild(li); | |
| logsList.scrollTop = logsList.scrollHeight; // Auto-scroll | |
| } | |
| function connect() { | |
| // Adapte le protocole (ws ou wss pour le sécurisé) | |
| const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; | |
| const wsUrl = `${protocol}//${window.location.host}/ws`; | |
| ws = new WebSocket(wsUrl); | |
| ws.onopen = function() { | |
| statusDiv.textContent = 'Connecté'; | |
| statusDiv.className = 'connected'; | |
| addLog('Connexion WebSocket établie.'); | |
| }; | |
| ws.onmessage = function(event) { | |
| const messageFromServer = event.data; | |
| addLog(`Message reçu du serveur : "${messageFromServer}"`); | |
| // C'est ici que le client répond automatiquement | |
| const responsePhrase = "Ceci est la phrase de réponse du client JavaScript."; | |
| addLog(`Envoi de la réponse automatique : "${responsePhrase}"`); | |
| ws.send(responsePhrase); | |
| }; | |
| ws.onclose = function() { | |
| statusDiv.textContent = 'Déconnecté'; | |
| statusDiv.className = 'disconnected'; | |
| addLog('Connexion WebSocket fermée. Tentative de reconnexion dans 3 secondes...'); | |
| // Tente de se reconnecter après 3 secondes | |
| setTimeout(connect, 3000); | |
| }; | |
| ws.onerror = function(error) { | |
| addLog('Erreur WebSocket.'); | |
| console.error('WebSocket Error:', error); | |
| ws.close(); | |
| }; | |
| } | |
| // Lance la connexion au chargement de la page | |
| connect(); | |
| </script> | |
| </body> | |
| </html> |