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

1.先写个JAVA类，如下：
Java代码

   1. package com.xuyi.web.direct; 
   2.  
   3. import java.text.SimpleDateFormat; 
   4. import java.util.Date; 
   5. import java.util.Map; 
   6. import org.apache.commons.lang.StringUtils; 
   7. import com.softwarementors.extjs.djn.config.annotations.DirectMethod; 
   8. import com.softwarementors.extjs.djn.config.annotations.DirectPollMethod; 
   9. import com.xuyi.vo.TestVO; 
  10. import com.xuyi.vo.User; 
  11.  
  12. /**
  13.  * @author xuyi
  14.  *
  15.  */ 
  16. public class TestDirect { 
  17.     static String chat_words=""; 
  18.      
  19.      
  20.     //注意注解 
  21.     @DirectMethod 
  22.     public String chat(TestVO vo){//这里可以直接使用对象来接收值了，恩，很方便的说 
  23.         String user = vo.getUser(); 
  24.         String chat = vo.getChat(); 
  25.         if(StringUtils.isNotBlank(user)){ 
  26.             chat_words = chat_words + "<p>用户 " + user + " 在 " + formatDate(new Date()) +" 说: " + chat +"</p>"; 
  27.         } 
  28.         return chat_words; 
  29.     } 
  30.      
  31.      
  32.     //direct polling注释 
  33.     @DirectPollMethod(event="message") 
  34.     public String chatRoom(Map<String,String> params){ 
  35.         //测试polling获得前台的传值 
  36.         System.out.println(params.get("polling_date")); 
  37.         return chat_words; 
  38.     } 
  39.      
  40.     private String formatDate(Date date){ 
  41.         SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); 
  42.         return sdf.format(date); 
  43.     } 
  44. } 

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
Java代码

   1. package com.xuyi.vo; 
   2.  
   3. /**
   4.  * @author xuyi
   5.  *
   6.  */ 
   7. public class TestVO { 
   8.      
   9.     private String user; 
  10.      
  11.     private String chat; 
  12.  
  13.     public String getChat() { 
  14.         return chat; 
  15.     } 
  16.  
  17.     public void setChat(String chat) { 
  18.         this.chat = chat; 
  19.     } 
  20.  
  21.     public String getUser() { 
  22.         return user; 
  23.     } 
  24.  
  25.     public void setUser(String user) { 
  26.         this.user = user; 
  27.     } 
  28.      
  29.      
  30.      
  31. } 

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中加入如下代码:
Xml代码

   1. <servlet> 
   2.         <servlet-name>action</servlet-name> 
   3.         <servlet-class> 
   4.             org.apache.struts.action.ActionServlet 
   5.         </servlet-class> 
   6.         <init-param> 
   7.             <param-name>config</param-name> 
   8.             <param-value> 
   9.                 /WEB-INF/conf/struts/struts-config.xml 
  10.             </param-value> 
  11.         </init-param> 
  12.         <init-param> 
  13.             <param-name>debug</param-name> 
  14.             <param-value>3</param-value> 
  15.         </init-param> 
  16.         <init-param> 
  17.             <param-name>detail</param-name> 
  18.             <param-value>3</param-value> 
  19.         </init-param> 
  20.         <load-on-startup>0</load-on-startup> 
  21.     </servlet> 
  22.  
  23.     <servlet> 
  24.         <servlet-name>DjnServlet</servlet-name> 
  25.         <servlet-class> 
  26.             com.softwarementors.extjs.djn.servlet.DirectJNgineServlet 
  27.         </servlet-class> 
  28.  
  29.         <init-param> 
  30.             <param-name>debug</param-name> 
  31.             <param-value>true</param-value> 
  32.         </init-param> 
  33.  
  34.         <init-param> 
  35.             <param-name>minify</param-name> 
  36.             <param-value>true</param-value> 
  37.         </init-param> 
  38.  
  39.         <init-param> 
  40.             <param-name>providersUrl</param-name> 
  41.             <param-value>djn/directprovider</param-value> 
  42.         </init-param> 
  43.  
  44.         <init-param> 
  45.             <param-name>batchRequestsMultithreadingEnabled</param-name> 
  46.             <param-value>false</param-value> 
  47.         </init-param> 
  48.  
  49.         <!-- api域： 对应下面的各个param-name的前缀，可以设置多个不同的域--> 
  50.         <init-param> 
  51.             <param-name>apis</param-name> 
  52.             <param-value>test</param-value> 
  53.         </init-param> 
  54.  
  55.         <!-- test.对应上面的域 test/用来安放其自动生成的js文件 --> 
  56.         <init-param> 
  57.             <param-name>test.apiFile</param-name> 
  58.             <param-value>test/test.js</param-value> 
  59.         </init-param> 
  60.  
  61.         <!-- test.对应上面的域 命名空间会在页面加载时候用上 --> 
  62.         <init-param> 
  63.             <param-name>test.apiNamespace</param-name> 
  64.             <param-value>Ext.xuyi</param-value> 
  65.         </init-param> 
  66.  
  67.         <!-- test.对应上面的域 类的具体包路径 --> 
  68.         <init-param> 
  69.             <param-name>test.classes</param-name> 
  70.             <param-value>com.xuyi.web.direct.TestDirect</param-value> 
  71.         </init-param> 
  72.  
  73.         <load-on-startup>1</load-on-startup> 
  74.     </servlet> 
  75.     <!-- 默认servlet路径 --> 
  76.     <servlet-mapping> 
  77.         <servlet-name>DjnServlet</servlet-name> 
  78.         <url-pattern>/djn/directprovider/*</url-pattern> 
  79.     </servlet-mapping> 

<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的前缀，可以设置多个不同的域-->
<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简便很多)
Html代码

   1. <%@ page language="java" pageEncoding="UTF-8"%> 
   2. <html> 
   3.     <head> 
   4.         <title>Ext3 Direct polling功能示例</title> 
   5.             <script type="text/javascript" src="${ctxPath }/scripts/jquery.js"></script> 
   6.         <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-base.js"></script> 
   7.         <script type="text/javascript" src="${ctxPath }/scripts/ext/ext-all.js"></script> 
   8.         <script type="text/javascript" src="${ctxPath}/test/test.js"></script> 
   9.     </head> 
  10.     <body> 
  11.         <script type="text/javascript"> 
  12.          
  13.             var html=""; 
  14.              
  15.             var params={}; 
  16.              
  17.             // 如果namespace相同，那么多个相同namespace下面的方法只需要addProvider一次即可 
  18.             Ext.Direct.addProvider( 
  19.                 Ext.xuyi.REMOTING_API, 
  20.                 { 
  21.                     id: 'poll', 
  22.                     type:'polling', 
  23.                     url:Ext.xuyi.POLLING_URLS.message, 
  24.                     baseParams:{'polling_date':new Date()}, 
  25.                     interval: 500 
  26.                 } 
  27.             );   
  28.              
  29.                  
  30.              
  31.             Ext.Direct.on('message',function(e){ 
  32.                 if(html=="<p>"+e.data+"</p>"){ 
  33.                     return; 
  34.                 }else{ 
  35.                     html="<p>"+e.data+"</p>" 
  36.                 } 
  37.                 $('#main').html(html); 
  38.                 $('#hid').hide(); 
  39.                 $('#sub').show(); 
  40.             });  
  41.              
  42.             function addChat(){ 
  43.             /* 使用此方法可以单独设置polling间隔时间 
  44.                 var dp = Ext.Direct.getProvider('poll'); 
  45.                 dp.disconnect(); 
  46.                 dp.connect.defer(2000, dp); 
  47.             */ 
  48.                 params = {'user':$('#user').val(),'chat':$('#chat').val()}; 
  49.                 if($.trim($('#user').val())!=''){ 
  50.                     $('#sub').hide(); 
  51.                     $('#hid').show(); 
  52.                     TestDirect.chat(params,function(data){}); 
  53.                 } 
  54.             } 
  55.                  
  56.         </script> 
  57.          
  58.         <div id="main"></div> 
  59.          
  60.         聊天:<br/><br/> 
  61.         <div id="sub"> 
  62.         用户名:<input type="text" id="user" name="user"><br/><br/> 
  63.         内容:<input type="text" id="chat" name="chat"><br/><br/><input type="submit" value="提交" onclick="addChat();"> 
  64.         </div> 
  65.         <div id="hid" style="display:none"> 
  66.         提交中...请稍后... 
  67.         </div> 
  68.          
  69.          
  70.     </body> 
  71.      
  72.      
  73. </html>