<!DOCTYPE html>
<meta charset="utf-8" />
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <script language="javascript" type="text/javascript">
     $(function() {
       var conn = null;
       var name = "UNKNOWN";
       function log(msg) {
         var control = $('#log');
         control.html(control.html() + msg + '<br/>');
         control.scrollTop(control.scrollTop() + 1000);
       }
       function connect() {
         disconnect();
         var wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host;
         conn = new WebSocket(wsUri);
         log('Connecting...');
         conn.onopen = function() {
           log('Connected.');
           update_ui();
         };
         conn.onmessage = function(e) {
           var data = JSON.parse(e.data);
           switch (data.action) {
             case  'connect':
               name = data.name;
               log('Connected as ' + name);
               update_ui();
               break;
             case  'disconnect':
               name = data.name;
               log('Disconnected ' + name);
               update_ui();
               break;
             case 'join':
               log('Joined ' + data.name);
               break;
             case 'sent':
               log(data.name + ': ' + data.text);
               break;
           }
         };
         conn.onclose = function() {
           log('Disconnected.');
           conn = null;
           update_ui();
         };
       }
       function disconnect() {
         if (conn != null) {
           log('Disconnecting...');
           conn.close();
           conn = null;
           name = 'UNKNOWN';
           update_ui();
         }
       }
       function update_ui() {
         if (conn == null) {
           $('#status').text('disconnected');
           $('#connect').html('Connect');
         } else {
           $('#status').text('connected (' + conn.protocol + ')');
           $('#connect').html('Disconnect');
         }
         $('#name').text(name);
       }
       $('#connect').on('click', function() {
         if (conn == null) {
           connect();
         } else {
           disconnect();
         }
         update_ui();
         return false;
       });
       $('#send').on('click', function() {
         var text = $('#text').val();
         log('Sending: ' + text);
         conn.send(text);
         $('#text').val('').focus();
         return false;
       });
       $('#text').on('keyup', function(e) {
         if (e.keyCode === 13) {
           $('#send').click();
           return false;
         }
       });
     });
    </script>
  </head>
  <body>
    <h3>Chat!</h3>
    <div>
      <button id="connect">Connect</button>&nbsp;|&nbsp;Status:
      <span id="name">UNKNOWN</span>
      <span id="status">disconnected</span>
    </div>
    <div id="log"
         style="width:20em;height:15em;overflow:auto;border:1px solid black">
    </div>
    <form id="chatform" onsubmit="return false;">
      <input id="text" type="text" />
      <input id="send" type="button" value="Send" />
    </form>
  </body>
</html>
