DWR实现消息推送(基于单对单聊天)-第三节

前端之家收集整理的这篇文章主要介绍了DWR实现消息推送(基于单对单聊天)-第三节前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、实现原理剖析:

1.在群聊中,我们知道如何通过uri获得所有的session集合,但在单对单的聊天中并不需要获取全部,他只需要在彼此的session中进行聊天的管理/展示。

2.为此我们通过构造Map集合,通过单独唯一的key(用户名或者id编号,唯一即可),并同时将当前的session,put进去便可。当我们要指定发送对象时,我们便可获取

被发送对象的session,构建util。调用客户端编写好的js响应方法,产生相应的气泡提示了。

流程:Map构建-》发送消息给指定对象-》通过Map来get对象的session-》通过session构建utli-》util对客户端的js进行调用

ps:前提我们知道dwr中的远程调用Java类是单例模式下的。否则根本无法保存每一个session。

二、实现核心代码

1.远程调用类:

  1. public class MsgPushService {
  2. public static Map<String,Object> sessionManager = new HashMap<String,Object>();
  3.  
  4. /**
  5. * 添加客户端session ps:firfox有错误提示..-已解决,将跳转放置dwr的回调函数
  6. * 1.登录成功后进行调用
  7. * @param username
  8. */
  9. public String addScriptSession(String username,HttpServletRequest req) {
  10. if(!"".equals(username)&&username!=null){
  11. sessionManager.put(username,WebContextFactory.get().getScriptSession());
  12. }
  13. return "ok";
  14. }
  15.  
  16. public ScriptSession getScriptSession(String username) {
  17. return (ScriptSession) sessionManager.get(username);
  18. }
  19.  
  20. /**
  21. * 2.发送消息时进行调用
  22. * @param senderName
  23. * @param receiverName
  24. * @param title
  25. * @param content
  26. * @return
  27. */
  28. @SuppressWarnings("unchecked")
  29. public String pushMsg(String senderName,String receiverName,String title,String content,HttpServletRequest req) {
  30. ScriptSession receiver_session = this.getScriptSession(receiverName);
  31. Collection<ScriptSession> cols = new ArrayList<ScriptSession>();
  32. cols.add(receiver_session);
  33. Util util = new Util(cols);
  34. util.addFunctionCall("doReply","ok");
  35. return "ok";
  36. }
  37.  
  38. /**
  39. *
  40. * 这里暂时没有用到:给所有客户端页面添加脚本
  41. * @param function
  42. * @param msg
  43. * @param req
  44. * @return
  45. */
  46. @SuppressWarnings("unchecked")
  47. public String addFunctionCallOnAllScriptSession(final String function,final String msg,HttpServletRequest req) {
  48. ServletContext sc = req.getSession().getServletContext();
  49. ServerContext sctx = ServerContextFactory.get(sc);
  50. Collection<ScriptSession> sessions = sctx
  51. .getScriptSessionsByPage("/msgpush/jsp/msgPush.do");
  52. Util util = new Util(sessions);
  53. util.addFunctionCall(function,msg);
  54. return "ok";
  55. }
  56.  
  57. }

