<!doctype html>
<html>
<head>
  <title>Websockets With Mochiweb Demo</title>
</head>
<body>
<h1>Mochiweb websocket demo</h1>

  <div id="connect">
     <button id="btnConn">Connect</button>
     &nbsp; State: <span id="connstate" style="font-weight:bold;"></span>
  </div>
    <br/><i>Protip: open your javascript error console, just in case..</i><br/>
  <hr/>
  <div id="connected">
    <form id="sendForm">
      <input id="phrase" type="text"/>
      <input id="btnSend" class="button" type="submit" name="connect"
         value="Send"/>
    </form>
  </div>
  <hr/>
  <div id="msgs"></div>

  <script type="text/javascript">
    var ws;
    if (!window.WebSocket) {
      alert("WebSocket not supported by this browser");
    }
    function $(id) {
      return document.getElementById(id);
    }
    function go() {
        ws = new WebSocket("ws://" + location.host + "/");
        ws.onopen = function () {
          $('connstate').innerHTML = 'CONNECTED';
        }
        ws.onclose = function () {
          $('connstate').innerHTML = 'CLOSED';
        }
        ws.onmessage = function (e) {
          var p = document.createElement('pre');
          p.appendChild(document.createTextNode(e.data));
          $('msgs').appendChild(p);
        }
    }
    $('sendForm').onsubmit = function (event) {
      var p = $('phrase');
      ws.send(p.value);
      p.value='';
      return false;
    }
    $('btnConn').onclick = function(event) {
      go(); return false;
    };
  </script>
  </body>
</html>