Java-WebSocket/WebSocketTest.html at main · phyex0/Java-WebSocket · 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
<html>
<head>
    <title>Chat WebSocket</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockjs.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
    <script type="text/javascript">
        var stompClient = null;
        var baseAddress = 'http://socket-manager.tiga.health';

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var username = document.getElementById('from').value;
            var socket = new SockJS(baseAddress + '/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);

                // Subscribe to multiple topics
                stompClient.subscribe('/public/chat', function (message) {
                    handleReceivedMessage(message.body, 'Public');
                });
                stompClient.subscribe(`/private/${username}/chat`, function (message) {
                    handleReceivedMessage(message.body, 'Private');
                });
            });
        }

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

        function sendMessage() {
            var from = document.getElementById('from').value;
            var text = document.getElementById('text').value;
            stompClient.send("/app/listen", {}, JSON.stringify({'sender': from, 'message': text}));
        }

        function handleReceivedMessage(message, topic) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            var username = document.getElementById('from').value;
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(`[${username} - ${topic}] ${message}`));
            response.appendChild(p);
        }
    </script>
</head>
<body onload="disconnect()">
<div>
    <div>
        <input type="text" id="from" placeholder="Username"/>
    </div>
    <br />
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <br />
    <div id="conversationDiv">
        <input type="text" id="text" placeholder="Message.."/>
        <button id="sendMessage" onclick="sendMessage();">Send</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>