首页 » 技术分享 » 关于服务器推送技术简单实现

关于服务器推送技术简单实现

　
评论关闭　680次浏览

服务器推送技术

 

需要的jar包：

 

dwr.jar包下载地址：http://directwebremoting.org/dwr/index.html

 

commons-logging.jar包下载地址：

http://commons.apache.org/proper/commons-logging/download_logging.cgi

 

 

下载完解压：

 

 

 

 

把上述两个jar包放在WebRoot/WEB-INF/lib目录下：

 

 

 

配置web.xml文件：

 

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="3.0"

    xmlns="http://java.sun.com/xml/ns/javaee"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

  <display-name></display-name>   

  <welcome-file-list>

    <welcome-file>index.jsp</welcome-file>

  </welcome-file-list>



    <!-- 服务器推送技术的相关配置 -->

    <listener> 

    <listener-class>org.directwebremoting.servlet.DwrListener</listener-class> 

  </listener>



  <servlet>

      <servlet-name>dwr</servlet-name>

      <!-- version 2 * -->

      <!-- <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> -->

      <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

      <init-param>

          <param-name>debug</param-name>

          <param-value>true</param-value>

      </init-param>

      <!-- 使用服务器反转AJAX  -->

      <init-param>

          <param-name>activeReverseAjaxEnabled</param-name>

          <param-value>true</param-value>

      </init-param>

      <!-- 是能够从其他域请求true：开启； false：关闭 -->

      <init-param>

          <param-name>crossDomainSessionSecurity</param-name>

          <param-value>false</param-value>

      </init-param>

      <!-- 允许远程调用js -->

      <init-param>

          <param-name>allowScriptTagRemoting</param-name>

          <param-value>true</param-value>

      </init-param>



      <load-on-startup>1</load-on-startup> 

  </servlet>

  <servlet-mapping>

      <servlet-name>dwr</servlet-name>

      <url-pattern>/dwr/*</url-pattern>

  </servlet-mapping>

</web-app>

 

 

配置dwr.xml文件：

<?xml version="1.0" encoding="UTF-8"?>

<dwr>

    <allow>

        <create creator="new" javascript="DwrPush">

            <param name="class" value="com.socket.demo.DwrPush"></param>

            <!-- 这个标签可以写也可以不写，无所谓的-->

            <include method="send"/>

            <include method="shopping"/>

        </create>

    </allow>

</dwr>

 

 

 

 

创建后台处理的类：

package com.socket.demo;

import java.util.Collection;

import org.directwebremoting.ScriptBuffer;

import org.directwebremoting.ScriptSession;

import org.directwebremoting.WebContext;

import org.directwebremoting.WebContextFactory;

import org.directwebremoting.proxy.dwr.Util;



public class DwrPush {



    private static int num = 0;

   

     public static void Send(String msg){

            WebContext webContext = WebContextFactory.get();

            @SuppressWarnings("deprecation")

            Collection<ScriptSession> sessions = webContext.getAllScriptSessions();



            // 构建发送所需的JS脚本

            ScriptBuffer scriptBuffer = new ScriptBuffer();

            // 调用客户端的js脚本函数

            scriptBuffer.appendScript("callback(");

            // 这个msg可以被过滤处理一下，或者做其他的处理操作。这视需求而定。

            scriptBuffer.appendData(msg);

            scriptBuffer.appendScript(")");

            // 为所有的用户服务

            @SuppressWarnings("deprecation")

            Util util = new Util(sessions);

            util.addScript(scriptBuffer);

        }

     

     public static void shopping(String mess){

             WebContext webContext = WebContextFactory.get();

             @SuppressWarnings("deprecation")

             Collection<ScriptSession> sessions = webContext.getAllScriptSessions();

               // 构建发送所需的JS脚本

            ScriptBuffer scriptBuffer = new ScriptBuffer();

           

            //这里是处理业务逻辑，例如获取前台发送过来的加购物商品信息

            //将该信息加入购物车数据库表

            System.out.println(mess);

           

            //得到数据库中购物车商品数量

            num++;

           

            // 调用客户端的js脚本函数

            scriptBuffer.appendScript("shopping(");

            // 这个msg可以被过滤处理一下，或者做其他的处理操作。这视需求而定。

            scriptBuffer.appendData(num);

            scriptBuffer.appendScript(")");

            // 为所有的用户服务

            @SuppressWarnings("deprecation")

            Util util = new Util(sessions);

            util.addScript(scriptBuffer);

         }



}

 

类里面的方法跟dwr.xml文件里的配置相关，保持一致

 

 

接下来是前端页面的操作：

 

在这里我写了两个简单的页面，一个页面负责点击按钮进行数据的++操作，一个页面显示点击的数值；所谓的服务器推送技术就是：只要我们的服务器开启，不论我们在几种浏览器下操作，所有的浏览器都会接受到这个数值。

 

接受数值的页面：

在页面中我们需要引入推送技术需要的js：

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

<script type='text/javascript' src='dwr/interface/DwrPush.js'></script>

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

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

 

Header.jsp：

 

<script type="text/javascript">

    $(function(){

          dwr.engine.setActiveReverseAjax(true);

    });

   

    function shopping(data){

         $("#num").html(data);

         MyAudio.play();

    }

</script>

  </head>



  <body>

      当前购物车数量:<span id="num">0</span>

      

      <audio id="MyAudio" controls hidden>

         <source src="mp3/a.mp3" type="audio/mpeg">

</audio>

  </body>

 

 

 

 

Goods.jsp页面：（书写一个点击事件，调用后台的shopping方法，实现数据的操作）

<script type="text/javascript">

$(function(){

   dwr.engine.setActiveReverseAjax(true);

   

   $("#addShopping").click(function(){

       DwrPush.shopping(1);

   });



});



</script> 



  <jsp:include page="header.jsp"></jsp:include>

  <hr>

  <body>

    <button id="addShopping">加入购物车</button>

  </body>

</html>

 

 

 

 

这样就可实现，不论我们在哪个页面点击了按钮，就能在header.jsp

页面中显示点击的次数记录。

 

 

 

 

 

 

 

 

 

 

 

 

转载自原文链接, 如需删除请联系管理员。

原文链接：关于服务器推送技术简单实现，转载请注明来源！

赞 0