> ## Documentation Index
> Fetch the complete documentation index at: https://docs.quickblox.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connection

> Learn how to connect to the chat server and set connection settings.

## Before you begin

1. Register a [QuickBlox account](https://admin.quickblox.com/signin). 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](/sdks/react-native-setup) page for more details.
3. Create a user session to be able to use QuickBlox functionality. See [Authentication](/sdks/react-native-authentication) page to learn how to do it.

Visit [Key Concepts](/docs/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 JavaScript theme={null}
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 JavaScript theme={null}
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 JavaScript theme={null}
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.

```javascript theme={null}
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 JavaScript theme={null}
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 JavaScript theme={null}
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](/sdks/react-native-chat-offline-messaging) 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 JavaScript theme={null}
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 */ });
    }
}
```