当你有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!
这些在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应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:https://jackxiang.com/post/1897/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!
评论列表