Jackin up .js with jabber, nginx, jsjac and ejabberd

Dear, dear friends:

I wish to tell you of a great opportunity, yes yes! A simple way to have the users of your site jabber away at each other night and day. Lets introduce the players.

This is our hero, bobo wewo. Bobo would really like to get his users chatting on his site, just the usual chatter about the wewo community that happens around the water cooler at work, but Bobo is of a mind that there should be a web site where people can talk about wewo things. This is were we come in.

Ejabberd

Lucky for us, bobo already has a copy of Ejabberd running. Ejabberd is an excellent XMPP server written in erlang. Erlang is also excellent. All of this is excellent. But we need one more thing to glue this all together.

Ejabberd implements an extension to XMPP called “BOSH”. Bosh stands for “Bidirectional-streams Over Synchronous HTTP”, and if you want all the gory details, you can read yourself silly right here. Traditional ‘Ajax’ requests are asynchronous by definition, but in our case, we’re going to use jsjac to open an request that doesn’t close right away, or even send data right away.

To accomplish this magical feat, we tell bobo’s ejabberd server to enable the http_bind module.

Also double check to make sure that the http_bind module is being loaded when you start Ejabberd.

Proxying requests to the ejabberd server.

If you’ve read my other lewd exploits, you’ll recall fondly that we’ve spoken at length on the subject of browser security policies and how to trip lightly around their jackboots. To accomplish our wewo-talking, we’ll need to proxy requests to the ejabberd server using a webserver. Even though the servers are on the same box, they still need to be proxied because they are on different ports. Here are the config files to do this with apache or nginx.

JSJac

Oh yes, you’ll need JSJac. JSJac makes it very easy to manage connecting to a server, sending presence messages, and other message types. Speaking of which, why don’t we do just that?

Once you have jsjac installed in your page, it’s a simple matter to get it connected:

First, we create an object literal to house the settings for the connection, pull our username and password from the html form we’ll use, and create a JSJaCHttpBindingConnection. We also want to bind important events for the client to respond with, mainly messages, connection status and errors.

Next, we construct a presence message, bound for a multi-user-chat room called #wewo. Presence messages are love notes to the XMPP server that in this case, tell it that we wish to join our pea-shaped peers in the chatroom.

After doing so, our chatroom is ready to convey our messages to the rest of the wewo clan regarding last night’s episode of ‘fresh boss’. To send a message to the server, we once again leverage our friend jsjac to do so. We set our message recipient to #wewo@conference.example.com/whoahbot, which tells the chatroom that this is a message from whoahbot, to the chatroom. We set the body of the message, and lastly change the type of the message to ‘groupchat’.

Debugging

I found it most useful to use PSI when debugging, since you can easily see which xml stanzas are being exchanged by you and the server.

Fin

Lads lords and ladies, I do hope that is enough information about xmpp and jsjac to get you started, and enough information about wewo culture to last you a lifetime. Until next time,
Here is the skeleton of the app we’ve been working on. Bobo still hasn’t paid, so I didn’t style it.

If you are going to use xmpp, might I make you highly suggestible with some sodium pentathol and SUGGEST that you purchase the most excellent screencast on the topic by the topfunky himself: XMPP/Jabber with Ruby. Topfunky is so cool, he chose pink and black for his site and I’m ever so jealous.