DWR入门教程2 服务器端push技术

前面一章讲解了DWR页面js代码如何直接调用后台服务器端java方法,今天这一章讲解如何在服务器端之间push数据到页面。

一。工程还沿用上一节的DwrDemo工程(不懂的可以先查看下上一章的内容)

首先需要修改web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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_2_5.xsd">
	<display-name></display-name>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<!-- 配置DWR -->
	<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>
		<span style="color:#ff0000;"><!-- 开启DWR反向ajax功能 -->
		<init-param>
			<param-name>activeReverseAjaxEnabled</param-name>
			<param-value>true</param-value>
		</init-param></span>

	</servlet>

	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
</web-app>

然后:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Dwr Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type='text/javascript' src='/DwrDemo/dwr/engine.js'></script>
<script type='text/javascript' src='/DwrDemo/dwr/util.js'></script>
<script type='text/javascript' src='/DwrDemo/dwr/interface/DwrDemo.js'></script>
<script type="text/javascript">
	function dwrdemo() {
		//调用服务器段的DwrDemo类的getServerData方法,serverReturn是回调方法
		DwrDemo.getServerData(serverReturn);
	}
	function serverReturn(data) {
		dwr.util.setValue("val", data);
	}
	function dwrdemo1() {
		DwrDemo.getPerson(serverReturn1);
	}
	function serverReturn1(data) {
		dwr.util.setValue("val1", data.name + ":" + data.age + ":"
				+ data.address);
	}

	<span style="color:#ff0000;">//服务器端会调用这个js来向前端的输入框里面设置数据
	function serverPush(data) {
		var v = dwr.util.getValue("box") ;
		dwr.util.setValue("box",v+data) ;
	}</span>
</script>
</head>

<span style="color:#ff0000;"><!-- 需要在页面onload的时候设置反向ajax是true -->
<body onload="dwr.engine.setActiveReverseAjax(true);"></span>
	<button name="btn" onclick="dwrdemo()" title="click me">click
		me</button>
	返回值:
	<input type="text" id="val" name="val">

	<button name="btn1" onclick="dwrdemo1()">获得用户</button>
	用户信息:
	<input type="text" id="val1" name="val1">
	<div>
		<input type="text" id="box" name="box">
	</div>
</body>
</html>

最后修改java代码:

package cn.gov.zjport.dwr;

import java.util.Collection;

import org.directwebremoting.ScriptBuffer;
import org.directwebremoting.ScriptSession;
import org.directwebremoting.proxy.dwr.Util;

import uk.ltd.getahead.dwr.WebContext;
import uk.ltd.getahead.dwr.WebContextFactory;

public class DwrDemo {

	public String getServerData() {
		serverPush();
		return "Message from server";
	}

	public Person getPerson() {
		Person person = new Person();
		person.setName("张三");
		person.setAge(32);
		person.setAddress("杭州下城区");
		return person;
	}
	<span style="color:#ff0000;">/**
	 * 开启一个线程用来定时的向前端来push数据
	 */
	public void serverPush() {
		d dd = new d(getSessions());
		dd.start();
	}

	public Collection<ScriptSession> getSessions(){
		WebContext content = WebContextFactory.get();
		Collection<ScriptSession> session = content.getAllScriptSessions();
		return session ;
	}</span>

}

class d extends Thread {

	private Collection<ScriptSession> sessions;

	public d(Collection<ScriptSession> sessions) {
		this.sessions = sessions;
	}

	@Override
	public void run() {
		int i = 1;
		while (true) {
			for (ScriptSession session : sessions) {
				push(i, session);
			}
			i++;
			try {
				Thread.sleep(2000);
			} catch (Exception ex) {
				ex.printStackTrace();
			}
		}
	}

	<span style="color:#ff0000;">/**
	 * 调用前端js方法:serverPush(data)
	 * @param i
	 * @param session
	 */
	public void push(int i, ScriptSession session) {
		ScriptBuffer buffer = new ScriptBuffer();
		buffer.appendScript("serverPush(");
		buffer.appendData(i);
		buffer.appendScript(")");
		Util util = new Util(session);
		util.addScript(buffer);
		System.out.println("----");
	}</span>
}

运行结果:

