
<html><head>
    <title>WebSocket Chat</title>
    <script type='text/javascript'>

      if (!window.WebSocket && window.MozWebSocket)
    	  window.WebSocket=window.MozWebSocket;
      if (!window.WebSocket)
        alert("WebSocket not supported by this browser");
    
      function $() { return document.getElementById(arguments[0]); }
      function $F() { return document.getElementById(arguments[0]).value; }
      
      function getKeyCode(ev) { if (window.event) return window.event.keyCode; return ev.keyCode; } 
      
      var room = {
        join: function(name) {
          this._username=name;
          var location = document.location.toString().replace('http://','ws://').replace('https://','wss://');
          this._ws=new WebSocket(location,"echo-broadcast-ping");
          this._ws.onopen=this._onopen;
          this._ws.onmessage=this._onmessage;
          this._ws.onclose=this._onclose;
        },
        
        _onopen: function(){
          $('join').className='hidden';
          $('joined').className='';
          $('phrase').focus();
          room._send(room._username,'has joined!');
        },
        
        _send: function(user,message){
          user=user.replace(':','_');
          if (this._ws)
            this._ws.send(user+':'+message);
        },
      
        chat: function(text) {
          if (text != null && text.length>0 )
              room._send(room._username,text);
        },
        
        _onmessage: function(m) {
          if (m.data){
            var c=m.data.indexOf(':');
            var from=m.data.substring(0,c).replace('<','&lt;').replace('>','&gt;');
            var text=m.data.substring(c+1).replace('<','&lt;').replace('>','&gt;');
            
            var chat=$('chat');
            var spanFrom = document.createElement('span');
            spanFrom.className='from';
            spanFrom.innerHTML=from+':&nbsp;';
            var spanText = document.createElement('span');
            spanText.className='text';
            spanText.innerHTML=text;
            var lineBreak = document.createElement('br');
            chat.appendChild(spanFrom);
            chat.appendChild(spanText);
            chat.appendChild(lineBreak);
            chat.scrollTop = chat.scrollHeight - chat.clientHeight;   
          }
        },
        
        _onclose: function(m) {
          this._ws=null;
          $('join').className='';
          $('joined').className='hidden';
          $('username').focus();
          $('chat').innerHTML='';
        }
        
      };
      
    </script>
    <style type='text/css'>
    div { border: 0px solid black; }
    div#chat { clear: both; width: 40em; height: 20ex; overflow: auto; background-color: #f0f0f0; padding: 4px; border: 1px solid black; }
    div#input { clear: both; width: 40em; padding: 4px; background-color: #e0e0e0; border: 1px solid black; border-top: 0px }
    input#phrase { width:30em; background-color: #e0f0f0; }
    input#username { width:14em; background-color: #e0f0f0; }
    div.hidden { display: none; }
    span.from { font-weight: bold; }
    span.alert { font-style: italic; }
    </style>
</head><body>
<div id='chat'></div>
<div id='input'>
  <div id='join' >
    Username:&nbsp;<input id='username' type='text'/><input id='joinB' class='button' type='submit' name='join' value='Join'/>
  </div>
  <div id='joined' class='hidden'>
    Chat:&nbsp;<input id='phrase' type='text'/>
    <input id='sendB' class='button' type='submit' name='join' value='Send'/>
  </div>
</div>
<script type='text/javascript'>
$('username').setAttribute('autocomplete','OFF');
$('username').onkeyup = function(ev) { var keyc=getKeyCode(ev); if (keyc==13 || keyc==10) { room.join($F('username')); return false; } return true; } ;        
$('joinB').onclick = function(event) { room.join($F('username')); return false; };
$('phrase').setAttribute('autocomplete','OFF');
$('phrase').onkeyup = function(ev) {   var keyc=getKeyCode(ev); if (keyc==13 || keyc==10) { room.chat($F('phrase')); $('phrase').value=''; return false; } return true; };
$('sendB').onclick = function(event) { room.chat($F('phrase')); $('phrase').value=''; return false; };
</script>

<p>
This is a demonstration of the Jetty websocket server.
</p>
</body></html>