DWR入门教程2 服务器端push技术
2015-03-05 14:56
417 查看
前面一章讲解了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按钮会发现其他窗口的最后一个输入框也会出现数据:
第一幅图：
第二幅图：
一。工程还沿用上一节的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按钮会发现其他窗口的最后一个输入框也会出现数据:
第一幅图：
第二幅图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 织梦Ajax技术入门教程
- J2EE入门视频教程第七讲——JDBC技术简介及使用
- DWR Server Push(服务器推技术) 实现即时聊天功能(WEB)
- 一起谈.NET技术，Server-push技术(comet)----------asp.net中的异步处理+client与服务器端的长连接
- 一起谈.NET技术，Expression Blend实例中文教程(2) - 界面快速入门
- wap入门技术教程
- 清华大学计算中心培训部-技术分享：java入门教程:怎么向程序输入信息
- Server-push技术(comet)----------asp.net中的异步处理+client与服务器端的长连接
- DWR入门教程--学习例子
- Java API——RMIIO入门教程（3）远程流传输示例之RMIIO服务器端源码
- 林信良（良葛格）的专栏中的DWR入门好教程
- [JavaScript][AJAX][DWR](Dwr教程)dwr_ajax入门教程
- DWR入门教程
- Server-push技术(comet)----------asp.net中的异步处理+client与服务器端的长连接 (续)
- 学习使用dwr 中的push技术 服务器发送一个广播，让每一个客户端都能接收到这个广播。
- J2EE入门视频教程第四讲——数据库技术简介及环境配置
- DWR入门教程
- DWR入门教程之HelloWorld
- DWR入门教程之HelloWorld
- 清华大学计算中心培训部-技术分享：java入门教程:Hello world程序