Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.     <head>
  5.         <title>Echo Chamber</title>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport" content="width=device-width">
  8.     </head>
  9.     <body>
  10.        
  11.         <div>
  12.             <input type="text" id="messageinput"/>
  13.         </div>
  14.         <div>
  15.             <button type="button" onclick="openSocket();" >Open</button>
  16.             <button type="button" onclick="send();" >Send</button>
  17.             <button type="button" onclick="closeSocket();" >Close</button>
  18.         </div>
  19.         <!-- Server responses get written here -->
  20.         <div id="messages"></div>
  21.        
  22.         <!-- Script to utilise the WebSocket -->
  23.         <script type="text/javascript">
  24.                        
  25.             var webSocket;
  26.             var messages = document.getElementById("messages");
  27.            
  28.            
  29.             function openSocket(){
  30.                 // Ensures only one connection is open at a time
  31.                 if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
  32.                    writeResponse("WebSocket is already opened.");
  33.                     return;
  34.                 }
  35.                 // Create a new instance of the websocket
  36.                 webSocket = new WebSocket("ws://localhost:8080/EchoChamber/echo");
  37.                  
  38.                 /**
  39.                  * Binds functions to the listeners for the websocket.
  40.                  */
  41.                 webSocket.onopen = function(event){
  42.                     // For reasons I can't determine, onopen gets called twice
  43.                     // and the first time event.data is undefined.
  44.                     // Leave a comment if you know the answer.
  45.                     if(event.data === undefined)
  46.                         return;
  47.  
  48.                     writeResponse(event.data);
  49.                 };
  50.  
  51.                 webSocket.onmessage = function(event){
  52.                     writeResponse(event.data);
  53.                 };
  54.  
  55.                 webSocket.onclose = function(event){
  56.                     writeResponse("Connection closed");
  57.                 };
  58.             }
  59.            
  60.             /**
  61.              * Sends the value of the text input to the server
  62.              */
  63.             function send(){
  64.                 var text = document.getElementById("messageinput").value;
  65.                 webSocket.send(text);
  66.             }
  67.            
  68.             function closeSocket(){
  69.                 webSocket.close();
  70.             }
  71.  
  72.             function writeResponse(text){
  73.                 messages.innerHTML += "<br/>" + text;
  74.             }
  75.            
  76.         </script>
  77.        
  78.     </body>
  79. </html>