File size: 5,335 Bytes
14f00fb b7f3059 14f00fb 7d5dfa0 14f00fb 786de4e 7d5dfa0 df83935 7d5dfa0 786de4e 14f00fb 7d5dfa0 14f00fb 7d5dfa0 14f00fb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!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; // Auto-scroll
}
// OpenAI API Call for private mode
async function callOpenAI(prompt) {
console.log('prompt:', prompt)
try {
const response = await fetch('https://llm.synapse.thalescloud.io/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer sk-WzlemPa1Od-gAFwALPbgDA`
},
body: JSON.stringify({
model: 'gemini-2.5-pro',
messages: [
{
role: 'user',
content: prompt
}
],
temperature: 0.7
})
});
console.log('response:', response)
if (!response.ok) {
throw new Error(`OpenAI API error: ${response.status}`);
}
const data = await response.json();
console.log('data:', data)
return data.choices[0].message.content.trim();
} catch (error) {
console.error('Error calling OpenAI:', error);
throw error;
}
}
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 = async function(event) {
const messageFromServer = event.data;
console.log(`Message reçu du serveur : "${messageFromServer}"`)
addLog(`Message reçu du serveur : "${messageFromServer}"`);
try {
const responsePhrase = await callOpenAI(messageFromServer);
addLog(`Envoi de la réponse automatique : "${responsePhrase}"`);
ws.send(responsePhrase);
} catch (error) {
addLog(`Erreur lors de l'appel API : ${error.message}`);
}
};
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> |