|
|
<!DOCTYPE html> |
|
|
<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; |
|
|
} |
|
|
|
|
|
function connect() { |
|
|
|
|
|
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}"`); |
|
|
|
|
|
|
|
|
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...'); |
|
|
|
|
|
setTimeout(connect, 3000); |
|
|
}; |
|
|
|
|
|
ws.onerror = function(error) { |
|
|
addLog('Erreur WebSocket.'); |
|
|
console.error('WebSocket Error:', error); |
|
|
ws.close(); |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
connect(); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
