​
Before you begin

  1. Register a QuickBlox account. This is a matter of a few minutes and you will be able to use this account to build your apps.
  2. Configure QuickBlox SDK for your app. Check out Setup page for more details.
  3. Create a user session to be able to use QuickBlox functionality. See Authentication page to learn how to do it.

Visit Key Concepts page to learn the most important QuickBlox concepts.

​
Connect to Chat server

To connect to Chat server use the code snippet below.

JavaScript
const chatConnectParams = {
  userId: 12345,
  password: 'passw0rd!'
};

QB.chat
  .connect(chatConnectParams)
  .then(function () {
    // connected successfully
  })
  .catch(function (e) {
    // some error occurred
  });

​
Subscribe to connection state

Subscribe to the connection state changes using the following code snippet.

JavaScript
import { NativeEventEmitter } from 'react-native'
import QB from 'quickblox-react-native-sdk'

const emitter = new NativeEventEmitter(QB.chat);

const QBConnectionEvents = [
  QB.chat.EVENT_TYPE.CONNECTED,
  QB.chat.EVENT_TYPE.CONNECTION_CLOSED,
  QB.chat.EVENT_TYPE.CONNECTION_CLOSED_ON_ERROR,
  QB.chat.EVENT_TYPE.RECONNECTION_FAILED,
  QB.chat.EVENT_TYPE.RECONNECTION_SUCCESSFUL,
]

QBConnectionEvents.forEach(eventName => {
  emitter.addListener(eventName, connectionEventHandler)
})

​
Check if connected to Chat server

Check the connection state using the following code snippet.

JavaScript
QB.chat
  .isConnected()
  .then(function (connected) { // boolean
    // handle as necessary, i.e.
    // if (connected === false) reconnect()
  })
  .catch(function (e) {
    // handle error
  });
Connection EventDescription
QB.chat.EVENT_TYPE.CONNECTEDFired when the connection to the QuickBlox server is established successfully.
QB.chat.EVENT_TYPE.CONNECTION_CLOSEDFired when the connection to the QuickBlox server is closed normally, typically by calling the disconnect method.
QB.chat.EVENT_TYPE.CONNECTION_CLOSED_ON_ERRORFired when the connection to the QuickBlox server is closed due to an error.
QB.chat.EVENT_TYPE.RECONNECTION_FAILEDFired when the reconnection attempt to the QuickBlox server fails.
QB.chat.EVENT_TYPE.RECONNECTION_SUCCESSFULFired when the reconnection attempt to the QuickBlox server is successful.

​
Check if connected to Chat server

Check the connection state using the following code snippet.

QB.chat
  .isConnected()
  .then(function (connected) { // boolean
    // handle as necessary, i.e.
    // if (connected === false) reconnect()
  })
  .catch(function (e) {
    // handle error
  });

​
Disconnect from Chat server

Disconnect from the Chat server using the snippet below.

JavaScript
QB.chat
  .disconnect()
  .then(function () {
    // disconnected successfully
  })
  .catch(function (e) {
    // handle error
  });

​
Enable auto-reconnect to Chat

The SDK reconnects automatically when the connection to the Chat server is lost. There is a way to disable it and then manage it manually.

JavaScript
const autoReconnectParams = { enable: false };

QB.settings
  .enableAutoReconnect(autoReconnectParams)
  .then(function () {
    // done
  })
  .catch(function (e) {
    // handle error
  });

​
Manage Chat connections

To provide a seamless chat experience, our SDK manages connections to the Chat server at an application-wide level. Thus, to handle offline messages correctly, use the disconnect() method when an app goes to the background and connect() method when an app goes to the foreground. As a result, the SDK will disconnect/connect the current user from the Chat server when the app goes to the background/foreground mode.

JavaScript
import { AppState } from 'react-native'
import QB from 'quickblox-react-native-sdk'

AppState.addEventListener('change', trackAppState)

function trackAppState (appState) {
  if (appState.match(/inactive|background/)) {
    QB.chat
      .disconnect()
      .then(function () { /* disconnected successfully */ })
      .catch(function (e) { /* handle error */ });
  } else {
    const chatConnectParams = {
      userId: 12345,
      password: 'passw0rd!'
    };
    QB.chat
      .connect(chatConnectParams)
      .then(function () { /* connected successfully */ })
      .catch(function (e) { /* some error occurred */ });
    }
}