Ch 6: Contacts always showing as offline

tiracu · #1 (**permalink**) September 16th, 2010, 11:50 AM

So far I'm to the point where Gab is supposed to display and update your contacts list and let you add new contacts. However, all contacts always show as offline.

It looks to me as though the contact is orginally created with the 'offline' class in the following code:

Code:

var contact = $("<li id='" + jid_id + "'>" +
                        "<div class='roster-contact offline'>" +
                        "<div class='roster-name'>" +
                        name +
                        "</div><div class='roster-jid'>" +
                        jid +
                        "</div></div></li>");

Then that class is never getting removed or changed, even though it should be.

Full gab.js:

Code:

var Gab = {
    connection: null,
    
    pending_subscriber: null,
    
    on_roster: function (iq) {
        $(iq).find('item').each(function () {
            var jid = $(this).attr('jid');
            var name = $(this).attr('name') || jid;

            // transform jid into an id
            var jid_id = Gab.jid_to_id(jid);

            var contact = $("<li id='" + jid_id + "'>" +
                        "<div class='roster-contact offline'>" +
                        "<div class='roster-name'>" +
                        name +
                        "</div><div class='roster-jid'>" +
                        jid +
                        "</div></div></li>");
            
            Gab.insert_contact(contact);
        });
        
        // set up presence handler and send initial presence
        Gab.connection.addHandler(Gab.on_presence, null, "presence");
        Gab.connection.send($pres());
    },
    
    on_presence: function (presence) {
        var ptype = $(presence).attr('type');
        var from = $(presence).attr('from');
        
        if (ptype === 'subscribe') {
            // populate pending_subscriber, the approve-jid span, and
            // open the dialog
            Gab.pending_subscriber = from;
            
            $('#approve-jid').text(Strophe.getBareJidFromJid(from));
            $('#approve_dialog').dialog('open');
        } else if (ptype !== 'error') {
            var contact = $('#roster-area li#' + Gab.jid_to_id(from) + '.roster-contact')
                            .removeClass("online")
                            .removeClass("away")
                            .removeClass("offline");
            if (ptype === 'unavailable') {
                contact.addClass("offline");
            } else {
                var show = $(presence).find("show").text();
                if (show === "" || show === "chat") {
                    contact.addClass("online");
                } else {
                    contact.addClass("away");
                }
            }
            var li = contact.parent();
            li.remove();
            Gab.insert_contact(li);
        }
        return true;
    },
    
    jid_to_id: function (jid) {
        return Strophe.getBareJidFromJid(jid)
        .replace("@", "-")
        .replace(".", "-");
    },
    
    presence_value: function (elem) {
        if (elem.hasClass('online')) {
            return 2;
        } else if (elem.hasClass('away')) {
            return 1;
        }
        return 0;
    },

    on_roster_changed: function (iq) {
        $(iq).find('item').each(function () {
            var sub = $(this).attr('subscription');
            var jid = $(this).attr('jid');
            var name = $(this).attr('name') || jid;
            var jid_id = Gab.jid_to_id(jid);
            if (sub === 'remove') {
                // contact is being removed
                $('#' + jid_id).remove();
            } else {
                // contact is being added or modified
                var contact_html = "<li id='" + jid_id + "'>" +
                "<div class='" +
                ($('#' + jid_id).attr('class') || "roster-contact offline") +
                "'>" +
                "<div class=’roster-name’>" +
                name +
                "</div><div class=’roster-jid’>" +
                jid +
                "</div></div></li>";
                if ($('#' + jid_id).length > 0) {
                    $('#' + jid_id).replaceWith(contact_html);
                } else {
                    Gab.insert_contact(contact_html);
                }
            }
        });
        return true;
    },

    insert_contact: function (elem) {
        var jid = elem.find('.roster-jid').text();
        var pres = Gab.presence_value(elem.find('.roster-contact'));
        var contacts = $('#roster-area li');
        if (contacts.length > 0) {
            var inserted = false;
            contacts.each(function () {
                var cmp_pres = Gab.presence_value($(this).find('.roster-contact'));
                var cmp_jid = $(this).find('.roster-jid').text();
                if (pres > cmp_pres) {
                    $(this).before(elem);
                    inserted = true;
                    return false;
                } else {
                    if (jid < cmp_jid) {
                        $(this).before(elem);
                        inserted = true;
                        return false;
                    }
                }
            });
            if (!inserted) {
                $('#roster-area ul').append(elem);
            }
        } else {
            $('#roster-area ul').append(elem);
        }
    }
};

