Professional XMPP Programming with JavaScript and JQuery

Jack Moffitt

Mentioned 5

Provides information on using XMPP to build applications or add new features to current applications, covering such topics as the debugging console, the identica client, service discovery, event handling, and plugins.

More on

Mentioned in questions and answers.

Has anyone written an open source XMPP library that uses WebSockets and is meant to be run by a browser?

There's a book coming soon that covers this topic...

Professional XMPP with JavaScript and jQuery alt text

But I'm assuming you don't want to wait for the book. So watch the Jack Moffitt's presentation from JSConf. I watched it this morning. (Jack Moffitt is the author of the book linked to above.)

The library involved (JavaScript and C implementations) is Strophe.

This is a very fruitful area of exploration, but very raw. We'll see more soon. WebSockets come with HTML5, is that right?

I'm not sure how to phrase it the best way, but what I'm looking for is a way to display data on a web page as it becomes available. Examples: Displaying IRC channel messages on a web page, as a message is sent to an IRC channel, the message is outputted to the web page at the same time (or with very little delay). Or when data is inserted into database, it is outputted to a web page at the same time (again, or with very little delay). How is such a feature implemented? Can such a feature be implemented with JS/JQuery? I'm assuming yes since that's how Mibbit seems to work (AJAX). An example or pseudo-code explanation would be appreciated since I have absolutely no idea where to even start and what I need.

I'm currently developing an app in facebook which has a list of friends of the user logged in and shows their online presence. To get this, I used the following FQL query:

SELECT name,uid, online_presence FROM user WHERE online_presence IN ('active', 'idle') AND uid IN ( SELECT uid2 FROM friend WHERE uid1 = me())

friends_online_presence is an extended permission and returns the Facebook Chat status (a string, one of active, idle, offline or error).

My question is how can I get a real-time update of online-presence change by my friends?

Option 1: Query the Facebook API periodically, in a background process
Option 2: Hook into XMPP to get real-time updates ( an answer from duplicate question below).

People have asked this question before here too, here are some duplicates(unsolved):
facebook-api-real-time-friends-online-presence-update &

I wanted to know if someone has solved the problem and if yes, how did you solve it.

It'd be great if you could elaborate a bit about the Option 2 (using XMPP/Jabber), because I feel periodically querying would suffice for only a while, when the user count is less.

The best way is to use XMPP.

For integrating facebook chat via XMPP, I think the best way in Rails would be

  1. Rails + StropheJS
  2. In addition to this, you could include something like ember.js (but that's not a necessity)

Overall, the system would look like

StropheJS (client side JS) ----> XMPP BOSH Manager (eJabberd / Punjab) ----> Facebook Servers

In addition to all this, if you are new to XMPP then the book "Professional XMPP Programming with JavaScript and jQuery" is worth a read and has lots of examples with strophejs

I am building a chat feature inside a website, something like stackoverflow chat but simpler, are there any best practices or standards I need to follow while creating this feature using MVC .net and javascript? are there any articles documents or books talked about this in details?

I'd definitely take a look at XMPP. There are pleanty of XMPP servers already available Tigase (Java), Ejabberd (Erlang), etc., which will get you up and going pretty quickly.

There is an XMPP spec for multi-user chats (MUC) which both Tigase and Ejabberd have implemented.

There is a JavaScript library for XMPP called Strophe ( which you might find interesting as well. Strophe was used to write Speeqe ( as well. (demo:

Since XMPP has been around for so long (used to be known as Jabber) there are ton of great books as well including one that talks about using Strophe ( - written by the creator of ChessPark)

I'm wanting to create a web app where people can collaborate with a specified image.

For example, if you take a look at this basketball app

I'm envisioning something similar where people can log in, draw plays etc, I want updates to happen in real time, so that other people logged in as a team see what others are 'drawing'.

I was thinking of extending a html canvas drawing app and adding network communication, but I'm not sure where to start looking.

My question is - What technologies should I be looking at for pushing the data out to the users? Does anyone have suggestions?

XMPP might be something to look into. A great book about interacting with XMPP servers from the browser is Professional XMPP Programming With JavaScript and jQuery.

It's a pretty soft introduction and I think there might even be a chapter in there that covers implementing something similar.