Example – Pushing events to an web app

by tkoski

This blog post is a quick walk-through of this demo.

The demo is very simple. When a web page is opened an anonymous XMPP connection is created. You can open another window and send events between the two anonymous connections.

The demo might look simple, but if you look deeper you will notice that when it comes to eventing and messaging, the possibilities to extend this example are amazing. Thanks to XMPP.

But let’s not praise XMPP more. Let’s get back to explain the demo instead.

The web page [1] is mostly done by using a very easy to use JavaScript library called Strophe. It is used to create long polling XMPP over BOSH requests to the XMPP server. The requests are proxied through an HTTP server [2]. The XMPP server will take care of session handling, routing and delivery [3].

The webclient communicates with the XMPP server through BOSH.

So what is needed?

Following technologies are used:

  • XMPP
  • HTTP
  • BOSH
  • JavaScript
  • (plus some HTML and CSS)

To get the demo working, I needed to install an XMPP server and an HTTP server.

I installed an XMPP server called Prosody (0.7) and an HTTP/reverse proxy -server called Nginx.

This demo is based 100% on standards so any other XMPP server that supports BOSH and any other HTTP server that supports reverse proxying can be used.

As mentioned earlier, an excellent JavaScript library called Strophe was uesd to create the functionality on the web browser.

The demo is running on Debian Lenny 5.0.7 but the technology used is of course not limited to it.

Step number one, let’s install Nginx

The following command was run as root. It installs Nginx server using the Apt utility:

$ apt-get install nginx

That was pretty easy. The next step was to configure it.

Since the demo is running in example1.madebymonsieur.com, I created an configuration file /etc/nginx/sites-enabled/example1.madebymonsieur.com. As you can see by opening the file, the configuration is very simple. Important is to notice the reverse proxy configuration for /http-bind/ location in the end of the file. That rule is done to route the BOSH traffic to the XMPP server.

To make the configuration effective, I restarted the Nginx server.

$ /etc/init.d/nginx restart

Next we’ll install the XMPP server

A good introduction and clear help how to install Prosody can be found here . However this is what I did (as root again) for the demo:

$ cd /usr/src/
$ wget "http://prosody.im/downloads/debian/prosody_0.7.0-1_i386.deb"
$ dpkg -i prosody_0.7.0-1_i386.deb
$ # I had some dependency problems so I just ran
$ sudo apt-get install -f

And XMPP server was up.

Now let’s configure it. (The final configuration file can be seen here.) Open /etc/prosody/prosody.cfg.lua file.

First we enabled “BOSH”. We archived this by uncommenting the line 56 (remove the ‘–’).

Next we configure the port we want BOSH connections to be listened on. Port 5280 is the standard one. We add “bosh_ports = { 5280 }” to the config before “VirtualHost” -parts. See example on line 103 of the example configuration file.

As a last step for the Prosody configuration file, we add virtual host configuration (example starts on line 109 in the configuration file).

VirtualHost "anon.example"
    anonymous_login = true
    disallow_s2s = false

We configured the host name to be “anon.example” and enabled anonymous connection for it. We don’t want to allow server-to-server connection for this domain so s2s is disallowed.

As I created a new hostname, I added it to the /etc/hosts file so it would be correctly resolved. To archive this I added a following line to my /etc/hosts file:

127.0.0.1 anon.example

Now we restart prosody and on we go:

$ /etc/init.d/prosody restart

One last step to do

I copied the index.html, strophe.min.js, example.js files to web root. For this example the root was /var/wwww/examples/example1 . Listing of the directory looks like this:

$ ls -laF /var/www/examples/example1/
-rw-r--r-- 1 www-data www-data   3967 2010-08-14 01:04 example.js
-rw-r--r-- 1 www-data www-data   2576 2010-08-14 00:22 index.html
-rw-r--r-- 1 www-data www-data  40107 2010-08-14 00:18 strophe.min.js

Ready!

That’s it. If you are interested how the JavaScript code works, open the example.js -file. It should be pretty simple (just 5 functions). Most of the “code” is just comments and “jquery -stuff” for nicer display.

Remember that this was just a very simple example how straight forward it is to push events to an web browser. Since we use XMPP here, it would be quite trivial to send messages to the demo for example from gTalk or launch any kind of events from other systems and visa verse.

In case of any questions, problems or ideas, don’t hesitate to contact me. I would be delighted to help out more or just discuss about the possibilities of this kind of technology.

Cheers,
tuomas@madebymonsieur.com