DWR允许客户端脚本远程调用服务器端的类方法。使用它可以很容易的构建ajax程序。在此,简要说明一下如何通过DWR构建一个简单的一对一聊天程序。

1.首先配置web.xml


<!-- 配置spring -->
<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/applicationContext*.xml</param-value>
</context-param>
<listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- 配置DwrServlet -->
<display-name>DWR (Direct Web Remoting)</display-name>
<description>A Simple Demo DWR</description>
<servlet>
 <servlet-name>dwr-invoker</servlet-name>
 <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param><!--开启debug为true后,可以通过访问contextpath/dwr/index.html进行调试-->
      <param-name>debug</param-name>
      <param-value>true</param-value>
</init-param>
<init-param><!--该选项为true时,轮询和反向ajax会被启用-->
      <param-name>activeReverseAjaxEnabled</param-name>
      <param-value>true</param-value>
</init-param>
<init-param>
      <param-name>initApplicationScopeCreatorsAtStartup</param-name>
      <param-value>true</param-value>
</init-param>
<init-param>
      <param-name>maxWaitAfterWrite</param-name>
      <param-value>-1</param-value>
</init-param>                                                 
 <init-param><!--该参数为true时,允许远程服务器将javascript代码动态添加到客户端页面中-->
   <param-name>allowScriptTagRemoting</param-name>
   <param-value>true</param-value>
 </init-param>
 <load-on-startup>3</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
  <!-- 监听scriptSession -->
  <servlet>
  <servlet-name>scriptSessionListener</servlet-name>
  <servlet-class>com.hb.util.InitScriptSessionListener</servlet-class>
  <load-on-startup>8</load-on-startup>
  </servlet>


2.配置dwr.xml

<create creator="spring" javascript="MessageService" scope="application">
      <param name="beanName" value="dwrMessageService"/>
 </create>
<convert converter="bean" match="com.entity.Message" />

dwr中create元素中creator属性为spring,表示,名为“dwrMessageService”的bean由spring进行管理,javascript属性值表示如何在客户端调用该bean,即通过该属性的值调用。dwr可以自动对javascript对象和java对象进行转化。convert元素的match属性即表示哪个java bean交由dwr进行互转。

3.spring配置文件如下

<bean id="dwrMessageService" class="com.dwr.MyMessageService" scope="prototype">
<property name="messageService">
 <ref bean="messageService"/>
</property>
</bean>

4.(1)com.dwr.MyMessageService类部分代码如下:


import com.util.initParam;
public boolean pushMessagetoSomeOne(String userId,Message msg){
         /*将消息保存到数据库*/
           try {
               messageService.saveMessage(msg);
           } catch (Exception e) {
               // Todo Auto-generated catch block
               e.printstacktrace();
           }
//调用接收方客户端的showMessageFromOne(msg)函数,将msg消息传递给接收方
ScriptBuffer script = new ScriptBuffer();           script.appendScript("showMessageFromOne(").
appendData(msg).appendScript(");");
      ScriptSession s1= initParam.sc.get(userId); //获取接收方的ScriptSession
      s1.addScript(script);
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
           return true;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
       }

(2)com.util.initParam类

package com.util;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import org.directwebremoting.ScriptSession;
import com.dwr.ScriptSessionAndUser;
public class initParam {
 public static Map<String,ScriptSession> sc  =newHashMap<String,ScriptSession>();  // 保存用户id和该用户对应的ScriptSession
    public initparam(){}
}

(3)用来监听ScriptSession的Servlet:InitScriptSessionListener

package com.util;
import java.io.IOException;
import javax.servlet.GenericServlet;
import javax.servlet.servletexception;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpSession;
import org.directwebremoting.Container;
import org.directwebremoting.ScriptSession;
import org.directwebremoting.ServerContextFactory;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.event.ScriptSessionEvent;
import org.directwebremoting.event.ScriptSessionListener;
import org.directwebremoting.extend.ScriptSessionManager;
public class InitScriptSessionListener extends GenericServlet {
   /* 监控ScriptSessionListener状态*/
 public void init()
    {
 Container container = ServerContextFactory.get().getContainer();
 ScriptSessionManager manager =container.getBean(ScriptSessionManager.class);
ScriptSessionListener listener = new AddScriptSessionListener();
        manager.addScriptSessionListener(listener);
    }
    @Override
    public void service(ServletRequest arg0,ServletResponse arg1)
            throws servletexception,IOException {
        // Todo Auto-generated method stub
        init();
                                                                                                                                                                                                                                                                                                                                                                                                                         
    }
                                                                                                                                                                                                                                                                                                                                                                                                                     
                                                                                                                                                                                                                                                                                                                                                                                                                     
}

(4)AddScriptSessionListener类


