dwr + springMVC 后台推送
2015-11-24 10:03
459 查看
记下,以后复制黏贴
后台启用了两个线程池,同时启动了好几个线程,需要把每个线程进入方法时和执行完毕时的信息返回页面
用Ajax扫描太麻烦,改用dwr后台推送
首先引入dwr,jar包
web.xml
后台推送的Java类
JSP页面:使用了bootstrap-treeview和calendar时间控件
主要关注的是
整个页面
后台要推送的地方
SendMassage.getMessage("开始执行");
后台启用了两个线程池,同时启动了好几个线程,需要把每个线程进入方法时和执行完毕时的信息返回页面
用Ajax扫描太麻烦,改用dwr后台推送
首先引入dwr,jar包
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name></display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <context-param> <param-name>webAppRootKey</param-name> <param-value>ERWeb</param-value> </context-param> <context-param> <param-name>contextConfigLocation</param-name> <param-value> classpath:applicationContext.xml </param-value> </context-param> <listener> <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class> </listener> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <filter> <filter-name>CharacterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <session-config> <session-timeout>60</session-timeout> </session-config> <servlet> <servlet-name>dispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:erweb-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> <servlet> <!-- 指定DWR核心Servlet的名字 --> <servlet-name>dwr</servlet-name> <servlet-class> <!-- 指定DWR核心Servlet的实现类 --> org.directwebremoting.servlet.DwrServlet </servlet-class> <!-- 指定DWR核心Servlet处于调试状态 --> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <!-- 设置使用反向Ajax技术 --><!-- 使用piggyback、comet、polling三种方式中的comet方式 --> <init-param> <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>60</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <!-- 指定核心Servlet的URL映射 --> <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"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> <dwr> <allow> <create javascript="Message" creator="new" scope="application"><!-- application --> <param name="class" value="com.controller.SendMassage"></param> </create> </allow> </dwr>
后台推送的Java类
package com.controller; import java.util.Collection; import org.directwebremoting.Browser; import org.directwebremoting.ScriptBuffer; import org.directwebremoting.ScriptSession; import org.directwebremoting.ScriptSessions; import org.directwebremoting.ServerContext; import org.directwebremoting.ServerContextFactory; import org.directwebremoting.WebContext; import org.directwebremoting.WebContextFactory.WebContextBuilder; import org.directwebremoting.impl.DefaultWebContextBuilder; public class SendMassage { public static void getMessage(final String data) throws Exception { Runnable run = new Runnable() { private ScriptBuffer script = new ScriptBuffer(); public void run() { // 设置要调用的 js及参数 script.appendCall("getDate", data); // 得到所有ScriptSession Collection<ScriptSession> sessions = Browser .getTargetSessions(); // 遍历每一个ScriptSession for (ScriptSession scriptSession : sessions) { scriptSession.addScript(script); } } }; // 执行推送 Browser.withAllSessions(run); } }
JSP页面:使用了bootstrap-treeview和calendar时间控件
主要关注的是
dwr.engine.setActiveReverseAjax(true); dwr.engine.setNotifyServerOnPageUnload( true);后台调用的js方法
function getDate(message) { // message 是后台处理完成返回的数据 console.log(message); $("#msg").append(message+"</br>"); }
整个页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Expires", "0"); String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.min.css"> <script src="<%=path%>/js/calendar.js"></script> <script src="<%=path%>/js/laydate.js"></script> <script type="text/javascript" src="<%=path%>/js/datetimepicker/jquery-1.11.0.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=path%>/js/bootstrap/css/bootstrap.min.css" /> <script type="text/javascript" src="<%=path%>/js/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="<%=path%>/js/bootstrap/js/bootstrap-treeview.min.js"></script> <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/Message.js"></script> <script type="text/javascript"> $(function() { dwr.engine.setActiveReverseAjax(true); dwr.engine.setNotifyServerOnPageUnload(true); function init(tree) { var $checkableTree = $('#treeview-checkable').treeview( { data : tree, showIcon : false, showCheckbox : true, showTags : true, bootstrap2 : false, levels : 5, onNodeChecked : function(event, node) { $('#checkable-output').prepend( '<p>' + node.text + ' was checked</p>'); }, onNodeUnchecked : function(event, node) { $('#checkable-output').prepend( '<p>' + node.text + ' was unchecked</p>'); } }); var findCheckableNodess = function() { return $check 4000 ableTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase : false, exactMatch : false } ]); }; var checkableNodes = findCheckableNodess(); // Check/uncheck/toggle nodes $('#input-check-node').on( 'keyup', function(e) { checkableNodes = findCheckableNodess(); $('.check-node').prop('disabled', !(checkableNodes.length >= 1)); }); $('#btn-check-node.check-node').on('click', function(e) { $checkableTree.treeview('checkNode', [ checkableNodes, { silent : $('#chk-check-silent').is(':checked') } ]); }); $('#btn-uncheck-node.check-node').on('click', function(e) { $checkableTree.treeview('uncheckNode', [ checkableNodes, { silent : $('#chk-check-silent').is(':checked') } ]); }); $('#btn-toggle-checked.check-node').on( 'click', function(e) { $checkableTree.treeview('toggleNodeChecked', [ checkableNodes, { silent : $('#chk-check-silent').is( ':checked') } ]); }); // Check/uncheck all $('#btn-check-all').on('click', function(e) { $checkableTree.treeview('checkAll', { silent : $('#chk-check-silent').is(':checked') }); }); $('#btn-uncheck-all').on('click', function(e) { $checkableTree.treeview('uncheckAll', { silent : $('#chk-check-silent').is(':checked') }); }); } var tree;//初始化树的节点 $.ajax({ type : 'post', url : '', success : function(data) { init(data); } }); }); function submit() { $("#msg").html(""); var arr = new Array(); var $tree = $('#treeview-checkable'); arr = $tree.treeview('getChecked', 0); var fristArr = new Array(); var secondArr = new Array(); var thirdArr = new Array(); var fourthArr = new Array(); if (arr.length == 0) { alert("请选择节点"); return; } for (var i = 0; i < arr.length; i++) { var node = arr[i]; var temp = $('#treeview-checkable') .treeview('getNode', node.nodeId); var href = node.href; if (href.indexOf("root") > -1) { var v = 2; continue; } else { if (node.parentId == 0) { fristArr.push(href); } else { if (($tree.treeview('getNode', node.parentId)).parentId == 0) { secondArr.push(href); } else if ($tree.treeview('getNode', ($tree.treeview( 'getNode', node.parentId)).parentId).parentId == 0) { thirdArr.push(href); } else { fourthArr.push(href); } } } } var startdate = $("#startdate").val(); var enddate = $("#enddate").val() if (startdate == "") { alert("请选择开始时间"); return; } if (enddate == "") { alert("请选择结束时间"); return; } var ifpro = "0"; if ($('#ifpro').is(':checked')) { ifpro = "1"; } $.ajax({ type : 'post', traditional : true, //要传数组的时候 url : '', data : {}, success : function(data) { if (data == "1") { clearInterval(intID); } } }); } function showMessage(autoMessage) { alert(11); $("#msg").append(autoMessage); } function getDate(message) { // message 是后台处理完成返回的数据 console.log(message); $("#msg").append(message + "</br>"); } </script> </head> <body> <div style="width: 30%; float: left; overflow-y: scroll; height: 670px"> <div id="treeview-checkable"></div> </div> <div class="container-fluid" style="float: left; width: 30%"> <div class="row-fluid"> <div class="span12"> <div class="control-group" style="width: 20%"> <label class="control-label" for="startdate">开始时间:</label> <div class="controls"> <div class="controls"> <input id="startdate" name="startdate" style="display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;" class="laydate-icon" type="text" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly> </div> </div> <div class="control-group"> <label class="control-label" for="enddate">结束时间:</label> <input id="enddate" name="enddate" style="display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;" class="laydate-icon" type="text" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly> <!-- 时间格式为 2015-11-11 11:11:11 --> </div> </div> <div class="control-group" style="width: 60%"> <div class="controls"> <label class="checkbox"><input type="checkbox" id="ifpro" /></label> <button type="button" class="btn" onclick="submit()">提交</button> </div> </div> </div> </div> </div> <div id="msg" style="float: right; width: 40%; color: red; font-size: 15px"></div> </body> </html>
后台要推送的地方
SendMassage.getMessage("开始执行");
相关文章推荐
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- dwr + springMVC 后台推送
- Java开发中的23种设计模式详解(转)
- Eclipse如何生成jar包
- java 调用mysql存储过程
- Java设计模式
- Java集合Map接口与Map.Entry学习
- eclipse实用快捷键
- Java中普通代码块,构造代码块,静态代码块区别及代码示例
- 在eclipse中怎样给项目添加关联项目
- java常用 api
- java正则表达式抽取html数据
- Struts2和Spring的整合
- java图片转byte转string