DWR群聊实现-第二节

前端之家收集整理的这篇文章主要介绍了DWR群聊实现-第二节前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这里的实现demo来自DWR的官方实例中,我这边主要对其中用到的一些API进行注释。便于后期的学习。

1.实现原理简单剖析

1.web项目中都是通过uri地址作为唯一指定具体页面的途径

譬如说uri:/dwr/chat/java-chat.html 或者/dwr/xxx.do

2.为此dwr可以通过uri获取所有在任何浏览器中打开uri的页面session

这些所有的session表示为一个集合

3.有了这个集合,我们便可以对所有用户所在当前页面进行群发操作。当然这里结合Util类来

执行服务端和客户端的一些js操作。
常用:
1、直接填充内容
2、调用js函数

这样下面的例子看起来应该简单多了。

2.实现流程:

1.聊天实现类:

  1. public class JavaChat
  2. {
  3. /**
  4. * @param text The new message text to add
  5. */
  6. public void addMessage(String text)
  7. {
  8. // Make sure we have a list of the list 10 messages
  9. if (text != null && text.trim().length() > 0)
  10. {
  11. messages.addFirst(new Message(text));
  12. while (messages.size() > 10)
  13. {
  14. messages.removeLast();
  15. }
  16. }
  17.  
  18. WebContext wctx = WebContextFactory.get();
  19. String currentPage = wctx.getCurrentPage();
  20.  
  21. // Clear the input Box in the browser that kicked off this page only
  22. Util utilThis = new Util(wctx.getScriptSession());
  23. utilThis.setValue("text","");
  24.  
  25. // For all the browsers on the current page:
  26. Collection sessions = wctx.getScriptSessionsByPage(currentPage);
  27. Util utilAll = new Util(sessions);
  28.  
  29. // Clear the list and add in the new set of messages
  30. utilAll.removeAllOptions("chatlog");
  31. utilAll.addOptions("chatlog",messages,"text");
  32. }
  33.  
  34. /**
  35. * The current set of messages
  36. */
  37. private LinkedList messages = new LinkedList();
  38.  
  39. /**
  40. * The log stream
  41. */
  42. protected static final Logger log = Logger.getLogger(JavaChat.class);
  43. }

2.聊天辅助bean实体:

  1. public class Message
  2. {
  3. /**
  4. * @param newtext the new message text
  5. */
  6. public Message(String newtext)
  7. {
  8. text = newtext;
  9.  
  10. if (text.length() > 256)
  11. {
  12. text = text.substring(0,256);
  13. }
  14. }
  15.  
  16. /**
  17. * @return the message id
  18. */
  19. public long getId()
  20. {
  21. return id;
  22. }
  23.  
  24. /**
  25. * @return the message itself
  26. */
  27. public String getText()
  28. {
  29. return text;
  30. }
  31.  
  32. /**
  33. * When the message was created
  34. */
  35. private long id = System.currentTimeMillis();
  36.  
  37. /**
  38. * The text of the message
  39. */
  40. private String text;
  41. }

3.dwr配置

  1. <dwr>
  2.  
  3. <allow>
  4.  
  5. <!-- chat -->
  6. <create creator="new" javascript="JavascriptChat" scope="application">
  7. <param name="class" value="org.getahead.dwrdemo.chat.JavascriptChat"/>
  8. </create>
  9. <create creator="new" javascript="JavaChat" scope="application">
  10. <param name="class" value="org.getahead.dwrdemo.chat.JavaChat"/>
  11. </create>
  12. <convert converter="bean" match="org.getahead.dwrdemo.chat.Message"/>
  13.  
  14. </allow>
  15.  
  16. </dwr>

4.页面调用

  1. <head>
  2. <Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  3. <title>DWR Thin Chat Version 2.0</title>
  4. <script type='text/javascript' src='../dwr/engine.js'> </script>
  5. <script type='text/javascript' src='../dwr/interface/JavaChat.js'> </script>
  6. <script type='text/javascript' src='../dwr/util.js'> </script>
  7. <script type="text/javascript">
  8. function sendMessage() {
  9. JavaChat.addMessage(dwr.util.getValue("text"));
  10. }
  11. </script>
  12. <link rel="stylesheet" type="text/css" href="../generic.css" />
  13. </head>
  14.  
  15. <body onload="dwr.engine.setActiveReverseAjax(true);">
  16.  
  17. <h1>Java Chat</h1>
  18.  
  19. <p>This is a very simple chat demo that uses reverse ajax to collect messages
  20. and server-side browser manipulation to update the pages with the results.</p>
  21.  
  22. <p>
  23. Your Message:
  24. <input id="text" onkeypress="dwr.util.onReturn(event,sendMessage)"/>
  25. <input type="button" value="Send" onclick="sendMessage()"/>
  26. </p>
  27. <hr/>
  28.  
  29. <ul id="chatlog" style="list-style-type:none;">
  30. </ul>
  31.  
  32. </body>

猜你在找的Ajax相关文章