Handling presence in Strophe.js-based chat application

Question

Is there any existing solution which provides the presence handling for chat app based on Strophe.js?

I have simple chat application based on Strophe.js. I'd like to show only the users who are online and dynamicaly alter the list. I was wondering whether there is any existing solution (possibly Strophe plugin) which handles this. If there's no such thing, what's the best/simplest way to implement it?

Answer 1

By using Strophe, you can just send an IQ to your server that asks for your roster list like so:

iq = $iq({type: 'get'}).c('query', {xmlns: 'jabber:iq:roster'});
App.connection.sendIQ(iq, your_roster_callback_function);

This would query your server for your rosters and would return an object containing your roster list. You can then iterate through your rosters like:

your_roster_callback_function(iq){
  $(iq).find('item').each(function(){
    var jid = $(this).attr('jid'); // The jabber_id of your contact
    // You can probably put them in a unordered list and and use their jids as ids.
  });
  App.connection.addHandler(App.on_presence, null, "presence");
  App.connection.send($pres());
}

Notice that I added an on_presence callback and connection.send($pres()). It's purpose is so that you can get updates from your contacts if ever their presence change. Your presence callback will then look like this:

on_presence(presence){
  var presence_type = $(presence).attr('type'); // unavailable, subscribed, etc...
  var from = $(presence).attr('from'); // the jabber_id of the contact
  if (presence_type != 'error'){
    if (presence_type === 'unavailable'){
      // Mark contact as offline
    }else{
      var show = $(presence).find("show").text(); // this is what gives away, dnd, etc.
      if (show === 'chat' || show === ''){
        // Mark contact as online
      }else{
        // etc...
      }
    }
  }
  return true;
}

You can check the Strophe.js documentation for more information. With sendIQ you can add more parameters like error callbacks, etc.

Hope this helps!

Edit:

Forgive me, I made a mistake. $(presence).attr('type') doesn't give you if the contact is online or not but it gives you the presence type. The presence type is actually the signal that tells you if a contact if it is unavailable or if you are subscribed, unsubscribed, etc to your contact.

In the XMPP Documentation:

2.2.1. Types of Presence

The 'type' attribute of a presence stanza is OPTIONAL. A presence stanza that does not possess a 'type' attribute is used to signal to the server that the sender is online and available for communication. If included, the 'type' attribute specifies a lack of availability, a request to manage a subscription to another entity's presence, a request for another entity's current presence, or an error related to a previously-sent presence stanza. If included, the 'type' attribute MUST have one of the following values:

• unavailable -- Signals that the entity is no longer available for communication.
• subscribe -- The sender wishes to subscribe to the recipient's presence.
• subscribed -- The sender has allowed the recipient to receive their presence.
• unsubscribe -- The sender is unsubscribing from another entity's presence.
• unsubscribed -- The subscription request has been denied or a previously-granted subscription has been cancelled. etc...

It is $(presence).find("show") gives you the status of your contact. From the docs:

2.2.2.1. Show

The OPTIONAL element contains non-human-readable XML character data that specifies the particular availability status of an entity or specific resource. A presence stanza MUST NOT contain more than one element. The element MUST NOT possess any attributes. If provided, the XML character data value MUST be one of the following (additional availability types could be defined through a properly-namespaced child element of the presence stanza):

• away -- The entity or resource is temporarily away.
• chat -- The entity or resource is actively interested in chatting.
• dnd -- The entity or resource is busy (dnd = "Do Not Disturb").
• xa -- The entity or resource is away for an extended period (xa = "eXtended Away").

If no show element is provided, the entity is assumed to be online and available.

Answer 2

One important thing to note, is that as Is it right that Strophe.addHandler reads only first node from response? said, If you want to read more than just the first presence node, make sure to return true at the end, because: "The handler should return true if it is to be invoked again; returning false will remove the handler after it returns."

So the solution I used should look something like this:

on_presence(presence){
   var presence_type = $(presence).attr('type'); // unavailable, subscribed, etc...
   var from = $(presence).attr('from'); // the jabber_id of the contact
   if (presence_type != 'error'){
     if (presence_type === 'unavailable'){
        // Mark contact as offline
     }else{
       var show = $(presence).find("show").text(); // this is what gives away, dnd, etc.
       if (show === 'chat' || show === ''){
         // Mark contact as online
       }else{
         // etc...
       }
     }
   }
   //RETURN TRUE!!!!!!!!!
   return true;
}