Created
November 24, 2014 20:55
-
-
Save poolik/cfc3ac060b308e155290 to your computer and use it in GitHub Desktop.
Websocket demo index.html, modified version of https://github.com/spring-projects/spring-boot/blob/master/spring-boot-samples/spring-boot-sample-websocket/src/main/resources/static/echo.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #connect-container { | |
| float: left; | |
| width: 400px | |
| } | |
| #connect-container div { | |
| padding: 5px; | |
| } | |
| #console-container { | |
| float: left; | |
| margin-left: 15px; | |
| width: 400px; | |
| } | |
| #console { | |
| border: 1px solid #CCCCCC; | |
| border-right-color: #999999; | |
| border-bottom-color: #999999; | |
| height: 170px; | |
| overflow-y: scroll; | |
| padding: 5px; | |
| width: 100%; | |
| } | |
| #console p { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| var ws = null; | |
| function setConnected(connected) { | |
| document.getElementById('connect').disabled = connected; | |
| document.getElementById('disconnect').disabled = !connected; | |
| document.getElementById('echo').disabled = !connected; | |
| } | |
| function connect() { | |
| var target = document.getElementById('target').value; | |
| ws = new WebSocket(target); | |
| ws.onopen = function () { | |
| setConnected(true); | |
| log('Info: WebSocket connection opened.'); | |
| }; | |
| ws.onmessage = function (event) { | |
| log('Received: ' + event.data); | |
| }; | |
| ws.onclose = function () { | |
| setConnected(false); | |
| log('Info: WebSocket connection closed.'); | |
| }; | |
| } | |
| function disconnect() { | |
| if (ws != null) { | |
| ws.close(); | |
| ws = null; | |
| } | |
| setConnected(false); | |
| } | |
| function echo() { | |
| if (ws != null) { | |
| var message = document.getElementById('message').value; | |
| log('Sent: ' + message); | |
| ws.send(message); | |
| } else { | |
| alert('WebSocket connection not established, please connect.'); | |
| } | |
| } | |
| function log(message) { | |
| var console = document.getElementById('console'); | |
| var p = document.createElement('p'); | |
| p.style.wordWrap = 'break-word'; | |
| p.appendChild(document.createTextNode(message)); | |
| console.appendChild(p); | |
| while (console.childNodes.length > 25) { | |
| console.removeChild(console.firstChild); | |
| } | |
| console.scrollTop = console.scrollHeight; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets rely on Javascript being enabled. Please enable | |
| Javascript and reload this page!</h2></noscript> | |
| <div> | |
| <div id="connect-container"> | |
| <div> | |
| <input id="target" type="text" size="40" style="width: 350px" value="ws://localhost:8080/echo"/> | |
| </div> | |
| <div> | |
| <button id="connect" onclick="connect();">Connect</button> | |
| <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button> | |
| </div> | |
| <div> | |
| <textarea id="message" style="width: 350px">Here is a message!</textarea> | |
| </div> | |
| <div> | |
| <button id="echo" onclick="echo();" disabled="disabled">Echo message</button> | |
| </div> | |
| </div> | |
| <div id="console-container"> | |
| <div id="console"></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment