fullstack-effect-hive/test-ws.html at main · rashedInt32/fullstack-effect-hive · 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
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Test</title>
</head>
<body>
    <h1>WebSocket Connection Test</h1>
    <div id="output"></div>

    <script>
        const output = document.getElementById('output');

        function log(message, isError = false) {
            const p = document.createElement('p');
            p.textContent = new Date().toISOString() + ' - ' + message;
            p.style.color = isError ? 'red' : 'green';
            output.appendChild(p);
            console.log(message);
        }

        log('Connecting to ws://localhost:3002/ws ...');
        const ws = new WebSocket('ws://localhost:3002/ws');

        ws.onopen = () => {
            log('✓ WebSocket opened successfully!');
            log('Sending ping...');
            ws.send(JSON.stringify({ type: 'ping' }));
        };

        ws.onmessage = (event) => {
            log('✓ Received: ' + event.data);
        };

        ws.onerror = (error) => {
            log('✗ WebSocket error occurred', true);
            console.error('Error details:', error);
        };

        ws.onclose = (event) => {
            log('Connection closed. Code: ' + event.code + ', Reason: ' + event.reason);
        };
    </script>
</body>
</html>