package com.util;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;
import javax.servlet.http.HttpSession;
import org.directwebremoting.ScriptSession;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.event.ScriptSessionEvent;
import org.directwebremoting.event.ScriptSessionListener;
public class AddScriptSessionListener implements ScriptSessionListener{
    public void sessionCreated(ScriptSessionEvent se) {
 /*客户端刷新页面后,将用户的session信息和ScriptSession重新绑定*/       
WebContext ct = WebContextFactory.get();
HttpSession session =ct.getHttpServletRequest().getSession();
initParam.sc.put(session.getAttribute("UsersId").toString(),se.getSession());
                                                                                                                                                                                                                                                                                                                                                                                                 
    public void sessionDestroyed(ScriptSessionEvent se) {
        System.out.println(se.getSession()+"销毁");
    }
                                                                                                                                                                                                                                                                                                                                                                                             
}

5.客户端代码


<script type="text/javascript" src=\'#\'" /engine.js"</script>
<script type="text/javascript" src=\'#\'" /interface/MessageService.js"></script>
<script type="text/javascript">
   dwr.engine.setActiveReverseAjax(true);   //启用dwr反向ajax
   dwr.engine.setNotifyServerOnPageUnload(true);//刷新页面后销毁当前scriptsession
   dwr.engine.setErrorHandler(function()
           {
       //alert("错误");
           }); //自定义错误处理方式
  function sendMessageto(userId)
  {
 var content=document.getElementById("content").innerHTML;
 document.getElementById("content").innerHTML="";
document.getElementById("message").innerHTML=getId("message").innerHTML+"<li><span>${session.username}"+content+"</span></li>";
var msg={};
msg.getId=userId;
msg.content=content;
msg.sendId=${session.userId};//将发送的信息显示到信息框
MessageService.pushMessagetoSomeOne(userId,msg,function(data){});
//通过MessageService对象调用远程MyMessageService类的 public boolean pushMessagetoSomeOne(String userId,Message msg)方法,最后一个参数为回调函数
  }
 function showMessageFromOne(msg)
  { var htmls="<li><span>"+msg.sendId+"+msg.content+"</span></li>";       document.getElementById("message").innerHTML=document.getElementById("message").innerHTML+htmls+"<br />";
          }
    }
<script type="text/javascript" src=\'#\'" /engine.js"</script>
<script type="text/javascript" src=\'#\'" /interface/MessageService.js"></script>
<script type="text/javascript">
   dwr.engine.setActiveReverseAjax(true);   //启用dwr反向ajax
   dwr.engine.setNotifyServerOnPageUnload(true);//刷新页面后销毁当前scriptsession
   dwr.engine.setErrorHandler(function()
           {
       //alert("错误");
           }); //自定义错误处理方式
  function sendMessageto(userId)
  {
 var content=document.getElementById("content").innerHTML;
 document.getElementById("content").innerHTML="";
document.getElementById("message").innerHTML=getId("message").innerHTML+"<li><span>${session.username}"+content+"</span></li>";
var msg={};
msg.getId=userId;
msg.content=content;
msg.sendId=${session.userId};//将发送的信息显示到信息框
MessageService.pushMessagetoSomeOne(userId,Message msg)方法,最后一个参数为回调函数
  }
}
<div id="container">
<div id="message"></div>
<div id="content"></div>
<input type="button" data-role="button"  onclick="sendMessageto(${getUsers.id})">发送</a>
</div>


6.现在解释一下ScriptSession.我们知道,一般的Session会在用户初次访问时创建,然后在用户的整个访问过程中一直存在,直到用户在一定时间内未进行任何访问后销毁。 而DWR中的ScriptSession则是用户每次刷新或重新请求一个dwr控制的页面时,重新创建。因此,在本例中我们创建了ScriptSession的监听器,每当重新创建新的ScriptSession时,将当前用户的session与新的ScriptSession重新绑定,以便可以确切的将消息发送给目标用户,而不是调用一个已经不存在的ScriptSession。 通过在页面加载后调用dwr.engine.setNotifyServerOnPageUnload(true);可以使DWR在创建一个新的ScriptSession后自动销毁之前的ScriptSession。

7.本例是本人在测试的项目当中挖取的一部分主要内容,可能不够全面,也存在一些问题。望大家批评指正。谢谢。

DWR构建的简单聊天程序-供初学者学习的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. 有关HTML5页面在iPhoneX适配问题

    这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下

  7. HTML5 WebSocket实现点对点聊天的示例代码

    这篇文章主要介绍了HTML5 WebSocket实现点对点聊天的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  9. Html5百叶窗效果的示例代码

    本篇文章主要介绍了Html5百叶窗效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. html5中使用hotcss.js实现手机端自适配的方法

    这篇文章主要介绍了html5中使用hotcss.js实现手机端自适配的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部