Creating a Comet application using Ajax Push Engine

Introduction

In this article, I want to share the experience of building a real-time Web application. I will not delve into the theory, since the technology reviews have already been on Habré, and there is no problem finding them on the network if you want to. I propose to do directly practice.

Comet

The Comet model allows you to create asynchronous Web applications that respond to data that comes from the server in real time. In this case, its implementation uses the Long-polling technology on the Ajax Push Engine (APE) framework. The essence of the technology is that the browser connects to the server and waits until data appears. As soon as they appear, the client accepts them and connects again. If no data is received, the connection is broken after a timeout and re-established.

Ape

APE is an open source software package designed for Ajax Push. The system includes a web server and Javascript Framework. APE allows you to transfer to the browser any data in real time without any additional applications on the client side. According to the creators of the free to withstand the load of 100,000 connections.
')

Installation and Setup

Installing and configuring the server did not cause any problems. At once I want to say that in this example installation on a working Web server with CentOS 5 on board is considered. Depending on the goals and platform, the implementation, of course, will be different. If the server is used for testing and working on localhost, an example of quick setup is given in the official documentation.



It all starts, of course with the installation. Here, too, no problems should arise. On the official website published various types of packages, as well as the source. We swing and set.
Next, you need to prepare a configuration file and specify the APE server with which interface to work.
In the Server section of the /etc/ape/ape.conf file, you must specify the port and interface to be listened to.

port = 6969
ip_listen = 69.65.59.1

Do not forget to open the port to the outside world:

# iptables -I INPUT -p tcp --dport 9696 -j ACCEPT

And run the Comet server:

# /usr/bin/aped --cfg /etc/ape/ape.conf

The APE daemon is running, but it's too early to use for its intended purpose. For the server to work correctly, you need to allocate your own subdomain and tweak the DNS settings a bit.
If you use cPanel or another similar panel, this is also not difficult.
In my case, a subdomain was created:

ape.matvey.co

Then a CNAME record for redirecting requests of the form * .ape.matvey.co to ape.matvey.co.

*.ape.matvey.co IN CNAME ape.matvey.co

Now the server is ready to communicate with clients.

First application

After that, you need to take from the official site JavaScript Framework and unpack it where you will be more convenient. In the file apeClientJS.js, you must specify the parameters for connecting to the server. In my case, it looked like this:

APE.Config.baseUrl = 'http://matvey.co/apps/ape_test/jsf'; //
APE.Config.domain = 'matvey.co'; //
APE.Config.server = 'ape.matvey.co:6969'; // APE-

As an illustration, I will provide a small application written in Python that will send simple text messages to clients using APE. Communication between the Python script and the daemon is via the http protocol and Inlinepush. More information about this is written in the official documentation.
So, first put your password in the Inlinepush config. You can also use the standard one, but for obvious reasons this is not recommended. It is usually located in '/etc/ape/inlinepush.conf'.
Then we write a small Python script (or whatever you prefer) that will transfer the necessary data to the ape server via port 6969. Contact for this is necessary to the localhost.

import urllib2
import json

server = 'http://127.0.0.1:6969/0/?'

cmd = [{'cmd': 'inlinepush',
'params': {
'password': 'inlinepass5923',
'raw': 'DATA',
'channel': 'testchannel',
'data': {
'msg': 'Hey ya!'
}
}
}]

url = server + urllib2.quote(json.dumps(cmd))
response = urllib2.urlopen(url)
print response.read()


After the launch should get something like this answer:

# python test_ape.cgi
[{"time":"1301331051","raw":"ERR","data":{"code":"401","value":"UNKNOWN_CHANNEL"}}]

The word ERR in this case means only that the channel is empty and is not used by anyone.
Now let's try to do something really working.
First, a simple page that will receive messages from the server.
Source page client:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" dir= "ltr" lang= "en" >
<head>
<!-- APE. JSF. -->
<script type= "text/javaScript" src= "/apps/ape_test/jsf/apeClientJS.js" ></script>
</head>
<body>
<script type= "text/javaScript" >
var client = new APE.Client();
// -- , ,
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz' .split( '' );
var str = '' ;
for ( var i = 0; i < length; i++) {str += chars[Math.floor(Math.random() * chars.length)];}
return str;
}
// --
function createDiv(vartext) {
var _body = document .getElementsByTagName( 'body' ) [0];
var _div = document .createElement( 'div' );
var _text = document .createTextNode(vartext)
_div.appendChild(_text);
_body.appendChild(_div);
}
client.load();
client.addEvent( 'load' , function () {
// -- , name 15 . :)
client.core.start({ "name" :randomString(15)});
});
client.addEvent( 'ready' , function () {
createDiv( "Connected" );
client.core.join( 'testchannel' );
client.addEvent( 'multiPipeCreate' , function (pipe, options) {
});
// -- . .
client.onRaw( 'data' , function (raw, pipe) {
createDiv( 'Receiving : ' + unescape(raw.data.msg));
});
});
</script>
</body>
</html>

* This source code was highlighted with Source Code Highlighter .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" dir= "ltr" lang= "en" >
<head>
<!-- APE. JSF. -->
<script type= "text/javaScript" src= "/apps/ape_test/jsf/apeClientJS.js" ></script>
</head>
<body>
<script type= "text/javaScript" >
var client = new APE.Client();
// -- , ,
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz' .split( '' );
var str = '' ;
for ( var i = 0; i < length; i++) {str += chars[Math.floor(Math.random() * chars.length)];}
return str;
}
// --
function createDiv(vartext) {
var _body = document .getElementsByTagName( 'body' ) [0];
var _div = document .createElement( 'div' );
var _text = document .createTextNode(vartext)
_div.appendChild(_text);
_body.appendChild(_div);
}
client.load();
client.addEvent( 'load' , function () {
// -- , name 15 . :)
client.core.start({ "name" :randomString(15)});
});
client.addEvent( 'ready' , function () {
createDiv( "Connected" );
client.core.join( 'testchannel' );
client.addEvent( 'multiPipeCreate' , function (pipe, options) {
});
// -- . .
client.onRaw( 'data' , function (raw, pipe) {
createDiv( 'Receiving : ' + unescape(raw.data.msg));
});
});
</script>
</body>
</html>

* This source code was highlighted with Source Code Highlighter .

Now we have an APE server, an application that transmits data to it via inlinepush and a client that receives these messages.
If you open the client page and run the script on the server, we get the following response:

[{"time":"1301340083","raw":"pushed","data":{"value":"ok"}}]

And the client will bring the cherished:

Receiving : Hey ya!

The result of running the script with different parameters is shown in the screenshot:



Now add an infinite loop to the script, a timeout for 10 seconds and run it in the background:

# python test_ape.cgi > /dev/null 2>& 1 &

Conclusion

The purpose of the article was to demonstrate to the reader on a living example that the Comet-model, being a fairly powerful tool, does not represent any difficulties in implementation.

The result of the work can be found here .
Every 10 seconds a message from the server should appear on the screen.

On this, perhaps, for now. In the next article, I think to write about a more serious and really working application.
I would be glad if the material will be useful to someone.

useful links

Comet - review article
APE official website