基于ajax的聊天室

数据库采用mysql，字段为id(int),username(varchar),message(text),inserTime(datetime)

客户端JSP：

<script type="text/javascript">
     $(function(){
     $("#timestamp").val("");   //这里必须要把 timestamp 设为空，否则刷新页面后会还缓存着以前的值。

        run();
        var interval;
            function run() {
               interval = setInterval(chat, "10000");    //定时器，每10秒取服务器取一次
            }

            function chat() {   // 去服务器后台取得新的聊天记录
              
       $.ajax({ 
       type:"POST", //请求方式
       url:"chatAction.do", //请求路径
       cache: false,
       data:"timestamp="+$("#timestamp").val(),   
       dataType: "text",   //返回值类型
            success:function(xml){    
                $("#timestamp").val($("timestamp",xml).text());
                $(xml).find("chat").each(function(i){
                
            	   $("#chat").append($(this).children("username").text());
            	   $("#chat").append(":");
            	   $("#chat").append($(this).children("message").text());
            	   $("#chat").append("</br>");
            	})
            }
       });
            }
      
      
      $("[name=save]").click(function(){    // 保存聊天记录

       $.ajax({ 
       type:"POST", //请求方式
       url:"chatAction.do", //请求路径
       cache: false,   
       data:$("#form1").serialize(),//传参
       dataType: "text"   //返回值类型

       });
      
      })
      
      $("#closeChat").click(function(){   //  关闭定时器
      
          clearTimeout(interval);
      
      })
      	 
    });
    
   
   
</script>

 <body>
          聊天室
          <table border="1" height="300" width="500"><tr><td><span id="chat"></span></td></tr>
        
         </table>
         <br>

         
        <form id="form1" type="post" action="">
                                                姓 名:<input name="username" type="text">
                                                信 息:<input name="message"  type="text"> 
                  <input id="timestamp" name="timestamp" type="hidden" value=""/>                                                          
                  <input name="save" type="button" value="提交">
        </form>
        
        <input id="closeChat" type="button" value="关闭"/>
            
  </body>

后台服务器端JAVA：

SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		  
		  String username = req.getParameter("username");
		  String message = req.getParameter("message");
		  String timestamp = req.getParameter("timestamp");
		  System.out.println(username);
		  System.out.println(message);
		  System.out.println(timestamp);
		  
		  if(timestamp==null||timestamp.equals("")){   //表示是第一次进入聊天页面或者点刷新后，这时传来的timestamp会是空的，要查询在此前10秒的聊天记录
			  Date date = new Date();
			  date.setSeconds(date.getSeconds()-10);
			  timestamp = format.format(date);
		  }


		  if(username!=null&&!username.equals("")){
			  
			  Chat chat = new Chat();
			  chat.setUsername(username);
			  chat.setMessage(message);
			  chat.setInsertTime(format.parse(format.format(new Date())));
			  chatService.saveChatMessage(chat);
		  }
		  else{
			  
			  Date time = format.parse(timestamp);
			  List list = chatService.getChatMessage(timestamp);  // 得到聊天记录的list


			  time.setSeconds(time.getSeconds()+10);  // 把时间+10秒后传回给客户端
			  
			  res.setContentType("text/html;charset=UTF-8");  //必须有，否则会乱码
			  PrintWriter out = res.getWriter();
	          StringBuffer s = new StringBuffer();
	          s.append("<?xml version=\"1.0\" encoding=\"utf-8\" ?>");
	          s.append("<chatAll>");
	          s.append("<timestamp>"+format.format(time)+"</timestamp>");
	          
	          for(int i=0;i<list.size();i++){
	        	 Chat c = (Chat)list.get(i);
	             s.append("<chat><username>"+c.getUsername()+"</username><message>"+c.getMessage()+"</message></chat>");
	          
	          }
	          s.append("</chatAll>");
	          System.out.println(s);
			  out.print(s);
		  }
		  
        
		
		
		  return null;

基于ajax的聊天室

相关推荐