看了下Ext.Direct的polling功能还是封装的不错的,所以做了个网页聊天,不是很实用,但是基本可以学会运用了。
来看代码吧:
PS:具体的Ext.Direct的配置这篇就不介绍了,详细请见我写的EXT 3.x 使用详解之Ext.Direct(一),很详细的。
1.先写个JAVA类,如下:
package com.xuyi.web.direct;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import org.apache.commons.lang.StringUtils;
import com.softwarementors.extjs.djn.config.annotations.DirectMethod;
import com.softwarementors.extjs.djn.config.annotations.DirectPollMethod;
import com.xuyi.vo.TestVO;
import com.xuyi.vo.User;
/**
* @author xuyi
*
*/
public class TestDirect {
static String chat_words="";
//注意注解
@DirectMethod
public String chat(TestVO vo){//这里可以直接使用对象来接收值了,恩,很方便的说
String user = vo.getUser();
String chat = vo.getChat();
if(StringUtils.isNotBlank(user)){
chat_words = chat_words + "<p>用户 " + user + " 在 " + formatDate(new Date()) +" 说: " + chat +"</p>";
}
return chat_words;
}
//direct polling注释
@DirectPollMethod(event="message")
public String chatRoom(Map<String,String> params){
//测试polling获得前台的传值
System.out.println(params.get("polling_date"));
return chat_words;
}
private String formatDate(Date date){
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
return sdf.format(date);
}
}
2.TestVO.java
package com.xuyi.vo;
/**
* @author xuyi
*
*/
public class TestVO {
private String user;
private String chat;
public String getChat() {
return chat;
}
public void setChat(String chat) {
this.chat = chat;
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
}
3.配置web.xml
web.xml中加入如下代码:
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>
org.apache.struts.action.ActionServlet
</servlet-class>
<init-param>
<param-name>config</param-name>
<param-value>
/WEB-INF/conf/struts/struts-config.xml
</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>3</param-value>
</init-param>
<init-param>
<param-name>detail</param-name>
<param-value>3</param-value>
</init-param>
<load-on-startup>0</load-on-startup>
</servlet>
<servlet>
<servlet-name>DjnServlet</servlet-name>
<servlet-class>
com.softwarementors.extjs.djn.servlet.DirectJNgineServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>minify</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>providersUrl</param-name>
<param-value>djn/directprovider</param-value>
</init-param>
<init-param>
<param-name>batchRequestsMultithreadingEnabled</param-name>
<param-value>false</param-value>
</init-param>
<!-- api域: 对应下面的各个param-name的前缀,可以设置多个不同的域 在value中逗号隔开-->
<init-param>
<param-name>apis</param-name>
<param-value>test</param-value>
</init-param>
<!-- test.对应上面的域 test/用来安放其自动生成的js文件 -->
<init-param>
<param-name>test.apiFile</param-name>
<param-value>test/test.js</param-value>
</init-param>
<!-- test.对应上面的域 命名空间会在页面加载时候用上 -->
<init-param>
<param-name>test.apiNamespace</param-name>
<param-value>Ext.xuyi</param-value>
</init-param>
<!-- test.对应上面的域 类的具体包路径 -->
<init-param>
<param-name>test.classes</param-name>
<param-value>com.xuyi.web.direct.TestDirect</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 默认servlet路径 -->
<servlet-mapping>
<servlet-name>DjnServlet</servlet-name>
<url-pattern>/djn/directprovider/*</url-pattern>
</servlet-mapping>
4.test_direct_polling_1.jsp(适当用了一下jquery.js,哎,割舍不掉啊,毕竟jquery的写法要比ext core简便很多)
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ext3 Direct polling功能示例</title>
<script type="text/javascript" src="${ctxPath }/scripts/jquery.js"></script>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="${ctxPath}/test/test.js"></script>
</head>
<body>
<script type="text/javascript">
var html="";
var params={};
//如果namespace相同,那么多个相同namespace下面的方法只需要addProvider一次即可
Ext.Direct.addProvider(
Ext.xuyi.REMOTING_API,
{
id: 'poll',
type:'polling',
url:Ext.xuyi.POLLING_URLS.message,
baseParams:{'polling_date':new Date()},
interval: 500
}
);
Ext.Direct.on('message',function(e){
if(html=="<p>"+e.data+"</p>"){
return;
}else{
html="<p>"+e.data+"</p>"
}
$('#main').html(html);
$('#hid').hide();
$('#sub').show();
});
function addChat(){
/*使用此方法可以单独设置polling间隔时间
var dp = Ext.Direct.getProvider('poll');
dp.disconnect();
dp.connect.defer(2000, dp);
*/
params = {'user':$('#user').val(),'chat':$('#chat').val()};
if($.trim($('#user').val())!=''){
$('#sub').hide();
$('#hid').show();
TestDirect.chat(params,function(data){});
}
}
</script>
<div id="main"></div>
聊天:<br/><br/>
<div id="sub">
用户名:<input type="text" id="user" name="user"><br/><br/>
内容:<input type="text" id="chat" name="chat"><br/><br/><input type="submit" value="提交" οnclick="addChat();">
</div>
<div id="hid" style="display:none">
提交中...请稍后...
</div>
</body>
</html>
5.好了你可以多开几个网页互相对话了,效果见附图!