Usage with React Native

Miraj98 commented 3 years ago

I am using xmpp.js with React Native and I need some advice regarding its usage. I'll start by explaining the problem we are facing.

Problem: Messages are being dropped when client is not online

Possible reasons: Probably we are not doing stream management correctly or there is some server side issue regarding archiving of messages until the required client comes online

Problem in detail: Suppose client A and client B are online. Now client A kills the app. Client B sends a message almost immediately after. This message is not received by client A even when it comes online after sometime and reconnects with the server. Here is the error message logged on the server when the server tries to send the message

<message
  from="f2015601bitspilani@getassist.app/example"
  to="f20170635bitspilani@getassist.app/example"
  type="error"
  subtype="basic"
  id="1682d8c6-642c-51ff-8348-96b18a36c4a3"
  post_id="null"
  parent_id="null"
>
  <archived by="getassist.app" xmlns="urn:xmpp:mam:tmp" id="1604158623989067" />
  <stanza-id by="getassist.app" xmlns="urn:xmpp:sid:0" id="1604158623989067" />
  <body>Hello Rahul</body>
  <timestamp>2020-10-31T15:37:02.093Z</timestamp>
  <media height="0" width="0">
    null
  </media>
  <name>Miraj Shah</name>
  <email>f20170635@pilani.bits-pilani.ac.in</email>
  <profile_photo>
    https://d1umgnbodc8jf6.cloudfront.net/dp-folder/23cfb931fea3d7c55c4744fb3234156e77d7f2e862c6404df9186ba6b3f34424.jpg
  </profile_photo>
  <error code="503" type="cancel">
    <service-unavailable xmlns="urn:ietf:params:xml:ns:xmpp-stanzas" />
    <text xmlns="urn:ietf:params:xml:ns:xmpp-stanzas">
      User session terminated
    </text>
  </error>
</message>

Here is the connect logic on the client (React Native):

import {client} from '@xmpp/client';

import handlers from '../handlers';

let xmpp = {
  client: null,
};

function constructClient(username, password) {
  xmpp.client = client({
    service: 'wss://getassist.app:8090/websocket',
    domain: 'getassist.app',
    resource: 'example',
    username,
    password,
  });

  xmpp.client.on('online', handlers.onConnect);
  xmpp.client.on('stanza', handlers.onStanza);
  xmpp.client.on('error', handlers.onError);
  xmpp.client.on('offline', handlers.onOffline);
  xmpp.client.on('status', console.debug);
}

async function getClientOnline() {
  try {
    if (xmpp.client.status === 'online') {
      return;
    }
    await xmpp.client.start();
  } catch (e) {
    console.warn('Error getting client online:', e);
  }
}

export async function start(username, password) {
  constructClient(username, password);
  getClientOnline();
}

export default xmpp;

The connection is disconnected in App.js as follows:

function _App() {
  React.useEffect(() => {

    return () => {
      if (xmpp.client) {
        xmpp.client.stop();
      }
    };
  }, []);

  return (
    <>
      <StatusBar backgroundColor="#fff" barStyle="dark-content" />
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <Assist />
        </PersistGate>
      </Provider>
    </>
  );
}

sonnyp commented 3 years ago

This is unrelated to xmpp.js. Please seek help with the xmpp community. A few things you can try:

Send presence
Send the message to a bare jid, not full jid
Review your server configuration
Make your client enable message archive management if it's most assumed by the server

Miraj98 commented 3 years ago

Sure will try out the above suggestions and seek help from the xmpp community if problem is still unresolved. Just a quick question regarding the last suggestion. How to enable message archiving management on client? Do I need to set some configuration when calling client(...) in React Native?

xmppjs / xmpp.js

Usage with React Native #862