ssh+ajax(jQuery)搭建简单的聊天室

聊天室外观：

数据库设计：

create table message(
  id int not null auto_increment,
  studentId varchar not null,//关联发表者
  msg text not null,//发表内容
  time date,//发表时间
  primary key(id)
);

服务器端处理用户提交信息以及返回：

如果有用户提交信息便插入数据，并保存10条记录，多出的删除，不断更新;从数据库中获取数据并用字符串形式返回结果。

1. 对应的model：

   public class Message {
   
   	private  Long id;
   	private  Date time;
   	private  String msg;
   	private Student student;
      //..get and set 方法省略
   }

   //对应的xml
   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE hibernate-mapping PUBLIC
           "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
           "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
   <hibernate-mapping package="com.ec.model">
   	<class name="Message">
   		<id name="id" type="long">
   			<generator class="native"></generator>
   		</id>
   		<property name="msg" type="text" column="msg"></property>
   		<property name="time" type="date" column="time"></property>
           <many-to-one name="student" column="studentId" class="Student"></many-to-one>
   	
   	</class>
   </hibernate-mapping>

2. dao层：

   //获取前几条旧的聊天记录，是按id排列的
    public List<Message> getFrontNum(int number) {
   
   
    List<Message> messages = (List<Message>) this.getHt().find("From Message m ").subList(0, number+1);
    return messages;
    }

3. sevice层：

   //并发问题，两个同时插入
   	public boolean checkNumAndDel() {
   		
   		int number = this.getAll().size();
   		if(number >= 10){
   			//获取超过9条的旧记录，删除超过的旧记录
               number = number - 10;
   			List<Message> ms = this.messageDao.getFrontNum(number);
   			for(int i=0;i< ms.size();i++)
   			{
   				this.delete(ms.get(i).getId());
   			}
   			
   		}
   		number = this.getAll().size();
   		return (number < 10);
   		
   	}

4. action层：

   //timestamp=0第一次获取聊天记录，不等于0，不断更新聊天内容

   public String saveUI()
   	{
   		if(this.timestamp == 0){
   			
   			List<Message> messages = this.messageService.getAll();
   			ActionContext.getContext().put("messages", messages);
   			return "saveUI";
   		}else{
   			List<Message> messages = this.messageService.getAll();
   			for(int i =0 ;i<messages.size();i++)
   			{
   			    String name = this.studentService.getById(messages.get(i).getId()).getName();
   				this.message= name+","+messages.get(i).getMsg()+","+messages.get(i).getTime()+"/";
   			}
   			return SUCCESS;
   		}
   
   		
   	}
   //保存聊天记录，插入数据之前判断是否超过10条记录，做相应的处理	
   	public String save() throws IOException
   	{
   	
   		Student student = (Student)ActionContext.getContext().getSession().get("student");
   		Message msg = new Message();
   		msg.setMsg(getModel().getMsg());
   		msg.setStudent(student);
   		msg.setTime(new Date());
   		if(student==null){
   			System.out.println("你还没登录！");
   		}else{
   			
   			if(this.messageService.checkNumAndDel())
   			{
   				this.messageService.add(msg);
   				this.message= student.getName()+","+msg.getMsg()+","+msg.getTime();//"逗号，/是在前端进行分割聊天记录"
   			
   			}
   		}
   		return SUCCESS;
   	}//struts.xml配置文件如下：
       <package name="ajax" extends="json-default">
   
             <action name="ajaxMessage_*" class="messageAction" method="{1}">
             	<result type="json">
             
             	</result>
             </action>
       </package>

客户端的处理

1. 提交聊天记录，然后服务器端保存数据，并返回聊天记录，呈现在页面上：HtMl代码：

   <form id="chatform">
           <div class="ItemBlock_Title1"><!-- 信息说明<DIV CLASS="ItemBlock_Title1">
           	<IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="../style/blue/images/item_point.gif" /> 信息内容 </DIV>  -->
           </div>
           
           <!-- 表单内容显示 -->
           <div class="ItemBlockBorder">
               <div class="ItemBlock">
                   <p id="messagewindow">
                     <s:iterator value="messages">
                       <s:if test="#messages.size()>0">
                         <strong>${student.name }</strong>:${msg }------${time }<br/>
                       </s:if>
                       <s:else>
                         <strong>最近没聊啥！你起个头吧！</strong>
                       </s:else>
                     </s:iterator>
                     <span id="loading">加载中...</span>
                   </p>
                   <table cellpadding="0" cellspacing="0" class="mainForm">
                       <tr>
                           <td>内容</td>
                           <td><textarea id="msg" name="content" class="TextareaStyle" style="width: 550px; height: 20px;"></textarea></td>
                       </tr>
                   </table>
               </div>
           </div>
           
           <!-- 表单操作 -->
           <div id="InputDetailBar">
   			<input type="IMAGE" src="../style/blue/images/button/send.png"/>
   			<a href="javascript:history.go(-1);"><img src="../style/images/goBack.png"/></a>
           </div>
       </form>
      <script type="text/javascript">
        $(function(){
            var timestamp = 0;
            updateMsg();
      	     $("#chatform").submit(function(){
      	  
   	            $.post("ajaxMessage_save.action",{
   	                    msg:$("#msg").val()
   	                },function(data){
   
   	                	$("#msg").val("");//清空信息文本框
   	                	addMessages(data);//调用解析xml的函数
   	                },"json");
   	            return false;//阻止表单提交
   	          });
   
      	       
            }   );
   
        function updateMsg(){
            timestamp = 1;
            $.post("ajaxMessage_saveUI.action",{timestamp:timestamp},function (data){
                $("#loading").remove();
                
            });
            setTimeout('updateMsg()',4000);
               
            }
           function addMessages(data){
   
                var data = eval(data);
                 var message = data["message"];
                 var htmlcode = "";
   //根据/分割Message
   ms = message.substring(0,message.length).split("/");
                 for(var i=0;i<ms.length;i++)
                 {
                      var m = ms[i].split(",");
                      htmlcode="<strong>"+m[0]+"</strong>:"+m[1]+"---"+m[2]+"<br/>";
                  }
                 $("#messagewindow").append(htmlcode);
               }
      </script>
   

2. 浏览器每隔一段时间更新数据（上面javascript的updateMsg函数）