Guest User

Untitled

a guest
Dec 18th, 2013
1,286
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!-- Created by Simon Lissack for idrsolutions.com -->
  3. <html>
  4.     <head>
  5.         <title>Messenger</title>
  6.         <meta charset="UTF-8">
  7.         <meta name="viewport" content="width=device-width">
  8.     </head>
  9.     <body>
  10.        
  11.         <div>
  12.             <input type="file" id="imageinput"/>
  13.             <button type="button" onclick="sendImage();" >Send</button>
  14.         </div>
  15.         <div>
  16.             <input type="text" id="messageinput"/>
  17.             <button type="button" onclick="sendText();" >Send</button>
  18.         </div>
  19.        
  20.         <div>
  21.             <button type="button" onclick="openSocket();" >Open</button>
  22.             <button type="button" onclick="closeSocket();" >Close</button>
  23.         </div>
  24.         <!-- Server responses get written here -->
  25.         <div id="messages"></div>
  26.        
  27.         <!-- Script to utilise the WebSocket -->
  28.         <script type="text/javascript">
  29.                        
  30.             var webSocket;
  31.             var messages = document.getElementById("messages");
  32.            
  33.            
  34.             function openSocket(){
  35.                 // Ensures only one connection is open at a time
  36.                 if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
  37.                     writeResponse("WebSocket is already opened.");
  38.                     return;
  39.                 }
  40.                 // Create a new instance of the websocket
  41.                 webSocket = new WebSocket("ws://localhost:8080/EchoChamber/echo");
  42.                  
  43.                 /**
  44.                  * Binds functions to the listeners for the websocket.
  45.                  */
  46.                 webSocket.onopen = function(event){
  47.                     if(event.data === undefined)
  48.                         return;
  49.  
  50.                     writeResponse(event.data);
  51.                 };
  52.  
  53.                 webSocket.onmessage = function(event){
  54.                     writeResponse(event.data);
  55.                 };
  56.  
  57.                 webSocket.onclose = function(event){
  58.                     messages.innerHTML += "<br/>" + "Connection closed";
  59.                 };
  60.             }
  61.            
  62.             /**
  63.              * Sends the value of the text input to the server
  64.              */
  65.             function sendImage(){
  66.                 var file = document.getElementById("imageinput").files[0];
  67.  
  68.                 var reader = new FileReader();
  69.                 // Builds a JSON object for the image and sends it
  70.                 reader.onloadend = function(){
  71.                     var json = JSON.stringify({
  72.                         "type":"image",
  73.                         "data":reader.result
  74.                     });
  75.                     webSocket.send(json);
  76.                 };
  77.                 // Make sure the file exists and is an image
  78.                 if(file && file.type.match("image")){
  79.                     reader.readAsDataURL(file);
  80.                 }
  81.             }
  82.            
  83.             function sendText(){
  84.                 var json = JSON.stringify({
  85.                     "type":"text",
  86.                     "data":document.getElementById("messageinput").value
  87.                 });
  88.                 webSocket.send(json);
  89.             }
  90.            
  91.             function closeSocket(){
  92.                 webSocket.close();
  93.             }
  94.  
  95.             function writeResponse(json){
  96.                
  97.                 var response = JSON.parse(json);
  98.                 var output;
  99.                
  100.                 // Determine the type of message recieved and handle accordingly
  101.                 switch (response.type){
  102.                     case "image":
  103.                         output = "<img src=\'" + response.data + "\'/>";
  104.                         break;
  105.                     case "text":
  106.                         output = response.data;
  107.                         break;
  108.                 }
  109.        
  110.                 messages.innerHTML += "<br/>"
  111.                         + output;
  112.             }
  113.            
  114.         </script>
  115.        
  116.     </body>
  117. </html>
RAW Paste Data