index.html

<html>
  <head>
    <title>WebSocket Client</title>
    <style type="text/css">
      html, body {
        font-family: sans-serif;
      }
      h1 {
        font-size: 18px;
      }
      #viewport {
        width: 440px;
        height: 200px;
        border: 1px solid #7F9DB9;
        overflow: auto;
      }
      #msg {
        width: 330px;
      }
    </style>
    <script type="text/javascript">
      var socket;

      function init()
      {
        try {
          var host = "ws://127.0.0.1:1222";
          socket   = new WebSocket(host);
          with (socket) {
            onopen    = function(msg)
                        {
                          echo('Connected!');
                        };
            onmessage = function(msg)
                        {
                          echo('Server said: ' + msg.data);
                        };
            onclose   = function(msg)
                        {
                          echo('Disconnected!');
                        };
          }
        }
        catch (e) {
          echo(e);
        }
        finally {
          $('msg').focus();
        }
      } // init

      function send()
      {
        try {
          var msg = $('msg').value;
          if (msg.length == 0) {
            throw "Message cannot be empty!";
          }
          $('msg').value = "";
          $('msg').focus();
          socket.send(msg);
        }
        catch (e) {
          echo(e);
        }
      } // send

      function quit()
      {
        echo('Goodbye!');
        socket.close();
        socket = null;
      } // quit

      function $(id)
      {
        return document.getElementById(id);
      } // $

      function echo(msg)
      {
        $('viewport').innerHTML += msg + "<br />";
      } // echo

      function onkey(e)
      {
        if (e.keyCode == 13) {
          send();
        }
      } // onkey
    </script>
  </head>
  <body onload="init()">
    <h1>WebSocket Client</h1>
    <div id="viewport"></div>
    <input id="msg" type="text" onkeypress="onkey(event)"/>
    <button onclick="send()">Send</button>
    <button onclick="quit()">Quit</button>
  </body>
</html>