n4u
/
cowboy


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Websocket client</title>
    <script src="/static/jquery.min.js"></script>
    <script type="text/javascript">
      
      var websocket;
      $(document).ready(init);
      
      function init() {
          if(!("WebSocket" in window)){  
              $('#status').append('<p><span style="color: red;">websockets are not supported </span></p>');
              $("#navigation").hide();  
          } else {
              $('#status').append('<p><span style="color: green;">websockets are supported </span></p>');
              connect();
          };
              $("#connected").hide(); 	
              $("#content").hide(); 	
      };

      function connect()
      {
          wsHost = $("#server").val()
          websocket = new WebSocket(wsHost);
          showScreen('<b>Connecting to: ' +  wsHost + '</b>'); 
          websocket.onopen = function(evt) { onOpen(evt) }; 
          websocket.onclose = function(evt) { onClose(evt) }; 
          websocket.onmessage = function(evt) { onMessage(evt) }; 
          websocket.onerror = function(evt) { onError(evt) }; 
      };  
      
      function disconnect() {
          websocket.close();
      }; 

      function toggle_connection(){
          if(websocket.readyState == websocket.OPEN){
              disconnect();
          } else {
              connect();
          };
      };

      function sendTxt() {
          if(websocket.readyState == websocket.OPEN){
              txt = $("#send_txt").val();
              websocket.send(txt);
              showScreen('sending: ' + txt); 
          } else {
               showScreen('websocket is not connected'); 
          };
      };

      function onOpen(evt) { 
          showScreen('<span style="color: green;">CONNECTED </span>'); 
          $("#connected").fadeIn('slow');
          $("#content").fadeIn('slow');
      };  

      function onClose(evt) { 
          showScreen('<span style="color: red;">DISCONNECTED </span>');
      };  

      function onMessage(evt) { 
          showScreen('<span style="color: blue;">RESPONSE: ' + evt.data+ '</span>'); 
      };  

      function showScreen(txt) { 
          $('#output').prepend('<p>' + txt + '</p>');
      };

      function clearScreen() 
      { 
          $('#output').html("");
      };
    </script>
  </head>

  <body>
    <div id="header">
      <h1>Websocket client</h1>
      <div id="status"></div>
    </div>


    <div id="navigation">

      <p id="connecting">
	<input type='text' id="server" value="ws://localhost:8080/websocket"></input>
	<button type="button" onclick="toggle_connection()">connection</button>
      </p>
      <div id="connected">				
	<p>
	  <input type='text' id="send_txt" value=></input>
	  <button type="button" onclick="sendTxt();">send</button>
	</p>
      </div>

      <div id="content">						
	<button id="clear" onclick="clearScreen()" >Clear text</button>
	<div id="output"></div>
      </div>

    </div>
  </body>
</html>