`
yuolr
  • 浏览: 2448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

基于dwr的群聊和私聊系统

阅读更多

RT,简单的实现了群聊和私聊,暂时私聊做的是一对一的,一对多可以简单重写过滤类。

支持快捷键发送消息。私聊直接点击对应用户名称即可。

下面介绍几个重要的文件。

web.xml

...
<servlet>
		<servlet-name>dwrInvoker</servlet-name>
		<servlet-class>
			org.directwebremoting.servlet.DwrServlet
		</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<description>使用服务器推技术(反转AJAX)</description>
			<param-name>activeReverseAjaxEnabled</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>
				initApplicationScopeCreatorsAtStartup
			</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>maxWaitAfterWrite</param-name>
			<param-value>100</param-value>
		</init-param>
		<load-on-startup>4</load-on-startup>
		<init-param>
			<param-name>classes</param-name>
			<param-value>java.lang.Object</param-value>
		</init-param>

		<load-on-startup>10</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwrInvoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
	...

dwr.xml

...
<!-- AJAX技术具体实现 -->
	<allow>
		<!-- convert将bean的集合变成javascript中的对象数组-->
		<convert converter="bean" match="com.User"></convert>


		<!-- 业务处理类 -->
		<create creator="new" javascript="mydwr" scope="session">
			<param name="class" value="com.IndexAction" />
		</create>
	</allow>
...

 后台处理IndexAction.java

...
public User userLogin(String name, String id) {
		if (name == null || name.trim().length() == 0) {
			name = "匿名用户";
			id = String.valueOf(new Date().getTime());
		}
		User user = new User(name, id);
		list.add(user);
		show(user);
		WebContextFactory.get().getScriptSession().setAttribute("userId", id);
		return user;
	}
private void show(final User user) {
		try {
			String page = ServerContextFactory.get().getContextPath()
					+ "/indexs.jsp";

			Browser.withPage(page, new Runnable() {
				public void run() {
					System.out.println("开始添加用户 ");
					// ScriptSessions.addFunctionCall("tsess","abddd");
					ScriptSessions.addFunctionCall("showNew", user.getName(),
							user.getId());
					System.out.println("添加用户END ");
				}
			});
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

public void sendMsg(final String sender, final String msg) {
		try {
			System.out.println(sender + msg);
			String page = ServerContextFactory.get().getContextPath()
					+ "/indexs.jsp";
			Browser.withPage(page, new Runnable() {
				public void run() {
					ScriptSessions.addFunctionCall("handMsg_show", sender, msg);
				}
			});
		} catch (Exception e) {
			e.printStackTrace();
			Thread.currentThread().interrupt();
		}
	}

	public void sendMsg_Private(final String userId, final String sender,
			final String msg) {
		try {
			System.out.println("private " + userId);
			String page = ServerContextFactory.get().getContextPath()
					+ "/indexs.jsp";
			Browser.withPageFiltered(page, new MyScriptSessionFilter(userId),
					new Runnable() {
						public void run() {
							System.out.println("haha");
							ScriptSessions.addFunctionCall(
									"handMsg_show_private", sender,
									getUserName(userId), msg);
						}
					});
		} catch (Exception e) {
			e.printStackTrace();
			Thread.currentThread().interrupt();
		}
	}
...

 

User是一个简单的java对象,只有id和name俩字符串型属性。

 

过滤类MyScriptSessionFilter.java实现ScriptSessionFilter接口即可

...
public boolean match(ScriptSession session) {
		if (userId == null || userId.trim().length() == 0)
			return true;
		String _userId = (String) session.getAttribute("userId");
		if (!userId.equalsIgnoreCase(_userId))
			return false;
		return true;
	}
...

展示页面就直接拷贝出来了

<html>
	<head>
		<base href="<%=basePath%>">

		<title>DWR DEMO</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	</head>
	<script type='text/javascript' src='./dwr/util.js'></script>
	<script type='text/javascript' src='./dwr/engine.js'></script>
	<script type='text/javascript' src='./dwr/interface/mydwr.js'></script>


	<script type='text/javascript' src='./js/jquery/jquery.js'></script>
	<script type='text/javascript' src='./js/indexs.js'></script>

	<style type="text/css">
.senderc {
	font-size: 12px;
	font-weight: bold;
}

.msgc {
	color: blue;
	padding-left: 20;
}

.msg_userExitc {
	color: red;
	font-weight: bold;
	font-size: 14;
}
</style>
	<body>
		<table height="100%" width="100%" border="1">
			<tr>
				<td valign="top" width="30%">
					<b>用户信息</b>
					<br>
					NAME:
					<input type="text" id="userName" value="">
					<input type="button" onclick="javascript:editUser();" value="修改用户名">
					<br>
					ID:
					<label id="userId"></label>
					<br>
					<b>用户列表</b>
					<table width="100%">
						<tr>
							<td>
								<div id="userList"
									style="height: 700; overflow-y: scroll; border: 1px solid;">
								</div>
							</td>
						</tr>
					</table>
				</td>
				<td valign="top">
					<span style="color: blue;">群聊信息</span>
					<div id="showMsg_All"
						style="height: 300; overflow-y: scroll; border: 1px solid; border-bottom: 10px; background-color: #E4EC60;">

					</div>
					<span style="color: blue;">私聊信息</span>
					<div id="showMsg_Self"
						style="height: 200; border-bottom: 10px; background-color: #F7F9CE; overflow-y: scroll; border: 1px solid;">

					</div>
					<br>
					<div id="inputDiv">
						<textarea id="inputMsg" style="width: 100%; height: 150;" rows=""
							cols=""></textarea>
					</div>
					<br>
					<div align="right">
						<input type="checkbox" id="ctrl_enter" />
						<label for="ctrl_enter">
							Ctrl+Enter发送消息
						</label>
						<input type="checkbox" id="enter" />
						<label for="enter">
							Enter发送消息
						</label>
						<input type="button" id="send" onclick="javascript:sendMsg();"
							name="send" value="发送">
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>

 所有的js文件,也直接拷贝了

var showMsg_All;
var showMsg_Self;
$(document).ready(function() {
			showMsg_All = $("#showMsg_All");
			showMsg_Self = $("#showMsg_Self");

			dwr.engine.setActiveReverseAjax(true);
			mydwr.userLogin(bindUser);

			mydwr.getList(showUsers);

			$("#ctrl_enter").click(function() {
						if (this.checked) {
							$("#enter").attr("checked", false);
							$("#inputMsg").unbind("keydown", enter);

							$("#inputMsg").bind("keydown", ctrl_enter);
						} else {
							$("#inputMsg").unbind("keydown", ctrl_enter);
						}
					});
			$("#enter").click(function() {
						if (this.checked) {
							$("#ctrl_enter").attr("checked", false);
							$("#inputMsg").unbind("keydown", ctrl_enter);

							$("#inputMsg").bind("keydown", enter);
						} else {
							$("#inputMsg").unbind("keydown", enter);
						}
					});

		})

ctrl_enter = function(event) {
	if (event.ctrlKey && event.keyCode == 13) {
		sendMsg();
		event.returnValue = false;
		return false;
	}
}
enter = function(event) {
	if (event.keyCode == 13) {
		if (event.ctrlKey) {
			return true;
		} else {
			sendMsg();
			event.returnValue = false;
			return false;
		}
	}
}

showUsers = function(data) {
	if (data) {
		for (var i = 0; i < data.length; i++) {
			if (data[i].id == $("#userId").text()) {
				continue;
			}
			var user = "<div id='"
					+ data[i].id
					+ "' style='cursor:pointer;' onclick='javascript:sendMsg_Private(this.id);'>"
					+ data[i].id + "--" + data[i].name + "</div>";
			$("#userList").append(user);
		}
	}
}

showNew = function(name, id) {
	if ($("#" + id).val() == null) {
		var user = "<div id='"
				+ id
				+ "'style='cursor:pointer;' onclick='javascript:sendMsg_Private(this.id);'>"
				+ id + "--" + name + "</div>";
		$("#userList").append(user);
	}
}

bindUser = function(user) {
	$("#userName").val(user.name);
	$("#userId").text(user.id);
}

callEditUser = function(id, name) {
	// alert(id+name);
	$("#" + id).html(id + "--" + name);
}
editUser = function() {
	var name = $("#userName").val();
	var id = $("#userId").text();
	mydwr.editUser(id, name);
}

handMsg_show = function(sender, msg) {
	// showMsg_All.append(sender + "说:<br>");
	// showMsg_All.append(msg + "<br>");
	showMsg_All.append(handMsg_sender(sender));
	showMsg_All.append(handMsg_msg(msg));
}

handMsg_sender = function(sender, receiver) {
	if (receiver == null || receiver == '' || receiver == 'undefined')
		receiver = "大家";
	var sender = "<div class='senderc'>" + sender + " 对 " + receiver + " 说:"
			+ "</div>";
	return sender;
}
handMsg_msg = function(msg) {
	var msg = "<div class='msgc'>" + msg + "</div>";
	return msg;
}
handMsg_userExit = function(userId) {
	var user = $("#" + userId).text();
	var msg = "<div class='msg_userExitc'>" + user + " 用户退出</div>";
	return msg;
}

handMsg_show_private = function(sender, receiver, msg) {
	// showMsg_Self.append(sender + " 对 " + receiver + " 说:<br>");
	showMsg_Self.append(handMsg_sender(sender, receiver));
	// showMsg_Self.append(msg + "<br>");
	showMsg_Self.append(handMsg_msg(msg));
}

sendMsg = function() {
	var msg = $("#inputMsg").val();
	var sender = $("#userName").val();
	if (checkMsg_null(msg)) {
		mydwr.sendMsg(sender, msg);
		$("#inputMsg").val("");
	}
}
sendMsg_Private = function(receiver) {
	var msg = $("#inputMsg").val();
	var sender = $("#userName").val();
	if (checkMsg_null(msg)) {
		mydwr.sendMsg_Private(receiver, sender, msg);
		var _receiver = $("#" + receiver).text();
		handMsg_show_private(sender, _receiver, msg);
		$("#inputMsg").val("");
	}
}

window.onbeforeunload = function() {
	var warning = "您输入的数据可能不会被保存,确认退出?";
	return warning;
}

window.onunload = function() {
	mydwr.userExit($("#userId").text());
	var warning = "谢谢光临";
	alert(warning);
}
removeUser = function(userId) {
	showMsg_All.append(handMsg_userExit(userId));
	$("#" + userId).remove();
}

checkMsg_null = function(msg) {
	if (msg == null || msg == 'undefined' || $.trim(msg).length == 0) {
		alert("请不要发送空消息!");
		return false;
	}
	return true;
}

 OK,其实我也是初学者,文中可能有些实现不是最优的,请大家指教,共同学习。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1
1
分享到:
评论

相关推荐

    web聊天,私聊,群聊。dwr实现。无数据库

    综上所述,这个项目展示了一个基于DWR的实时聊天系统实现,它利用了J2EE的稳定性、DWR的双向通信能力、Servlet的请求处理功能以及JavaScript的客户端交互性,创建了一个无需数据库支持的高效聊天应用。用户可以进行...

    Dwr 推例子 反转 ajax dwr dwr推群聊 dwr聊天系统源码 聊天系统 广播系统

    总之,这个基于DWR的聊天系统实例展示了DWR在创建实时Web应用中的强大功能,包括反转Ajax、Push技术、数据流处理、加密和持久化等。通过学习这个项目,开发者可以进一步提升自己在构建高效、安全的Ajax应用方面的...

    基于DWR的webIM系统

    基于DWR的webIM系统,利用反向ajax(comet)技术和dwr框架实现了聊天室和点对点聊天的功能,项目运行起来后打开页面,输入用户名即可登录,登录后用户会显示在左侧用户框中,若想与用户私聊,在用户框中点击用户,在...

    基于DWR推送的web聊天系统

    【基于DWR推送的Web聊天系统】是一种利用Direct Web Remoting (DWR) 技术构建的实时交互式在线聊天应用。DWR是一款开源的Java库,它允许JavaScript在浏览器端与服务器端的Java对象进行直接通信,实现了AJAX(异步...

    基于dwr3实现的在线客服系统

    **基于DWR3实现的在线客服系统** DWR (Direct Web Remoting) 是一个开源的Java库,允许JavaScript和服务器端的Java代码进行实时交互,实现了浏览器与服务器之间的双向通信,使得Web应用能够具备类似桌面应用的用户...

    基于DWR框架的教学管理系统设计与实现.pdf

    "基于DWR框架的教学管理系统设计与实现" 本文主要介绍了基于DWR框架的教学管理系统的设计与实现。DWR框架是一种AJAX框架,可以实现Web应用程序的异步数据交换,减少服务器端的负载,提高用户体验。 首先,介绍了...

    基于DWR的实时web聊天系统

    **基于DWR的实时Web聊天系统** DWR(Direct Web Remoting)是一种JavaScript库,它允许Web应用程序在客户端和服务器之间进行实时通信,无需刷新页面。这个系统利用DWR的技术特性构建了一个实时的Web聊天应用,使...

    dwr群聊、单聊;技术解析、应用、扩展

    通过学习和实践"DWR群聊、单聊;技术解析、应用、扩展",你可以掌握如何利用DWR创建高性能、实时的Web交互功能。"web互聊技术.txt"可能包含了详细的代码示例和配置说明,帮助你深入理解DWR在聊天应用中的实际运用。...

    基于DWR框架的高校排课系统设计与实现.pdf

    基于DWR框架的高校排课系统设计与实现.pdf

    基于dwr的java推送消息慕课小项目

    **基于DWR的Java推送消息慕课小项目** 在IT行业中,实时通信是现代Web应用程序不可或缺的一部分,尤其是在构建互动性强、用户体验丰富的应用时。DWR(Direct Web Remoting)是一个开源框架,它允许JavaScript和Java...

    OA系统之DWROA系统之DWROA系统之DWROA系统之DWR

    OA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA...系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWROA系统之DWR

    基于dwr推送技术的聊天室

    **基于DWR推送技术的聊天室** DWR(Direct Web Remoting)是一种JavaScript到Java的反向Ajax库,它允许Web应用在浏览器和服务器之间进行实时通信,从而实现动态、交互性强的Web应用。DWR的核心功能在于提供了一种...

    DWR+Struts+spring+hibernate的订货系统

    DWR+Struts+spring+hibernate的订货系统,自己添加的dwr功能

    基于DWR的AJAX技术研究与实现.pdf

    本文主要研究了基于DWR的AJAX技术的实现机制和应用。DWR是一个基于Java的开源框架,允许将服务器端的对象上的方法直接暴露给AJAX请求,从而可以直接调用服务器上的Servlet并获取处理结果。DWR使用反射来生成...

    DWR在线即时聊天系统,实现了对指定用户发送消息,和即时显示功能

    1. **用户身份验证**:在发送私聊之前,系统需要验证用户身份,这可以通过DWR调用后端的认证服务来实现。 2. **消息发送**:用户通过JavaScript发送消息到服务器,这个过程是通过DWR的Ajax调用完成的。消息数据通常...

    Ajax_Dwr基于dwr组件使用的ajax效果

    **Ajax_Dwr基于DWR组件的Ajax效果** Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。DWR(Direct ...

    基于dwr框架的gmap应用源码实例

    本实例将展示如何结合DWR和GMap,创建一个动态的、交互式的地图应用。 【知识点详解】 1. **DWR框架** DWR允许开发者在浏览器中直接调用服务器上的Java方法,就像它们是本地JavaScript函数一样。这通过...

    dwr在线交流即时通讯系统

    这个小型的在线交流系统就是基于DWR构建的,利用了Ajax技术来提升用户体验,实现网页上的即时通讯功能。 1. **DWR框架详解** DWR的核心功能是提供了一种安全、高效的机制,使得JavaScript可以直接调用服务器端的...

    用户注册和登录是每个系统的必须存在的一部分,基于Dwr+Struts2+Spring+Hibernate写了一个用户登录注册系统

    用户注册和登录是每个系统的必须存在的一部分,基于Dwr+Struts2+Spring+Hibernate写了一个用户登录注册系统。  其中用Dwr去进行用户注册的用户是否存在的验证。  全部业务控制交由Spring去进行处理。事务处理也...

    基于DWR框架的Web推送技术实现

    在本项目"基于DWR框架的Web推送技术实现"中,我们将探讨如何利用DWR框架来构建一个实时的Web聊天程序。 首先,理解DWR框架的核心概念是至关重要的。DWR允许开发者在浏览器中直接调用服务器上的Java方法,就像它们是...

Global site tag (gtag.js) - Google Analytics