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="提交" οnclick="addChat();">
64. </div>
65. <div id="hid" style="display:none">
66. 提交中...请稍后...
67. </div>
68.
69.
70. </body>
71.
72.
73. </html>