java-native-websocket-server-example/index.html at master · jittagornp/java-native-websocket-server-example · 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
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
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WebSocket</title>
        <style type="text/css">
            .status-section {
                margin-bottom: 1rem;
            }

            .status-connected {
                color: green;
            }

            .status-closed {
                color: orange;
            }

            .status-error {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>WebSocket Demo</h1>

        <h3>Browser : <span id="browser-name"></span></h3>
        <div class="status-section">Status : <span id="status"></span></div>

        <input id="input" type="input"/>
        <button id="send-button">send</button>
        <button id="close-button">close</button>

        <br/>

        <div id="output"></div>

        <script type="text/javascript">
            // Opera 8.0+
            var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

            // Firefox 1.0+
            var isFirefox = typeof InstallTrigger !== 'undefined';

            // Safari 3.0+ "[object HTMLElementConstructor]"
            var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));

            // Internet Explorer 6-11
            var isIE = /*@cc_on!@*/false || !!document.documentMode;

            // Edge 20+
            var isEdge = !isIE && !!window.StyleMedia;

            // Chrome 1 - 79
            var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);

            // Edge (based on chromium) detection
            var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);

            // Blink engine detection
            var isBlink = (isChrome || isOpera) && !!window.CSS;

            const browserName = document.getElementById("browser-name");

            if (isOpera) {
                browserName.innerText = "Opera";
            } else if (isFirefox) {
                browserName.innerText = "Firefox";
            } else if (isSafari) {
                browserName.innerText = "Safari";
            } else if (isIE) {
                browserName.innerText = "IE";
            } else if (isEdge) {
                browserName.innerText = "Edge";
            } else if (isChrome) {
                browserName.innerText = "Chrome";
            } else if (isEdgeChromium) {
                browserName.innerText = "Edge Chromium";
            } else if (isBlink) {
                browserName.innerText = "Blink";
            } else {
                browserName.innerText = "Unknown";
            }
        </script>

        <script type="text/javascript">
            const status = document.getElementById("status");
            const input = document.getElementById("input");
            const output = document.getElementById("output");
            const sendButton = document.getElementById("send-button");
            const closeButton = document.getElementById("close-button");

            const socket = new WebSocket("ws://localhost");

            socket.addEventListener("open", function (event) {
                console.log("On open => ", event);
                status.innerText = "Connected";
                status.className = "status status-connected";
            });

            socket.addEventListener("close", function (event) {
                console.log("On close => ", event);
                status.innerText = "Closed";
                status.className = "status status-closed";
            });

            socket.addEventListener("error", function (event) {
                console.log("On error => ", event);
                status.innerText = "Error";
                status.className = "status status-error";
            });

            socket.addEventListener("message", function (event) {
                console.log("Received data from server => ", event);
                output.innerHTML = output.innerHTML + "<br/>" + event.data;
            });

            sendButton.addEventListener("click", function () {
                console.log("Send data to server => ", input.value);
                socket.send(input.value);
                input.value = "";
            });

            closeButton.addEventListener("click", function () {
                console.log("Close connection");
                socket.close();
            });
        </script>
    </body>
</html>