2.页面调用

  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2. pageEncoding="utf-8"%>
  3. <%@taglib uri="/struts-tags" prefix="s"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5. <html>
  6. <head>
  7. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <title>欢迎 ${sessionScope.user.username }</title>
  9.  
  10. <link rel="stylesheet" href="../js/poshytip-1.1/tip-darkgray/tip-darkgray.css" type="text/css" />
  11. <script type='text/javascript' src='../dwr/engine.js'> </script>
  12. <script type='text/javascript' src='../dwr/interface/MsgPushService.js'> </script>
  13. <script type='text/javascript' src='../dwr/util.js'> </script>
  14. <script type="text/javascript" src="../js/jquery.js"></script>
  15. <script type="text/javascript" src="../js/msgpush.js"></script>
  16. <script type="text/javascript" src="../js/poshytip-1.1/jquery.poshytip.js"></script>
  17.  
  18.  
  19.  
  20. </head>
  21. <body>
  22. <a id="notice" title="">消息通知中心</a>
  23. <a href="sessionMgmt.do?pageIndex=0" onclick="hide();" target="_blank">会话管理中心</a>
  24. <hr>
  25. 在线用户列表:
  26. <s:iterator value="#application.OnlineUsers" id="user">
  27. <span id="<s:property value='#user' />">
  28. <input type="radio" name="rusers" value="<s:property value='#user' />"/>
  29. <s:property value='#user' />
  30. </span>
  31. </s:iterator>
  32. <s:if test="#application.OnlineUsers.size==1">
  33. 暂没有可发送消息的对象
  34. </s:if>
  35. <hr>
  36. <form>
  37. <table>
  38. <tr>
  39. <td>消息内容:</td>
  40. <td>
  41. <input type="text" id="title"/>
  42. </td>
  43. </tr>
  44. <!--
  45. <tr>
  46. <td>内容</td>
  47. <td>
  48. <textarea rows="3" cols="20" id="content" ></textarea>
  49. </td>
  50. </tr>
  51. -->
  52. <tr>
  53. <td></td>
  54. <td>
  55. <input type="button" value="发送" onclick="javascript:pushMsg();"/>
  56. <input type="reset" value="清空"/>
  57. </td>
  58. </tr>
  59. </table>
  60. </form>
  61. <input type="hidden" value="${sessionScope.user.username }" id="username"/>
  62. </body>
  63. </html>


3.脚本处理

  1. $(function(){
  2. //在线用户列表中过滤本身
  3. var id="#"+$("#username").val();
  4. $(id).css("display","none");
  5. });
  6.  
  7. function pushMsg(){
  8. var title=$("#title").val();
  9. //var content=$("#content").val();
  10. var receiverName=$(":radio:checked").val();
  11. if (receiverName == undefined) {
  12. alert("请选择发送的对象");
  13. return;
  14. }
  15. if (title == "" || title.length <= 0) {
  16. alert("请输入主题");
  17. return;
  18. }
  19. /*
  20. if (content == "" || content.length <= 0) {
  21. alert("请输入内容");
  22. return;
  23. }
  24. */
  25. /*
  26. MsgPushService.send($("#username").val(),$(":radio:checked").val(),$("#title").val(),$("#content").val(),{
  27. //指定回调函数
  28. callback:getMsg,//指定超时时长
  29. timeout:1000,//指定错误处理函数
  30. errorHandler:function(message) { alert("错误提示: " + message); },//指定
  31. warningHandler:function(message) { alert("Oops: " + message); },textHtmlHandler: function(message) { alert("Oops: " + message); },exceptionHandler: function(message) { alert("Oops: " + message); },//指定发送请求的方式
  32. httpMethod:'POST',async:true,//指定发送请求之前的勾子函数
  33. preHook:function(){
  34. //alert('远程调用之前...')
  35. },//指定发送请求之后的勾子函数
  36. postHook:function(){
  37. //alert('远程调用之后...')
  38. }
  39. });
  40. */
  41. MsgPushService.pushMsg($("#username").val(),receiverName,title,"",function(msg){
  42. //alert(msg);
  43. });
  44. //MsgPushService.test();
  45. }
  46.  
  47. function getMsg(msg){
  48. //alert(msg);
  49. }
  50.  
  51. function doReply(msg){
  52. if('ok'==msg){
  53. $('#notice').poshytip({
  54. className: 'tip-darkgray',showOn:'none',//一直显示
  55. content:'你有新消息 <a href="sessionMgmt.do?pageIndex=0" onclick="hide();" target="_blank">查看留言</a>',alignTo:'target',//定位的相对目标
  56. alignX:'right',alignY:'center',offsetX:5
  57. });
  58. $('#notice').poshytip('show');
  59. }
  60. }
  61.  
  62. function hide(){
  63. $('#notice').poshytip('hide');
  64. }
  65.  
  66. /**
  67. * 页面初始化
  68. */
  69. function init() {
  70. dwr.engine.setActiveReverseAjax(true); // 激活反转 重要
  71. MsgPushService.addScriptSession($("#username").val(),function(msg){});
  72. }
  73.  
  74. window.onload = init;//页面加载完毕后执行初始化方法init
  75.  

效果图:

猜你在找的Ajax相关文章