> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Connection Status

> Learn how to monitor the real-time WebSocket connection status using the CometChat React Native SDK, including connecting, connected, and disconnected states.

<Info>
  **Quick Reference**

  ```javascript theme={null}
  // Listen for connection status changes
  CometChat.addConnectionListener("listenerId", new CometChat.ConnectionListener({
    onConnected: () => {},
    inConnecting: () => {},
    onDisconnected: () => {}
  }));

  // Get current connection status
  var status = CometChat.getConnectionStatus();
  // Returns: "connecting" | "connected" | "disconnected"
  ```
</Info>

CometChat SDK provides you with a mechanism to get real-time status of the connection to CometChat web-socket servers.

Connection Status provides you with the below 3 methods to get the status of the connection to CometChat web-socket servers:

| Delegate Method | Information                                                                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| connecting      | This method is triggered when CometChat SDK is trying to establish a connection to the web-socket server.                                        |
| connected       | This method is called when CometChat SDK has successfully established a connection and now is connected.                                         |
| disconnected    | This method is called when the CometChat SDK gets disconnected due to any issue while maintaining the connection like network fluctuations, etc. |

Once the connection is broken, the disconnected callback is triggered, the SDK automatically tries to establish the connection again, thus going into the connecting state and triggering the `connecting` method. Once the attempt to connect is successful, the `connected` method is triggered thus letting the developer know that the connection is established and is active.

To receive real-time connection status, you need to register `ConnectionListener` wherever you wish to receive the real-time status. You can use the `addConnectionListener()` method to do so.

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    var listenerID = "UNIQUE_LISTENER_ID";
    CometChat.addConnectionListener(
      listenerID,
      new CometChat.ConnectionListener({
        onConnected: () => {
          console.log("ConnectionListener => On Connected");
        },
        inConnecting: () => {
          console.log("ConnectionListener => In connecting");
        },
        onDisconnected: () => {
          console.log("ConnectionListener => On Disconnected");
        },
        onFeatureThrottled: () => {
          console.log("ConnectionListener => On Feature Throttled");
        },
        onConnectionError: () => {
          console.log("ConnectionListener => On Connection Error");
        },
      })
    );
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addConnectionListener(
      listenerID,
      new CometChat.ConnectionListener({
        onConnected: () => {
          console.log("ConnectionListener => On Connected");
        },
        inConnecting: () => {
          console.log("ConnectionListener => In connecting");
        },
        onDisconnected: () => {
          console.log("ConnectionListener => On Disconnected");
        },
      })
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Always remove connection listeners when the component unmounts to prevent memory leaks.

  ```javascript theme={null}
  CometChat.removeConnectionListener("UNIQUE_LISTENER_ID");
  ```
</Warning>

<Note>
  We recommend you to add the Connection Listener in your method on app startup, preferably in the App.tsx file. Once you have successfully initialized CometChat.
</Note>

You can also get the current connection status by using `getConnectionStatus` property provided by CometChat SDK

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    var connectionStatus = CometChat.getConnectionStatus();
    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    var connectionStatus: string = CometChat.getConnectionStatus();
    ```
  </Tab>
</Tabs>

The `CometChat.getConnectionStatus` method will return either of the below 3 values:

1. `connecting`
2. `connected`
3. `disconnected`

<AccordionGroup>
  <Accordion title="Best Practices">
    * Register the connection listener early in your app lifecycle (after `CometChat.init()`) to catch connection state changes from the start
    * Use connection status to show a connectivity indicator in your UI (e.g., a banner when disconnected)
    * When the status changes to `connected` after a `disconnected` state, consider refreshing your message list to fetch any messages missed during the disconnection
    * Avoid making SDK calls (sending messages, fetching data) while the status is `disconnected` — queue them and retry once `connected`
  </Accordion>

  <Accordion title="Troubleshooting">
    * **Listener not firing**: Ensure you registered the `ConnectionListener` with a unique listener ID after calling `CometChat.init()`.
    * **Stuck in connecting state**: Check your network connection and verify that the App ID and region are correct in your `AppSettings`.
    * **Frequent disconnections**: This is typically caused by network instability. The SDK handles reconnection automatically in auto mode.
    * **`onFeatureThrottled` firing**: This indicates your app is hitting rate limits. Reduce the frequency of API calls.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Managing WebSockets Manually" icon="plug" href="/sdk/react-native/managing-web-sockets-connections-manually">
    Take full control of WebSocket connections
  </Card>

  <Card title="Real-Time Listeners" icon="tower-broadcast" href="/sdk/react-native/real-time-listeners">
    Register listeners for users, groups, messages, and calls
  </Card>
</CardGroup>