SHARE
TWEET

Untitled

a guest Jan 3rd, 2016 1,151 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5.     window.addEventListener("load", function() {
  6.         // create websocket instance
  7.         var mySocket = new WebSocket("ws://localhost:8080/ws");
  8.         // add event listener reacting when message is received
  9.         mySocket.onmessage = function (event) {
  10.             var output = document.getElementById("output");
  11.             // put text into our output div
  12.             output.textContent = event.data;
  13.         };
  14.         var form = document.getElementsByClassName("foo");
  15.         var input = document.getElementById("input");
  16.         form[0].addEventListener("submit", function (e) {
  17.             // on forms submission send input to our server
  18.             input_text = input.value;
  19.             mySocket.send(input_text);
  20.             e.preventDefault()
  21.         })
  22.     });
  23. </script>
  24. <style>
  25.     /* just some super ugly css to make things bit more readable*/
  26.     div {
  27.         margin: 10em;
  28.     }
  29.     form {
  30.         margin: 10em;
  31.     }
  32. </style>
  33. </head>
  34. <body>
  35.     <form class="foo">
  36.         <input id="input"></input>
  37.         <input type="submit"></input>
  38.     </form>
  39.     <div id="output"></div>
  40. </body>
  41. </html>
RAW Paste Data
Top