$(document).ready(function () {
    $('#login_dialog').dialog({
        autoOpen: true,
        draggable: false,
        modal: true,
        title: 'Connect to XMPP',
        buttons: {
            "Connect": function () {
                $(document).trigger('connect', {
                    jid: $('#jid').val(),
                    password: $('#password').val()
                });
                $('#password').val('');
                $(this).dialog('close');
            }
        }
    });
    
    $('#contact_dialog').dialog({
        autoOpen: false,
        draggable: false,
        modal: true,
        title: 'Add a Contact',
        buttons: {
            "Add": function () {
                $(document).trigger('contact_added', {
                    jid: $('#contact-jid').val(),
                    name: $('#contact-name').val()
                });
            $('#contact-jid').val('');
            $('#contact-name').val('');
            $(this).dialog('close');
            }
        }
    });
    
    $('#new-contact').click(function (ev) {
        $('#contact_dialog').dialog('open');
    });
    
    $('#approve_dialog').dialog({
        autoOpen: false,
        draggable: false,
        modal: true,
        title: 'Subscription Request',
        buttons: {
            "Deny": function () {
                Gab.connection.send($pres({
                    to: Gab.pending_subscriber,
                    "type": "unsubscribed"}));
                Gab.pending_subscriber = null;
                $(this).dialog('close');
                },
            "Approve": function () {
                Gab.connection.send($pres({
                    to: Gab.pending_subscriber,
                    "type": "subscribed"}));
                
                Gab.connection.send($pres({
                    to: Gab.pending_subscriber,
                    "type": "subscribe"}));
                
                Gab.pending_subscriber = null;
                $(this).dialog('close');
            }
        }
    });

});

$(document).bind('connect', function (ev, data) {
    var conn = new Strophe.Connection('http://bosh.metajack.im:5280/xmpp-httpbind');
    conn.connect(data.jid, data.password, function (status) {
        if (status === Strophe.Status.CONNECTED) {
            $(document).trigger('connected');
        } else if (status === Strophe.Status.DISCONNECTED) {
            $(document).trigger('disconnected');
        }
    });
    Gab.connection = conn;
});

$(document).bind('connected', function () {
    var iq = $iq({type: 'get'}).c('query', {xmlns: 'jabber:iq:roster'});
    Gab.connection.sendIQ(iq, Gab.on_roster);
    
    Gab.connection.addHandler(Gab.on_roster_changed, "jabber:iq:roster", "iq", "set");
});

$(document).bind('disconnected', function () {
    // nothing here yet
});

$(document).bind('contact_added', function (ev, data) {
    var iq = $iq({type: "set"}).c("query", {xmlns: "jabber:iq:roster"}).c("item", data);
    Gab.connection.sendIQ(iq);
    var subscribe = $pres({to: data.jid, "type": "subscribe"});
    Gab.connection.send(subscribe);
});

metajack · #2 (**permalink**) September 16th, 2010, 12:07 PM

The original contact list is created with all contacts having the CSS class of "offline". However, if you look in the on_presence() handler, you'll notice that it removes this class and adds "online" or "away" or "offline" depending on the incoming presence status.

If you send me a debug log (take care to remove authorization section so as not to leak your password), I can see what is happening and why that code is not triggering properly.

Also, please try the latest version of the code, which can always be found at Github: http://github.com/metajack/profxmpp

Let me know if this helps or not.

tiracu · #3 (**permalink**) September 16th, 2010, 12:25 PM

Just figured out what was wrong. I was missing the space in ' .roster-contact', and didn't notice it until I used a comparison tool rather than just looking at the two files.

Need to download code?

Navigation