一个成功运行的DWR推技术例子

panshunchang

浏览: 217063 次
性别:
来自: 上海

最近访客更多访客>>

xieye

wy879

yunyouzi

sunlightcs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

DWR Ajax Comet Servlet JavaScript

1、首先要下载dwr 3.0 地址 http://directwebremoting.org/dwr/download.html

2、在web.xml中加入dwr的servlet和相关配置

  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>pollAndCometEnabled</param-name>
      <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
      <servlet-name>dwr-invoker</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

pollAndCometEnabled是指dwr 的reverse ajax是使用polling 和comet的方式，在这个例子中可以明显地从页面上看出来是用的polling+comet
附：关于reverse-ajax的实现有3种方式
polling 就是隔一段时间向服务器发送一request来检查服务端是否有数据更新
comet 就是一个长http请求，在请求期间服务端可以向客户端push数据，但是这种做法要求server和brower长期建立一个通信通道，而且效率很低
piggyback 就是服务端的更新数据都在排队等待，等到下一次有请求过来，那么这些等待更新数据就伴随这次请求一起发送到brower
有关更详细的reverse-ajax技术介绍可以参考http://getahead.org/dwr/reverse-ajax

3、创建一个dwr.xml，用于配置你要制定的java代码映射类，以及允许使用的方法和converter
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
  <allow>
    <create creator="new" javascript="DWRHelper">
      <param name="class" value="com.cloverworxs.uma.helper.DWRHelper" />
      <include method="addMessage" />
    </create>
    <convert converter="bean" match="com.cloverworxs.uma.helper.Message">
      <param name="include" value="id,text" />
    </convert>
  </allow>
</dwr>
create是只一个java的js映射，其中include是可以在js使用的方法
convert 是指对应js到java，或者java到js的对象转换，其中include是可以转换的属性

4、写服务段的java代码
DWRHelper
package com.cloverworxs.uma.helper;

import java.util.Collection;
import java.util.LinkedList;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;
public class DWRHelper {

    public void addMessage(String text,String name) {
    String tempStr = name+"说："+text;
        LinkedList messages = new LinkedList();
        if (text != null && text.trim().length() > 0) {
            messages.addFirst(new Message(tempStr));
            //messages.addLast(new Message(text));
            while (messages.size() > 10) {
                messages.removeLast();
            }
        }
        // Reverse Ajax code to be added here shortly
        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");
    }
}

Message
package com.cloverworxs.uma.helper;

import org.directwebremoting.Security;
public class Message {
    public Message(String newtext) {
        text = newtext;
        if (text.length() > 256) {
            text = text.substring(0, 256);
        }
        text = Security.replaceXmlCharacters(text);
    }
    public long getId() {
        return id;
    }
    public String getText() {
        return text;
    }
    private long id = System.currentTimeMillis();
    private String text;
}

5、到此为止可以写页面代码了，下面的代码html或者jsp都可以
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<h1>Java Chat</h1>
<body onload="dwr.engine.setActiveReverseAjax(true);">
<script type='text/javascript' src='dwr/interface/DWRHelper.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<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 Name:<input id="username" type="text"/></p>
<p>Your Message: <input id="text" onkeypress="dwr.util.onReturn(event, sendMessage)" />
<input type="button" value="Send" onclick="sendMessage()" />
</p>
<script type="text/javascript">
    function sendMessage() {
      //alert(dwr.util.getValue("text"));
      DWRHelper.addMessage(dwr.util.getValue("text"),document.getElementById("username").value);
    }
</script>
<hr />
<ul id="chatlog" style="list-style-type:none;">
</ul>
</body>
</html>
页面代码简单吧，只有方法调用，没有任何获得返回数据，和对回传数据处理的代码
注意：<body onload="dwr.engine.setActiveReverseAjax(true);">
这个是要在使用reverse-ajax的页面必须的！

6.同时打开两个浏览器，都访问jsp页面，就可以互相聊天了。

现在可以启动应用体检一把reverse-ajax，希望你能和我有一样的惊奇感觉
当然，肯定有人会说这种功能用普通的ajax也可以实现啊，为什么要用reverse-ajax
这时候你就要考虑这种情况了，有用户A和用户B同时在发Message，A正在看message没有任何request动作，而B发了一条新message，这时要求这个信息要展现给A看，那么普通的ajax可以处理这种功能吗？这就是reverse-ajax的用途，可以从服务段向brower下推信息 .

文字转载自：http://blog.sina.com.cn/s/blog_5bd96d520100gau4.html

分享到：