首先开启几个窗口然后点击其中一个串口的click me按钮会发现其他窗口的最后一个输入框也会出现数据:

第一幅图:

第二幅图:

时间: 2024-10-10 22:37:16

DWR入门教程2 服务器端push技术的相关文章

DWR入门教程

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-

dwr入门教程和总结

dwr 下载地址:http://www.directwebremoting.org/dwr/downloads/index.html 另外还需要一个 commons-logging-1.2.jar, 将dwr.jar 和commons-logging-1.2.jar 放进lib里面. 先看个入门教材吧, http://www.cnblogs.com/cyjch/archive/2012/02/16/2353758.html ,这个写的很简单,照着配置就可以实现. 1.实体User package

[JavaEE] DWR入门教程

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本 DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons

【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线

[Zigbee技术入门教程-01]Zigbee无线组网技术入门的学习路线 广东职业技术学院  欧浩源 一.引言    在物联网技术应用的知识体系中,Zigbee无线组网技术是非常重要的一环,也是大家感觉比较难以掌握的一个部分.Zigbee无线组网技术之所以让你感有学习难度,不是因为它真的复杂,而是它看起来很复杂,让人望而止步.另一方面则是Zigbee技术在应用层面上将硬件和软件完成融为一个体系,要求开发人员既要有扎实的硬件技术,又要有清晰的软件思维.    目前,尽管有不少关于Zigbee无线组

AJAX技术与Struts1框架配合使用入门教程

由于公司使用技术比较陈旧,依然使用struts1框架,所以写个AJAX与Struts1配合使用的入门教程.下面进入正题: 1.首先介绍一下AJAX在JS中的写法:      $.ajax({          url:"<%=basePath%>xxx.do",//接收AJAX请求的路径,需要在xml文件中配置          dataType:'text',//回调函数返回值类型,text代表字符串          type:"post"//请求方

【Zigbee技术入门教程-号外】基于Z-Stack协议栈的抢答系统

[Zigbee技术入门教程-号外]基于Z-Stack协议栈的抢答系统 广东职业技术学院  欧浩源 一.引言    2017年全国职业院校技能大赛"物联网技术应用"赛项中任务三题2的"抢答器开发"是一个非常优秀的题目.本人对题目进行了适当的改造和完善,剔除了和技能大赛中特别设备高度相关的内容,使其成为一个通用的Zigbee无线组网技术应用入门学习的综合实训案例.不管是自我学习,还是专业教学,甚至是在技能大赛训练中,这个题目都适合使用. 二.硬件资源需求    要进行本

Flux 架构入门教程

过去一年中,前端技术大发展,最耀眼的明星就是React. React 本身只涉及UI层,如果搭建大型应用,必须搭配一个前端框架.也就是说,你至少要学两样东西,才能基本满足需要:React + 前端框架. Facebook官方使用的是 Flux 框架.本文就介绍如何在 React 的基础上,使用 Flux 组织代码和安排内部逻辑,使得你的应用更易于开发和维护. 阅读本文之前,我假设你已经掌握了 React .如果还没有,可以先看我写的<React入门教程>.与以前一样,本文的目标是使用最简单的语

avalonjs1.5 入门教程

迷你MVVM框架 avalonjs1.5 入门教程 avalon经过几年以后,已成为国内一个举足轻重的框架.它提供了多种不同的版本,满足不同人群的需要.比如avalon.js支持IE6等老旧浏览器,让许多靠政府项目或对兼容性要求够高的公司也能享受MVVM的乐趣.avalon.modern.js支持IE10以上版本,优先使用新API,性能更优,体积更少.avalon.mobile.js在avalon.modern的基础提供了触屏事件的支持,满足大家在移动开发的需求.此外,它们分别存在avalon.

Flash Media Server 入门教程

本文原地址:http://www.nshen.net/article/2007/08/29/fms-tutorial/ ,转载请保留链接 . 我把我以前的那些FMS学习笔记整理了一下,做了下修改,成了一页的FMS教程,方便想学FMS的新手来看,如果还有错误或者看不懂的地方欢迎留言. 注意: Flash Media Server的最新版本已经到FMS 4.X了 ,由于本入门教程是在2006~2007年所写,年代久远所以使用FMS 2演示,但当你了解了原理后可以很容易的升到4,因为FMS 1 到 F