APE(Ajax Push Engine)示例

gavin

浏览: 83498 次
性别:

最近访客更多访客>>

ztcwh

windmark

forever_u

likaiming163

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (22)

社区版块

存档分类

Ajax JSF Socket nginx json

网站上介绍APE，支持多种方式Push，支持的并发高，还开源，所以试用看看。示例场景：

FeedServer：每两秒产一次数据，并发给所有连接的客户端
APEserver：作为客户端连到FeedServer，作为服务器把接到的数据发送到浏览器
应用页面：发布在nginx上，建立浏览器到APEserver的长连接

产生模拟数据的FeedServer以java实现，会监听8080端口，有客户端连上来，就隔两秒给它发一次数据，数据是json格式。
{"symbol":"CVX","name":"Chevron Corp New","low":58,"high":62,"open":58,"last":62,,"date":"2009-12-28 14:33:33"}
代码是分别把开源的netty和blazeds的例子改一下得来的，运行主程序类EchoServer。代码下载

APE可以用js写扩展模块，这里用js创建socket连接到FeedServer，代码如下：

var socket;
//创建一个新命令用于测试，页面将发送'getst'命令
Ape.registerCmd('getst', true, function(params, infos) {
	
	var chan = Ape.getChannelByPubid(params.pipe); //得到用户的Channel
	if(socket) {//已经开始写了就退出
		socket.write("already exsit.\n");//可以从FeedServer控制台看到发送的内容
		return;
	}
	//建立到FeedServer的连接
	[b]socket = new Ape.sockClient(8080, "192.168.0.1", {flushlf: true});[/b]
	socket.onConnect = function() {
		Ape.log("We are connected !");
		socket.write("ape say Hello\n");
	}
	//接收FeedServer发送的数据
	socket.onRead = function(data) {
		Ape.log("Data : " + data);
		if (chan) {
			//向Channel里发送数据，所有join用户都能收到
			chan.pipe.sendRaw('CUSTOM_RAW', JSON.parse(data), {'from': 'sserver'}); 
		} else {
			return ['109', 'UNKNOWN_PIPE'];
		}
	}
	socket.onDisconnect = function() {
		Ape.log("Gone !");
	}
	return 1;
});

如果不想建立一个新js文件，可以把它放在ape自带示例move.js文件里。如果是用deb包安装的，文件在/var/ape/examples目录下。

示例页面放到/usr/local/nginx/html/ape-jsf/demos目录下：

<html>
    <head>  
        <!-- Load APE Client -->
	<script type="text/javaScript" src="../Clients/mootools-core.js"></script>
	<script type="text/javaScript" src="../Clients/MooTools.js"></script>
	<script type="text/javaScript" src="config.js"></script>
    </head> 
    <body>
	<div id="sp" width="100%"></div>
        <script type="text/javaScript">
            var client = new APE.Client(); 
            client.load(); 
            client.addEvent('load', function() {
                client.core.start({"name":prompt('Your name?')});
            }); 
            // Listen to the ready event to know when your client is connected
            client.addEvent('ready', function() {
                console.log('Your client is now connected');
                //1) join 'testChannel'
                client.core.join('testChannel'); 
                //2) Intercept multiPipeCreate event
                client.addEvent('multiPipeCreate', function(pipe, options) {
                //3) Send the message on the pipe
                pipe.send('Hello world!');
		//发关命令
		pipe.request.send('getst', {'pipe': 'testChannel'});
                    console.log('Sending Hello world');
                }); 
                //接收数据
                client.onRaw('CUSTOM_RAW', function(raw, pipe) {
					var cell1=document.getElementById("sp");
					cell1.innerHTML=JSON.stringify(raw.data);
                });
            });
    </body>
</html>

正常的话，浏览页面可以看到json格式的数据在不断变化。可以测试下APE.Config.transport = 1; 记得改了js要清浏览器缓存。IE不支持XHRStreaming，服务器端js对象的API没有详细文档，不想继续测试别的功能了，以后有机会再说吧。

参考：
http://ape-test.local/ape-jsf/Tools/Check/检查APE是否正常工作，可能需要以下内容。
nginx加上：
location ^~ /ape-jsf/Clients/MooTools.js {
            root   html;
            error_page 405 =200 /ape-jsf/Clients/MooTools.js;
}
location ^~ /ape-jsf/Demos/config.js {
            root   html;
            error_page 405 =200 /ape-jsf/Demos/config.js;
}
location ^~ /ape-jsf/Source/Core/APE.js {
            root   html;
            error_page 405 =200 /ape-jsf/Source/Core/APE.js;
}
APE本机测试配置config.js:
APE.Config.baseUrl = 'http://ape-test.local/ape-jsf'; //APE JSF
APE.Config.domain = 'auto';
APE.Config.server = 'ape.ape-test.local:6969'; //APE server URL
本机hosts文件
192.168.0.6 ape-test.local
192.168.0.6 ape.ape-test.local
192.168.0.6 0.ape.ape-test.local
192.168.0.6 1.ape.ape-test.local
......开的浏览窗口越多要配的越多