New demo system for XMPP-FTW

By , Sunday 10th March 2013 6:39 pm

Originally seen on http://awesome-wildlife.blogspot.co.uk/2009/12/aardvark.html

I’ve spent most of the day writing a new demo system for XMPP-FTW and despite it looking ugly as sin (I am no god with design) I’m quite pleased with how it works, so I thought I’d write up a little piece about it…

Background

XMPP-FTW is a piece of code which is deigned to run near your XMPP server and perform on-the-fly translations between the XML of XMPP and the web-developer friendly world of JSON.  The goal of the project is to make using XMPP on the client (although there’s no reason the client can’t be on a server too) as easy as possible.

The name XMPP-FTW is a play on ‘For The Win’ but is actually ‘For The Web’.

XMPP-FTW is written using nodejs with socket.io handling the client/server communications. There is no reason something like engine.io couldn’t be swapped in for more reliable communications (in fact you have to give XMPP-FTW the connection to play with on startup).

I haven’t written up a post yet about how it works so I’ll do that next and update the comments with a link to the post. A post about XMPP-FTW is now available.  Right now I want to talk about the demo client as I think its useful outside of this project too.

I originally had a chat  demo client for the project but this was getting too cumbersome to maintain with new features and eventually it wouldn’t be able to cover all of the features anyway.  Therefore I began to think up a new client demo…

 

Manual

I’ve been very careful to keep the manual ahead of any code that I’ve written for this project. In fact I’ve been doing something I’ve been referring to MDD or Manual Driven Development. I’ve been writing the manual for the project before writing the code for it.

I’ve also been a very bad developer up until now and not doing TDD/writing unit tests, as usual this was a hacky proof of concept that really worked well and got built out very quickly  – adding tests is coming up very soon (please feel free to help!).

 

Pre-tags

The manual for XMPP-FTW is a very drab affair, but I’ve been very consistent throughout with incoming and outgoing messages being contained within a <pre> tag with classes of ‘in’ and ‘out’ respectively, e.g.

<pre class="out">
socket.emit(
    'xmpp.login',
    { 
        "jid": "test@example.com",
        "password": "password",
      [ "resource": "xmpp-ftw", ]
      [ "host": "127.0.0.1" ]
    }
)
</pre>

I realised that by slightly abusing HTML I could write manual that would allow me to generate an ‘always up to date’ demo client without making any changes.

In addition to my ‘in’ and ‘out’ classes I added a class of ‘callback’ where my messages had return data and additionally added an attribute of ‘message’ with the socket.io event name.

 

Parse out listeners

On loading the demo client  an ajax call is made back to the manual page which, after parsing using jQuery searches for all of the <pre> tags with a class of in, these are added to an array and then added to the list of listeners for socket.io:

incoming.forEach(function(message) {
    socket.on(message, function(data) {
        addMessage(message, 'in', data, false)
    })	
})

Now as I add additional incoming expected message events the demo client will automatically hook on and present to the user.

 

Parse out messages and examples

The next step was to hook onto my outgoing messages. Here I wanted to use an autocomplete to give users a list of the possible messages, but also to populate the socket.io payload with the example data provided in the manual. This was easily achieved with some array splitting/joining and some trimming of strings, again here being consistent in the manual and code made things easier.

Lastly I had to handle callbacks as some of the messages have the following setup:

socket.emit(
    'xmpp.roster.get',
    {},
    function(error, data) { console.log(error, data) }
)

When adding messages to the DOM I simply stored an `id` for the parent element and passed this back to the ‘outgoing’ message function. When a manual entry had the classes of ‘out’ and ‘callback’ rather than just socket.emit(event, payload) I used a callback that could be used to update the DOM once the response came back.

 

Summary

Whilst rather simple (and simple is good) I think this demo client is a pretty powerful demonstrator for how easy it is to use XMPP via JSON. Possible messages are auto-completed and example messages are dropped into the payload area for deelopers to quickly edit and use.

There’s no reason why the code can’t be taken and applied to any project which uses a socket.io interface and follows the manual formatting rules. It should help any web developer quickly become accustomed to the socket-based API of any project.

I’m still building out XMPP-FTW but have much of the basics in place for using XMPP in the browser. Please give it a go, provide (constructive) feedback, and maybe make some pull requests PaaS.

The code lives on github.

One Response to “New demo system for XMPP-FTW”

  1. [...] I’ve written a separate blog post about this and you can find it at “New demo system for XMPP-FTW“. [...]

Leave a Reply

You must be logged in to post a comment.

Panorama Theme by Themocracy

4 visitors online now
1 guests, 3 bots, 0 members
Max visitors today: 7 at 02:39 am UTC
This month: 17 at 28-09-2014 11:10 pm UTC
This year: 79 at 09-06-2014 07:22 pm UTC
All time: 130 at 28-03-2011 10:40 pm UTC