`
jsczxy2
  • 浏览: 1258553 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

EXT 3.x 使用详解之Ext.Direct(二)---polling,简单实现网页聊天功能

    博客分类：
  • ext
EXTServletjQueryJavaScriptStruts 
阅读更多

看了下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="提交" onclick="addChat();">
		</div>
		<div id="hid" style="display:none">
		提交中...请稍后...
		</div>
		
		
	</body>
	
	
</html>

 5.好了你可以多开几个网页互相对话了，效果见附图！

 

 

  • 大小: 114.5 KB
2
顶
3
踩
分享到：
| EXT 3.x 使用详解之Ext.Direct(一)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics