学习Jetty AJAX Chat实例

第一次接触Jetty感觉还不错，小而简单速度也较快。对于纯java开发的开源web服务器来说确实值得推荐。

今天在http://jetty.mortbay.org/上下载了Jetty 6版本，解压后无需安装就可以运行了（双击bin目录下的Jetty-Service.exe）。只得注意的是jettty也是使用的8080端口，所以机器上同时配置tomcat的朋友可以修改一下jetty的默认端口。（contrib目录就是jetty的配置文件的所在位置，打开jetty.xml找到<Set name="port"><SystemProperty name="jetty.port" default="8080"/></Set>修改成8090就可以了）

初次，使用jetty当然要看看jetty自带example。在webapps目录下有一个test文件夹，里面包含了几个request,session,cookies,jsp的例子。其中我比较感兴趣的应该是Jetty AJAX Chat这个小例子。简单的几个文件就完成了一个在线chat，适合移植到任意的web系统当中，所以纪录一下方便以后使用。

1.chat.html(主要的部分是chatroom的div,引用的时候直接把这段copy出来就好了)

< html >
< head >
     < title > Jetty chat </ title >
     < script  type ="text/javascript"  src ="../concat?/js/behaviour.js&/js/ajax.js&/chat/chat.js" ></ script >
     < link  rel ="stylesheet"  type ="text/css"  href ="chat.css" ></ link >
</ head >
< body  onunload ="room.leave()" >
< h1 > Jetty AJAX Chat </ h1 >
Three really important things about this chat room demo: < ul >
< li > It has really HORRID Styling.  Please feel free to donate a pretty css :-) </ li >
< li > It is written using js techniques provided by
< a  href ="http://bennolan.com/behaviour/" > Behaviour </ a >  and
< li > It uses Jetty6  < a  href ="/javadoc/org/mortbay/util/ajax/Continuation.html" > Continuations </ a > . No threads 
are used when waiting for async events (see below).
</ li >
</ ul >


< div  id ="chatroom" >
  < div  id ="chat" ></ div >< div  id ="members" ></ 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 >
      < input  id ="sendB"  class ="button"  type ="submit"  name ="join"  value ="Send" />
      < input  id ="leaveB"  class ="button"  type ="submit"  name ="join"  value ="Leave" />
    </ div >
   </ div >
  </ div >
</ body >
</ html >

chat.html引用了三个js（ajax.js和beheaviour.js是jetty自带的JS是ajax的实现部分）

• ajax.js
• behaviour.js
• chat.js（聊天功能的是要实现部分）

2.chat.js

function  $()  ... {
  return document.getElementById(arguments[0]);
}

function  $F()  ... {
  return document.getElementById(arguments[0]).value;
}

var  room  =  
... {
  _last: "",
  _username: null,
  
  join: function(name)
  ...{
    if (name == null || name.length==0 )
    ...{
      alert('Please enter a username!');
    }
    else
    ...{
       this._username=name;
       $('join').className='hidden';
       $('joined').className='';
       $('phrase').focus();
       Behaviour.apply();
       ajax.sendMessage('join', room._username);
    }
  },
  
  leave: function()
  ...{
       // switch the input form
       $('join').className='';
       $('joined').className='hidden';
       $('username').focus();
       Behaviour.apply();
       ajax.sendMessage('leave',room._username);
       room._username=null;
  },
  
  chat: function(text)
  ...{
    if (text != null && text.length>0 )
    ...{
        ajax.sendMessage('chat',text);
    }
  },
  
  _chat: function(message)
  ...{
     var divChat=document.getElementById("chat");
     var from=message.getAttribute('from');
     var special=message.getAttribute('alert');
     var text=message.childNodes[0].data;
     
     if ( special!='true' && from == room._last )
         from="...";
     else
     ...{
         room._last=from;
         from+=":";
     }
     
     var parentElement = divChat;
     if (special=='true')
     ...{
       var span = document.createElement("span");
       span.className="alert";
       divChat.appendChild(span);
       parentElement=span;
     }
     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");
     parentElement.appendChild(spanFrom);
     parentElement.appendChild(spanText);
     divChat.appendChild(lineBreak);
     divChat.scrollTop = divChat.scrollHeight - divChat.clientHeight;     
  },
   
  _members: function(message)
  ...{   
    try
    ...{
        var divMembers = document.getElementById("members");
        divMembers.innerHTML="";
        var spanMember = document.createElement("span");
        var ul = document.createElement("ul");
        spanMember.appendChild(ul);
        var x = message.getElementsByTagName("li");
        for (var i=0;i<x.length;i++)    //以列表形式循环输出div message的叶子节点
        ...{
          var li = document.createElement("li");
          li.innerHTML = x[i].firstChild.nodeValue;
          ul.appendChild(li);
        } 
        divMembers.appendChild(spanMember);
    }
    catch(e)
    ...{
        window.status="ERROR: members "+e.name + ": " + e.message;
        // alert("_members " + e);
    }
  }
} ;

ajax.addListener( ' chat ' ,room._chat);
ajax.addListener( ' members ' ,room._members);
ajax.addPollHandler(room._poll);

var  chatBehaviours  =  
... { 
  '#username' : function(element)
  ...{
    element.setAttribute("autocomplete","OFF"); 
    element.onkeyup = function(ev)
    ...{          
        var keyc=EvUtil.getKeyCode(ev);
        if (keyc==13 || keyc==10)
        ...{
          room.join($F('username'));
      return false;
    }
    return true;
    } 
  },
  
  '#joinB' : function(element)
  ...{
    element.onclick = function(event)
    ...{
      room.join($F('username'));
      return false;
    }
  },
  
  '#phrase' : function(element)
  ...{
    element.setAttribute("autocomplete","OFF");
    element.onkeyup = function(ev)
    ...{   
        var keyc=EvUtil.getKeyCode(ev);
        if (keyc==13 || keyc==10)
        ...{
          room.chat($F('phrase'));
          $('phrase').value='';
      return false;
    }
    return true;
    }
  },
  
  '#sendB' : function(element)
  ...{
    element.onclick = function(event)
    ...{
      room.chat($F('phrase'));
      $('phrase').value='';
      return false;
    }
  },
  
  '#leaveB' : function(element)
  ...{
    element.onclick = function()
    ...{
      room.leave();
      return false;
    }
  }
} ;

Behaviour.register(chatBehaviours); 

3.chat.css(在线聊天的样式控制)

div 
{...} { 
  border: 0px solid black; 
}

div#chatroom
{...} {
  width: 41em;
  background-color: #e0e0e0;
  border: 1px solid black; 
}

div#chat
{...} {
  float: left;
  width: 30em;
  height: 20ex;
  overflow: auto; 
  background-color: #f0f0f0;
  padding: 4px;
  border-right: 1px solid black; 
}

div#members
{...} {
  float: left;
  clear: right;
  width: 10em;
  border: 0px solid black; 
}

div#input
{...} {
  clear: both;
  padding: 4px;
  border-top: 1px solid black; 
}

input#phrase
{...} {
  width:28em;
  background-color: #e0f0f0;
}

input#username
{...} {
  width:14em;
  background-color: #e0f0f0;
}

div.hidden
{...} {
  display: none;
}

span.from
{...} {
  font-weight: bold;
}

span.alert
{...} {
  font-style: italic;
}

实现结果预览: