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 Setup page for more details.
- 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.
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
});
Connection Event | Description |
---|
QB.chat.EVENT_TYPE.CONNECTED | Fired when the connection to the QuickBlox server is established successfully. |
QB.chat.EVENT_TYPE.CONNECTION_CLOSED | Fired when the connection to the QuickBlox server is closed normally, typically by calling the disconnect method. |
QB.chat.EVENT_TYPE.CONNECTION_CLOSED_ON_ERROR | Fired when the connection to the QuickBlox server is closed due to an error. |
QB.chat.EVENT_TYPE.RECONNECTION_FAILED | Fired when the reconnection attempt to the QuickBlox server fails. |
QB.chat.EVENT_TYPE.RECONNECTION_SUCCESSFUL | Fired 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.
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 */ });
}
}