基于 Java 和 jQuery 的简易聊天室

最新推荐文章于 2021-02-26 06:51:32 发布

aimartt

最新推荐文章于 2021-02-26 06:51:32 发布

阅读量2.9k

点赞数 1

分类专栏： Java jQuery

本文链接：https://blog.csdn.net/aimartt/article/details/7895112

版权

jQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Java

6 篇文章 0 订阅

订阅专栏

基于 jQuery 和 Java 的简易聊天室

参考资料：

《锋利的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>

aimartt

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
基于 Java 和 jQuery 的简易聊天室

基于 jQuery 和 Java 的简易聊天室参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社页面外观如图：代码如下：1、HTML 和 jQuery<%String path = request.getContextPath();String basePath = request.getScheme
复制链接

扫一扫