index.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>WebSocket echo</title>
  5. <link rel="stylesheet" href="/style.css">
  6. </head>
  7. <body>
  8. <form>
  9. <label for="multiline">History:</label><br>
  10. <textarea id="multiline" name="multiline" rows="15" cols="50" readonly></textarea><br>
  11. <label for="singleline">Send a message:</label><br>
  12. <input type="text" id="singleline" placeholder="write a message and press enter" name="singleline"><br>
  13. <input type="submit" id="sendButton" value="Send" disabled>
  14. <input type="button" id="connectButton" value="Connect" onclick="rebind()">
  15. </form>
  16. <script>
  17. rebind();
  18. var form = document.querySelector('form');
  19. var singleline = document.querySelector('#singleline');
  20. var multiline = document.querySelector('#multiline');
  21. var sendButton = document.querySelector('#sendButton');
  22. var connectButton = document.querySelector('#connectButton');
  23. singleline.focus();
  24. form.addEventListener('submit', function(event){
  25. event.preventDefault();
  26. ws.send(singleline.value);
  27. multiline.value += 'You: ' + singleline.value + '\n';
  28. singleline.value = '';
  29. });
  30. function rebind(){
  31. ws = new WebSocket('ws://localhost:8080/echo');
  32. ws.onmessage = function(event){
  33. multiline.value += 'Server: ' + event.data + '\n';
  34. };
  35. ws.onopen = function(){
  36. sendButton.disabled = false;
  37. connectButton.disabled = true;
  38. };
  39. ws.onclose = function(){
  40. sendButton.disabled = true;
  41. connectButton.disabled = false;
  42. };
  43. }
  44. </script>
  45. </body>
  46. </html>