aboutsummaryrefslogtreecommitdiffstats
path: root/examples/websocket/priv/html_ws_client.html
blob: 5bc7f1565d3dba5eeefa3f146026f4e8a9b117f1 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<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 onError(evt) {
          showScreen('<span style="color: red;">ERROR: ' + 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>