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.聊天实现类:

public class JavaChat
{
    /**
     * @param text The new message text to add
     */
    public void addMessage(String text)
    {
        // Make sure we have a list of the list 10 messages
        if (text != null && text.trim().length() > 0)
        {
            messages.addFirst(new Message(text));
            while (messages.size() > 10)
            {
                messages.removeLast();
            }
        }

        WebContext wctx = WebContextFactory.get();
        String currentPage = wctx.getCurrentPage();

        // Clear the input Box in the browser that kicked off this page only
        Util utilThis = new Util(wctx.getScriptSession());
        utilThis.setValue("text","");

        // For all the browsers on the current page:
        Collection sessions = wctx.getScriptSessionsByPage(currentPage);
        Util utilAll = new Util(sessions);

        // Clear the list and add in the new set of messages
        utilAll.removeAllOptions("chatlog");
        utilAll.addOptions("chatlog",messages,"text");
    }

    /**
     * The current set of messages
     */
    private LinkedList messages = new LinkedList();

    /**
     * The log stream
     */
    protected static final Logger log = Logger.getLogger(JavaChat.class);
}

2.聊天辅助bean实体:

public class Message
{
    /**
     * @param newtext the new message text
     */
    public Message(String newtext)
    {
        text = newtext;

        if (text.length() > 256)
        {
            text = text.substring(0,256);
        }
    }

    /**
     * @return the message id
     */
    public long getId()
    {
        return id;
    }

    /**
     * @return the message itself
     */
    public String getText()
    {
        return text;
    }

    /**
     * When the message was created
     */
    private long id = System.currentTimeMillis();

    /**
     * The text of the message
     */
    private String text;
}

3.dwr配置

<dwr>

  <allow>

	 <!-- chat -->
    <create creator="new" javascript="JavascriptChat" scope="application">
      <param name="class" value="org.getahead.dwrdemo.chat.JavascriptChat"/>
    </create>
    <create creator="new" javascript="JavaChat" scope="application">
      <param name="class" value="org.getahead.dwrdemo.chat.JavaChat"/>
    </create>
    <convert converter="bean" match="org.getahead.dwrdemo.chat.Message"/>

  </allow>

</dwr>

4.页面调用

<head>
  <Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <title>DWR Thin Chat Version 2.0</title>
  <script type='text/javascript' src='../dwr/engine.js'> </script>
  <script type='text/javascript' src='../dwr/interface/JavaChat.js'> </script>
  <script type='text/javascript' src='../dwr/util.js'> </script>
  <script type="text/javascript">
    function sendMessage() {
      JavaChat.addMessage(dwr.util.getValue("text"));
    }
  </script>
  <link rel="stylesheet" type="text/css" href="../generic.css" />
</head>

<body onload="dwr.engine.setActiveReverseAjax(true);">

<h1>Java Chat</h1>

<p>This is a very simple chat demo that uses reverse ajax to collect messages
and server-side browser manipulation to update the pages with the results.</p>

<p>
  Your Message:
  <input id="text" onkeypress="dwr.util.onReturn(event,sendMessage)"/>
  <input type="button" value="Send" onclick="sendMessage()"/>
</p>
<hr/>

<ul id="chatlog" style="list-style-type:none;">
</ul>

</body>

猜你在找的Ajax相关文章