DWR反向Ajax的一个容易Web聊天 _Web前端

DWR反向Ajax的一个简单Web聊天

web.xml文件的配置

<?xml version="1.0" encoding="GBK"?>
<web-app 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" version="2.5">
	<!-- 配置DWR的核心Servlet -->
	<servlet>
		<!-- 指定DWR核心Servlet的名字 -->
		<servlet-name>dwr-invoker</servlet-name>
		<!-- 指定DWR核心Servlet的实现类 -->
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<!--  指定DWR核心Servlet处于调试状态 -->
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<!-- 设置启用反向Ajax技术 -->
		<init-param>
			<param-name>pollAndCometEnabled</param-name>
			<param-value>true</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<!-- 指定核心Servlet的URL映射 -->
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<!-- 指定核心Servlet映射的URL -->
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
</web-app>

?Java处理类

package com.lbx.dwr.chat;

import java.util.Collection;
import java.util.LinkedList;

import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;

public class JavaChat
{
	//保存聊天信息的List对象
	private LinkedList<ChatMsg> messages = new LinkedList<ChatMsg>();
	
	public void addMessage(String text)
	{
		if (text != null && text.trim().length() > 0)
		{
			messages.addFirst(new ChatMsg(text));
			//最多保留10条聊天记录
			while (messages.size() > 10)
			{
				messages.removeLast();
			}
		}
		WebContext wctx = WebContextFactory.get();
		//以当前WebContext关联的ScriptSession创建Util
		Util utilThis = new Util(wctx.getScriptSession());
		//使用utilThis清除text文本框的内容
		utilThis.setValue("text", "");
		//获取当前页面的url
		String currentPage = wctx.getCurrentPage();
		//获取正在浏览当前页的所有浏览器会话
		Collection sessions = wctx.getScriptSessionsByPage(currentPage);
		//以sessions创建Util对象
		Util utilAll = new Util(sessions);
		//删除chatlog列表里的所有列表项
		utilAll.removeAllOptions("chatlog");
		//使用messages集合里集合元素的text属性为chatlog添加列表项
		utilAll.addOptions("chatlog" , messages , "text");
	}
}

package com.lbx.dwr.chat;

public class ChatMsg
{
	//ChatMsg包装的字符串
	private String text;
	public ChatMsg()
	{
	}

	public ChatMsg(String text)
	{
		this.text = text;
	}
	//text属性的setter和gette方法
	public void setText(String text)
	{
		this.text = text;
	}
	public String getText()
	{
		return text;
	}
}

?dwr.xml文件的配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
	"http://getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
	<allow>
		<create creator="new" javascript="chat" scope="application">
			<param name="class" value="com.lbx.dwr.chat.JavaChat"/>
		</create>
		<convert converter="bean" match="com.lbx.dwr.chat.ChatMsg"/>
  </allow>
</dwr>

?客户端JSP代码

<%@ 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 XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>反向Ajax的聊天室</title>
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type='text/javascript' src='dwr/engine.js'></script>
		<script type='text/javascript' src='dwr/interface/chat.js'></script>
		<script type='text/javascript' src='dwr/util.js'></script>
		<script type="text/javascript">
		function sendMessage()
		{
			//调用远程Java方法，无需回调函数
			chat.addMessage(dwr.util.getValue("text"));
		}
		</script>
	</head>
	<!-- 本页面启用反向Ajax -->
	<body onload="dwr.engine.setActiveReverseAjax(true);">
		
		<h3>
			反向Ajax的聊天室
		</h3>
		<div style="width: 460px; height: 200px; border: 1px solid #999999">
			<ul id="chatlog"></ul>
		</div>
		<br />
		输入您的聊天信息:
		<input id="text" onkeypress="dwr.util.onReturn(event, sendMessage);"/>
		<input type="button" value="发送" onclick="sendMessage()" />
	</body>
</html>