Connection

Before you begin

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.
Configure QuickBlox SDK for your app. Check out our Setup page for more details.
Create a user session to be able to use QuickBlox functionality. See our Authentication page to learn how to do it.

Visit our Key Concepts page to get an overall understanding of the most important QuickBlox concepts.

Connect to Chat server

To connect to Chat server use the code snippet below.

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.

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.

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.

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.

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.

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 */ });
    }
}