NGR002/test.html at main · esteven-v/NGR002 · 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
<!DOCTYPE html>
<html>
<head>
    <title>Spring Boot WebSocket Client</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <h1>WebSocket Messages</h1>
    <div id="messages"></div>

    <script>
        var stompClient = null;

        function connect() {
            var socket = new SockJS('ws://localhost:8080/ws'); // Your Spring Boot WebSocket endpoint
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/scenarios', function (message) {
                    showMessage(JSON.parse(message.body));
                });
            }, function (error) {
                console.error('STOMP Error:', error);
            });
        }

        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            console.log("Disconnected");
        }

        function showMessage(message) {
            var messagesDiv = document.getElementById('messages');
            var p = document.createElement('p');
            p.appendChild(document.createTextNode(message));
            messagesDiv.appendChild(p);
        }

        // Connect when the page loads
        window.onload = connect;
        // Disconnect when the page unloads
        window.onbeforeunload = disconnect;
    </script>
</body>
</html>