echo-web/socket-connection-test.html at master · IEEECS-VIT/echo-web · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Connection Test</title>
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <h1>Socket.IO Connection Test</h1>
    <div id="status">Connecting...</div>
    <div id="logs"></div>
    <button onclick="testConnection()">Retry Connection</button>

    <script>
        let socket;
        const statusDiv = document.getElementById('status');
        const logsDiv = document.getElementById('logs');

        function log(message) {
            const now = new Date().toLocaleTimeString();
            logsDiv.innerHTML += `<div>[${now}] ${message}</div>`;
        }

        function testConnection() {
            if (socket) {
                socket.disconnect();
            }

            statusDiv.innerHTML = 'Connecting...';
            logsDiv.innerHTML = '';

            socket = io('http://localhost:5000', {
                withCredentials: false,
                transports: ["websocket", "polling"],
                upgrade: true,
                reconnection: true,
                reconnectionAttempts: 5,
                reconnectionDelay: 1000,
                timeout: 20000,
                auth: { userId: 'test-user-123' }
            });

            socket.on('connect', () => {
                statusDiv.innerHTML = '✅ Connected';
                statusDiv.style.color = 'green';
                log(`Connected with ID: ${socket.id}`);
                log(`Transport: ${socket.io.engine.transport.name}`);
            });

            socket.on('disconnect', (reason) => {
                statusDiv.innerHTML = '❌ Disconnected';
                statusDiv.style.color = 'red';
                log(`Disconnected: ${reason}`);
            });

            socket.on('connect_error', (error) => {
                statusDiv.innerHTML = '❌ Connection Error';
                statusDiv.style.color = 'red';
                log(`Connection error: ${error.message || error}`);
            });

            socket.on('reconnect', (attemptNumber) => {
                statusDiv.innerHTML = '✅ Reconnected';
                statusDiv.style.color = 'green';
                log(`Reconnected after ${attemptNumber} attempts`);
            });

            socket.on('reconnect_error', (error) => {
                log(`Reconnection error: ${error.message || error}`);
            });

            socket.on('reconnect_failed', () => {
                statusDiv.innerHTML = '❌ Reconnection Failed';
                statusDiv.style.color = 'red';
                log('Reconnection failed after all attempts');
            });
        }

        // Start initial connection
        testConnection();
    </script>
</body>
</html>