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

jackxiang 2009-8-5 18:35 | |
当你有QQ消息时,QQ的小图标会晃动,我们甚至还可以设定QQ有消息时,自动弹出来!
这些在C/S模式下很容易实现!如果要在B/S模式如何来实现呢?
我们的肯定会想到在客服端调用ajax在后台不断的查询服务器.看是否有关于自己的消息.如果有则查询返回.这种做法肯定会大量的占用系统的资源!不可取!
现在DWR的反转AJAX功能.允许我们从服务器端来控制客服端.而不需要客户端来请求.服务器可以自动把消息发给指定的客户端! 点击在新窗口中浏览此图片
点击在新窗口中浏览此图片
我不能把公司的代码贴出来,所以我自己写了一个DEMO,已经实现了对指定用户发送消息的功能,并且即时显示在指定的用户界面上面.当然你可以修改这些,让它弹出来显示,或者像QQ一样在你页面的某个角落让消息的图标闪动:)
下面我做一个简单的说明:
用户的JAVABEAN User.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


   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

   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

   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

   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


   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>  

转载:
http://yourgame.javaeye.com/blog/199079

作者还提供了下载,得登陆:xdy108 001002!

作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:http://jackxiang.com/post/1897/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!

评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]