利用DWR实现网页推送,逆向AJAX的例子, 附源码

这段时间需要做一个POC给客户演示,恰好有一个功能是需要从服务端向客户端推送,类似于做移动开发Android,iOS 的功能一样,但是需要在网页端实现,在网上看到最多的就是 comnet 技术的介绍,很多网页聊天或者咨询类似功能就是采用这种技术实现的,当然html5的 websocket 是肯定支持的,但需要点时间去学些,POC时间比较紧,所以我最终采用DWR 来实现,DWR 在多年前就用过来实现AJAX请求,当时印象并不是很好,一直钟情于jquery, 但DWR 的实现方式确实令人印象深刻. 能模拟直接操作java 对象的方式. 为了这个POC 再次采用了 DWR 的逆向AJAX ,也就是从服务端向网页端推送消息的技术. 效果如下:


其实实现并不难,我采用的DWR3.0来做的,具体也就几个地方要注意
1. WEB.XML 的配置
程序代码 程序代码

  <listener>
    <listener-class>org.directwebremoting.servlet.DwrListener</listener-class>
  </listener>
  
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    
    <init-param>
     <param-name>fileUploadMaxBytes</param-name>
     <param-value>25000</param-value>
    </init-param>
    
    <!-- This should NEVER be present in live -->
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
  
    <init-param>
      <param-name>accessLogLevel</param-name>
      <param-value>runtimeexception</param-value>
    </init-param>
    
    <!-- Remove this unless you want to use active reverse ajax -->
    <init-param>
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- By default DWR creates application scope objects when they are first
    used. This creates them when the app-server is started -->
    <init-param>
      <param-name>initApplicationScopeCreatorsAtStartup</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- WARNING: allowing JSON-RPC connections bypasses much of the security
    protection that DWR gives you. Take this out if security is important -->
    <init-param>
      <param-name>jsonRpcEnabled</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- WARNING: allowing JSONP connections bypasses much of the security
    protection that DWR gives you. Take this out if security is important -->
    <init-param>
      <param-name>jsonpEnabled</param-name>
      <param-value>true</param-value>
    </init-param>

    <!-- data: URLs are good for small images, but are slower, and could OOM for
    larger images. Leave this out (or keep 'false') for anything but small images -->
    <init-param>
      <param-name>preferDataUrlSchema</param-name>
      <param-value>false</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>

也许并用不了这么多配置,但我还是保留了。

2. dwr.xml 的配置
程序代码 程序代码

  <allow>
   <create creator="new" javascript="Demo">
      <param name="class" value="com.yihaomen.DwrDemo"/>
   </create>

重点是这个类的配置,另外javascript="Demo" , 也就说明在测试页面interface 中需要引入Demo.js
3. jsp 页面里面的配置
程序代码 程序代码

<script type='text/javascript' src='dwr/engine.js'> </script>
<script type='text/javascript' src='dwr/util.js'> </script>
<script type='text/javascript' src='dwr/interface/Demo.js'></script>

还要注意的是,在页面的 onload 事件中需要增加:
程序代码 程序代码

    dwr.engine.setActiveReverseAjax(true);

4. java 类里的处理方式.
程序代码 程序代码

public class DwrDemo{
    
    public static void sendMsg(final String msg){    
        WebContext wctx = WebContextFactory.get();
       // System.out.println(wctx.getCurrentPage());
        Browser.withPage("/MyDWRSample/",new Runnable(){
        public void run(){
            ScriptSessions.addFunctionCall("show", msg);
        }
    });
    
    }

}

要注意上面绑定了要推送的页面,这是重点,只针对具体的页面去推送,做测试时,我用的是调用页面的show  方法,这是一个js方法,用来操作dom元素.

在我的例子中,我模拟了一个servlet 来请求服务,再由server端推送信息到 页面的过程。


源代码下载:下载文件 DWR 逆向AJAX 推送


除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
[本日志由 yihaomen 于 2014-12-03 09:44 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: dwr ajax
相关日志:
评论: 2 | 引用: 0 | 查看次数: -
回复回复EmmaGong[2016-05-26 03:39 PM | del]
Goeasy就不错,专业做web实时推送,服务器稳定,代码简洁易懂,还有中英文,网址是goeasy.io;
回复回复香港独立IP主机[2014-12-11 01:46 PM | del]
站长你好,恒创科技买主机送平板,独立IP专享7折,诚邀广告位合作,博主有兴趣可加Q:2954243953
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.