EXT 3.x詳しいExt.Direct(二)---pollingを使って、簡単にウェブチャット機能を実現する
8115 ワード
Ext.Directのpolling機能はやはりパッケージ化されているのを見て、ホームページのチャットをして、あまり実用的ではありませんが、基本的に運用することができます.
コードを見てみましょう.
PS:具体的なExt.Directの配置はこちらでは紹介しませんが、詳しくは私が書いたEXT 3を参照してください.xは詳細解のExt.Direct(一)を用い,詳細である.
1.まずJAVA類を書きます.以下の通りです.
2.TestVO.java
3.webを構成する.xml
web.xmlには、次のコードが追加されます.
4.test_direct_polling_1.jsp(jquery.jsを適当に使いましたが、まあ、切り捨てられませんね.結局jqueryの書き方はext coreよりずっと簡単です)
5.はい、いくつかのページを開いてお互いに会話することができます.効果は図面を参照してください.
コードを見てみましょう.
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.はい、いくつかのページを開いてお互いに会話することができます.効果は図面を参照してください.