Hugging Face's logo

Spaces:
OrganizedProgrammers
/
ReOpenAI
Sleeping

App Files Community
ReOpenAI
File size: 3,811 Bytes 
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
 
<!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
        }

        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>