Subversion Repositories SE.SVN

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
12 7u83 1 
<!doctype html>
2 
<html>
3 
<head>
4 
  <title>Websockets With Mochiweb Demo</title>
5 
</head>
6 
<body>
7 
<h1>Mochiweb websocket demo</h1>
8 
 
9 
  <div id="connect">
10 
     <button id="btnConn">Connect</button>
11 
     &nbsp; State: <span id="connstate" style="font-weight:bold;"></span>
12 
  </div>
13 
    <br/><i>Protip: open your javascript error console, just in case..</i><br/>
14 
  <hr/>
15 
  <div id="connected">
16 
    <form id="sendForm">
17 
      <input id="phrase" type="text"/>
18 
      <input id="btnSend" class="button" type="submit" name="connect"
19 
         value="Send"/>
20 
    </form>
21 
  </div>
22 
  <hr/>
23 
  <div id="msgs"></div>
24 
 
25 
  <script type="text/javascript">
26 
    var ws;
27 
    if (!window.WebSocket) {
28 
      alert("WebSocket not supported by this browser");
29 
    }
30 
    function $(id) {
31 
      return document.getElementById(id);
32 
    }
33 
    function go() {
34 
        ws = new WebSocket("ws://" + location.host + "/");
35 
        ws.onopen = function () {
36 
          $('connstate').innerHTML = 'CONNECTED';
37 
        }
38 
        ws.onclose = function () {
39 
          $('connstate').innerHTML = 'CLOSED';
40 
        }
41 
        ws.onmessage = function (e) {
42 
          var p = document.createElement('pre');
43 
          p.appendChild(document.createTextNode(e.data));
44 
          $('msgs').appendChild(p);
45 
        }
46 
    }
47 
    $('sendForm').onsubmit = function (event) {
48 
      var p = $('phrase');
49 
      ws.send(p.value);
50 
      p.value='';
51 
      return false;
52 
    }
53 
    $('btnConn').onclick = function(event) {
54 
      go(); return false;
55 
    };
56 
  </script>
57 
  </body>
58 
</html>
59