基于 jQuery 和 Java 的简易聊天室
参考资料:
《锋利的jQuery》 作者:
单东林 张晓菲 魏然 出版社: 人民邮电出版社
页面外观如图:
代码如下:
1、HTML 和 jQuery
页面外观如图:
代码如下:
1、HTML 和 jQuery
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
updateMsg(); //更细信息
//表单 submit 事件
$("#chatForm").submit(function() {
$(".red").remove(); //清空错误提示信息
if ($("#author").val() == "") {
$("#author").after("<span class='red'>姓名不能为空喔</span>");
if ($("#msg").val() == "") {
$("#msg").after("<span class='red'>内容也不能为空喔</span>");
}
return false;
}
if ($("#msg").val() == "") {
$("#msg").after("<span class='red'>内容不能为空喔</span>");
return false;
}
//ajax 提交表单
$.post("./ChatServlet", {
message: $("#msg").val(),
username: $("#author").val(),
add: true
}, function(xml) {
$("#msg").val(""); //消息发送成功后清空内容框
addMsg(xml); //处理 xml
});
return false; //阻止表单提交
});
});
//解析 xml
function addMsg(xml) {
$("#msgWindow").html(""); //清空消息框
$("message", xml).each(function() {
//遍历 <message> 元素,组装 HTML 后插入消息框
var author = $("author", this).text();
var timestamp = $("timestamp", this).text();
var content = $("text", this).text();
var html = "<strong>" + author + "</strong> " + timestamp + "<br />" + content + "<br />";
$("#msgWindow").append(html);
});
}
//更新消息
function updateMsg() {
$.post("./ChatServlet", {add: false}, function(xml) {
addMsg(xml); //解析返回的 xml
});
setTimeout("updateMsg()", 1000); //每秒更新一次
}
</script>
<!-- CSS -->
<style type="text/css">
#msgWindow {
border: 1px solid;
height: 550px;
width: 900px;
}
.red {color: #ff0000;}
strong {color: #0000ff;}
</style>
</head>
<!-- HTML -->
<body>
<div id="wrapper">
<p id="msgWindow"></p>
<form action="./ChatServlet" id="chatForm">
姓名:<input type="text" id="author" size="50" /><br />
内容:<input type="text" id="msg" size="50" /><br />
<input type="submit" value="发送" />
</form>
</div>
</body>
</html>
2、Java 代码(其中 Message 类包含两个 String 类型和一个 Date 类型的字段,以及两个构造方法,代码就不贴了)
package com.aimartt.chat;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.ArrayDeque;
import java.util.Date;
import java.util.Queue;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ChatServlet extends HttpServlet {
private static final long serialVersionUID = -1026908190234548946L;
/** 日期格式化对象 */
private static SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
/** 消息队列 */
private static Queue<Message> MESSAGES = new ArrayDeque<Message>();
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
boolean add = Boolean.valueOf(request.getParameter("add"));
if (add) {
String author = request.getParameter("username");
String msg = request.getParameter("message");
Date timestamp = new Date();
MESSAGES.add(new Message(author, msg, timestamp));
if (MESSAGES.size() >= 13) {
MESSAGES.poll(); //当消息超过 12 条时,移除最早的消息
}
}
//构建 xml DOM
StringBuffer xml = new StringBuffer(1 << 10);
xml.append("<respose>");
for (Message message : MESSAGES) {
xml.append("<message>");
xml.append("<author>" + message.getAuthor() + "</author>");
xml.append("<timestamp>" + DATE_FORMAT.format(message.getTimestamp()) + "</timestamp>");
xml.append("<text>" + message.getContent() + "</text>");
xml.append("</message>");
}
xml.append("</respose>");
response.setContentType("text/xml; charset=UTF-8"); //设置返回类型为 xml
PrintWriter writer = response.getWriter();
writer.print(xml.toString());
}
}
3、web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>ChatServlet</servlet-name>
<servlet-class>com.aimartt.chat.ChatServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ChatServlet</servlet-name>
<url-pattern>/ChatServlet</url-pattern>
</servlet-mapping>
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>