Return avatar upon loading roster

Openfire
1

Hello,
i’m trying to implement a chat on my website with ReactJS, Strophe and Openfire.
This is what I want to achieve:

image
image375×762 18.9 KB

As you can see it’s a list of contacts (the roster entries) with their pictures.
Here’s how i’m doing it currently

  //get contacts from roster
  connection.roster.init(connection);
  connection.roster.get(function (roster) {
    let payload = [];
    for (var i in roster) {
      payload.push({ id: roster[i].jid, name: roster[i].name, status: 'offline' });
    }
    store.dispatch(add(payload));
 
    // !!!! we need this only for the image
    for (var j in payload) {
      connection.vcard.get((vcard) => {
        let vCardObject = getVcardInformationObject(vcard, false);
        if (vCardObject) {
          store.dispatch(updateRosterEntry(vCardObject));
        }
      }, payload[j].id);
    }
  });

As you can see I load the roster and then for each roster entry I fetch the vcard information because the vcard information contains the PHOTO along with a lof of other information. I think this might be a performance problem when you have a lot of roster entries.

Is there a way that Openfire returns the photo information in the initial request? So that I wouldn’t call getVcardInformation on every roster entry?

2

I’m not sure what you’re suggesting, but I do not think that there’s a lot that Openfire can do here. There is the Avatar Resizer plugin for Openfire, which can be used to reduce the dimensions of an avatar (thus requiring less data to be translated), but that’s about it.

Perhaps you could consider optimizing the retrieval of data in your clients, for example:

  • only load avatars for users that are online
  • prioritize loading avatars for users that are currently showing on screen
  • cache avatars in local storage
3

Hi Guus,

when I get the roster here:

  connection.roster.get(function (roster) {
    let payload = [];
    for (var i in roster) {
      payload.push({ id: roster[i].jid, name: roster[i].name, status: 'offline' });
    }

it returs this object:

{
 ask: "subscribe"
 groups: []
 jid: "70e39b5b-7216-4347-8d42-e603ea9f6396@xps"
 name: "sin"
 resources: {}
 subscription: "none"
}

Not even the status (online/offline), nor the picture. So for every roster entry I am forced to make 2 more calls (1) get the online status 2) get the avatar picture). Is there a particular reason why Openfire doesn’t include the onlineStatus and avatarPicture in the response?