DWR Server Push(服务器推技术) 实现即时聊天功能(WEB)`

原文 http://yourgame.iteye.com/blog/199079

当你有QQ消息时,QQ的小图标会晃动,我们甚至还可以设定QQ有消息时,自动弹出来!
这些在C/S模式下很容易实现!如果要在B/S模式如何来实现呢?
我们的肯定会想到在客服端调用ajax在后台不断的查询服务器.看是否有关于自己的消息.如果有则查询返回.这种做法肯定会大量的占用系统的资源!不可取!
现在DWR的反转AJAX功能.允许我们从服务器端来控制客服端.而不需要客户端来请求.服务器可以自动把消息发给指定的客户端!
[img]http://yourgame.iteye.com/upload/picture/pic/16013/4ca7a7b8-4281-3260-a568-235b61d511dd.gif [/img]

我不能把公司的代码贴出来,所以我自己写了一个DEMO,已经实现了对指定用户发送消息的功能,并且即时显示在指定的用户界面上面.当然你可以修改这些,让它弹出来显示,或者像QQ一样在你页面的某个角落让消息的图标闪动:)
下面我做一个简单的说明:

用户的JAVABEAN User.java

Java代码  

1. package com.lhq;  
2.   
3. /** 
4.  * 用户类 
5.  *  
6.  * @author 廖瀚卿 
7.  *  
8.  */  
9. public class User {  
10.   
11.     private String userid;  
12.   
13.     private String username;  
14.   
15.     public String getUserid() {  
16.         return userid;  
17.     }  
18.   
19.     public void setUserid(String userid) {  
20.         this.userid = userid;  
21.     }  
22.   
23.     public String getUsername() {  
24.         return username;  
25.     }  
26.   
27.     public void setUsername(String username) {  
28.         this.username = username;  
29.     }  
30.   
31.     public User(String userid, String username) {  
32.         super();  
33.         this.userid = userid;  
34.         this.username = username;  
35.     }  
36.   
37. }  

聊天处理类 ChatManager.java

Java代码  

1. package com.lhq;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Collection;  
5. import java.util.HashSet;  
6. import java.util.List;  
7.   
8. import javax.servlet.ServletContext;  
9. import javax.servlet.http.HttpServletRequest;  
10.   
11. import org.directwebremoting.ScriptSession;  
12. import org.directwebremoting.ServerContext;  
13. import org.directwebremoting.ServerContextFactory;  
14. import org.directwebremoting.WebContextFactory;  
15. import org.directwebremoting.proxy.dwr.Util;  
16.   
17. /** 
18.  * 处理聊天相关 
19.  *  
20.  * @author 廖瀚卿 
21.  *  
22.  */  
23. public class ChatManager {  
24.   
25.     /** 保存当前在线用户列表 */  
26.     public static List<User> users = new ArrayList<User>();  
27.   
28.     /** 
29.      * 更新在线用户列表 
30.      * @param username 待添加到列表的用户名 
31.      * @param flag 是添加用户到列表,还是只获得当前列表 
32.      * @param request 
33.      * @return 用户userid 
34.      */  
35.     public String updateUsersList(String username, boolean flag, HttpServletRequest request) {  
36.         User user = null;  
37.         if (flag) {   
38.             // 这里取会话(HttpSession)的id为用户id   
39.             user = new User(request.getSession().getId(), username);  
40.             //保存用户到列表  
41.             users.add(user);      
42.             //将用户id和页面脚本session绑定  
43.             this.setScriptSessionFlag(user.getUserid());  
44.         }  
45.         //获得DWR上下文  
46.         ServletContext sc = request.getSession().getServletContext();  
47.         ServerContext sctx = ServerContextFactory.get(sc);  
48.         //获得当前浏览 index.jsp 页面的所有脚本session  
49.         Collection sessions = sctx.getScriptSessionsByPage("/chat/index.jsp");  
50.         Util util = new Util(sessions);  
51.         //处理这些页面中的一些元素  
52.         util.removeAllOptions("users");  
53.         util.addOptions("users", users, "username");  
54.         util.removeAllOptions("receiver");  
55.         util.addOptions("receiver", users,"userid","username");  
56.         if(!flag){  
57.             return null;  
58.         }  
59.         return user.getUserid();  
60.     }  
61.   
62.     /** 
63.      * 将用户id和页面脚本session绑定 
64.      * @param userid 
65.      */  
66.     public void setScriptSessionFlag(String userid) {  
67.         WebContextFactory.get().getScriptSession().setAttribute("userid", userid);  
68.     }  
69.   
70.     /** 
71.      * 根据用户id获得指定用户的页面脚本session 
72.      * @param userid 
73.      * @param request 
74.      * @return 
75.      */  
76.     @SuppressWarnings("unchecked")  
77.     public ScriptSession getScriptSession(String userid, HttpServletRequest request) {  
78.         ScriptSession scriptSessions = null;  
79.         Collection<ScriptSession> sessions = new HashSet<ScriptSession>();  
80.         sessions.addAll(ServerContextFactory.get(request.getSession().getServletContext())  
81.                 .getScriptSessionsByPage("/chat/index.jsp"));  
82.         for (ScriptSession session : sessions) {  
83.             String xuserid = (String) session.getAttribute("userid");  
84.             if (xuserid != null && xuserid.equals(userid)) {  
85.                 scriptSessions = session;  
86.             }  
87.         }  
88.         return scriptSessions;  
89.     }  
90.       
91.     /** 
92.      * 发送消息 
93.      * @param sender 发送者 
94.      * @param receiverid 接收者id 
95.      * @param msg 消息内容 
96.      * @param request 
97.      */  
98.     public void send(String sender,String receiverid,String msg,HttpServletRequest request){  
99.         ScriptSession session = this.getScriptSession(receiverid, request);  
100.         Util util = new Util(session);  
101.         util.setStyle("showMessage", "display", "");  
102.         util.setValue("sender", sender);  
103.         util.setValue("msg", msg);  
104.     }  
105. }  

聊天主页面 index.jsp

Html代码  

1. <%@ page language="java" pageEncoding="GBK"%>  
2. <html>  
3.     <head>  
4.         <title>chat</title>  
5.         <meta http-equiv="pragma" content="no-cache">  
6.         <meta http-equiv="cache-control" content="no-cache">  
7.         <meta http-equiv="expires" content="0">  
8.         <script type='text/javascript' src='/chat/dwr/interface/ChatManager.js'></script>  
9.         <script type='text/javascript' src='/chat/dwr/engine.js'></script>  
10.         <script type='text/javascript' src='/chat/dwr/util.js'></script>  
11.         <script type="text/javascript" src="/chat/chat.js"></script>  
12.     </head>  
13.     <body>  
14.         <input type="hidden" name="userid" />  
15.         <br>  
16.         昵称:  
17.         <input type="text" name="username" />  
18.         <input type="button" value="注册" onclick="register(this);" />  
19.         <br />  
20.         <br />  
21.         我要对  
22.         <select name="receiver" id="receiver" disabled=true" >  
23.         </select>  
24.         说:  
25.         <input type="text" name="message" id="message" disabled="true" />  
26.         <input type="button" value="发送" id="send" name="send" disabled="true"  
27.             onclick="send();" />  
28.         <br />  
29.         <br />  
30.         在线用户列表:  
31.         <ul id="users">  
32.         </ul>  
33.   
34.         <div id="showMessage" style="display: none">  
35.             <span id="sender"></span>对你说:  
36.             <span id="msg"></span>  
37.         </div>  
38.     </body>  
39. </html>  

JAVASCRIPT 文件 chat.js

Js代码  

1. /** 
2.  * 注册帐号 
3.  */  
4. function register(button) {  
5.     if ($('username').value == "" || $('username').value.length <= 0) {  
6.         alert("请输入昵称");  
7.         return;  
8.     }  
9.   
10.     /* 下面是对一些按钮的禁用和激活操作 */  
11.     $('username').disabled = true;  
12.     button.disabled = true;  
13.     $('message').disabled = false;  
14.     $('send').disabled = false;  
15.     $('receiver').disabled = false;  
16.   
17.     /* 把我输入的用户名注册到服务器,并获得用户id(这里用session id 代替) */  
18.     ChatManager.updateUsersList($('username').value, true, function(data) {  
19.         if (data != null && data.length > 0) {  
20.             $('userid').value = data; // 注册成功,把userid放到当前页面  
21.         }  
22.     });  
23. }  
24.   
25. /** 
26.  * 页面初始化 
27.  */  
28. function init() {  
29.     dwr.engine.setActiveReverseAjax(true); // 激活反转 重要  
30.     ChatManager.updateUsersList(null, false); // 当你打开界面的时候,先获得在线用户列表.  
31. }  
32.   
33. /** 
34.  * 发送消息 
35.  */  
36. function send() {  
37.     var sender = dwr.util.getValue('username'); // 获得发送者名字  
38.     var receiver = dwr.util.getValue('receiver'); // 获得接受者id  
39.     var msg = dwr.util.getValue('message'); // 获得消息内容  
40.     ChatManager.send(sender, receiver, msg); // 发送消息  
41. }  
42.   
43. window.onload = init;//页面加载完毕后执行初始化方法init  

配置文件 web.xml

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   
5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
6.     <welcome-file-list>  
7.         <welcome-file>index.jsp</welcome-file>  
8.     </welcome-file-list>  
9.     <servlet>  
10.         <servlet-name>dwr-invoker</servlet-name>  
11.         <servlet-class>  
12.             org.directwebremoting.servlet.DwrServlet  
13.         </servlet-class>  
14.         <init-param>  
15.             <description>调试DWR,发布系统时应将其设为false</description>  
16.             <param-name>debug</param-name>  
17.             <param-value>true</param-value>  
18.         </init-param>  
19.         <init-param>  
20.             <description>使用服务器推技术(反转AJAX)</description>  
21.             <param-name>activeReverseAjaxEnabled</param-name>  
22.             <param-value>true</param-value>  
23.         </init-param>  
24.         <init-param>  
25.             <param-name>  
26.                 initApplicationScopeCreatorsAtStartup  
27.             </param-name>  
28.             <param-value>true</param-value>  
29.         </init-param>  
30.         <init-param>  
31.             <param-name>maxWaitAfterWrite</param-name>  
32.             <param-value>100</param-value>  
33.         </init-param>  
34.         <load-on-startup>4</load-on-startup>  
35.     </servlet>  
36.     <servlet-mapping>  
37.         <servlet-name>dwr-invoker</servlet-name>  
38.         <url-pattern>/dwr/*</url-pattern>  
39.     </servlet-mapping>  
40. </web-app>  

DWR配置文件 dwr.xml

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">  
3. <dwr>  
4.     <allow>  
5.         <convert converter="bean" match="com.lhq.User"/>  
6.         <create creator="new" javascript="ChatManager">  
7.              <param name="class" value="com.lhq.ChatManager"/>  
8.         </create>  
9.     </allow>  
10. </dwr>