|
@@ -0,0 +1,56 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<title>WebSocket echo</title>
|
|
|
+<link rel="stylesheet" href="/style.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<form>
|
|
|
+ <label for="multiline">History:</label><br>
|
|
|
+ <textarea id="multiline" name="multiline" rows="15" cols="50" readonly></textarea><br>
|
|
|
+ <label for="singleline">Send a message:</label><br>
|
|
|
+ <input type="text" id="singleline" placeholder="write a message and press enter" name="singleline"><br>
|
|
|
+ <input type="submit" id="sendButton" value="Send" disabled>
|
|
|
+ <input type="button" id="connectButton" value="Connect" onclick="rebind()">
|
|
|
+</form>
|
|
|
+
|
|
|
+<script>
|
|
|
+rebind();
|
|
|
+
|
|
|
+var form = document.querySelector('form');
|
|
|
+var singleline = document.querySelector('#singleline');
|
|
|
+var multiline = document.querySelector('#multiline');
|
|
|
+var sendButton = document.querySelector('#sendButton');
|
|
|
+var connectButton = document.querySelector('#connectButton');
|
|
|
+
|
|
|
+singleline.focus();
|
|
|
+
|
|
|
+form.addEventListener('submit', function(event){
|
|
|
+ event.preventDefault();
|
|
|
+ ws.send(singleline.value);
|
|
|
+ multiline.value += 'You: ' + singleline.value + '\n';
|
|
|
+ singleline.value = '';
|
|
|
+});
|
|
|
+
|
|
|
+function rebind(){
|
|
|
+ ws = new WebSocket('ws://localhost:8080/echo');
|
|
|
+
|
|
|
+ ws.onmessage = function(event){
|
|
|
+ multiline.value += 'Server: ' + event.data + '\n';
|
|
|
+ };
|
|
|
+
|
|
|
+ ws.onopen = function(){
|
|
|
+ sendButton.disabled = false;
|
|
|
+ connectButton.disabled = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ ws.onclose = function(){
|
|
|
+ sendButton.disabled = true;
|
|
|
+ connectButton.disabled = false;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|