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

# User Presence

> Track online and offline user presence with the CometChat JavaScript SDK.

<Accordion title="AI Integration Quick Reference">
  ```javascript theme={null}
  // Subscribe to presence during init
  const appSettings = new CometChat.AppSettingsBuilder()
    .subscribePresenceForAllUsers() // or .subscribePresenceForRoles([]) / .subscribePresenceForFriends()
    .setRegion("REGION")
    .build();

  // Listen for presence changes
  CometChat.addUserListener(
    "LISTENER_ID",
    new CometChat.UserListener({
      onUserOnline: (user) => console.log("Online:", user),
      onUserOffline: (user) => console.log("Offline:", user)
    })
  );

  // Remove listener
  CometChat.removeUserListener("LISTENER_ID");
  ```
</Accordion>

Track whether users are online or offline in real-time.

## Real-time Presence

Configure presence subscription in `AppSettings` during SDK initialization. The `AppSettingsBuilder` provides three subscription options:

| Method                             | Description                                                  |
| ---------------------------------- | ------------------------------------------------------------ |
| `subscribePresenceForAllUsers()`   | Receive presence updates for all users                       |
| `subscribePresenceForRoles(roles)` | Receive presence updates only for users with specified roles |
| `subscribePresenceForFriends()`    | Receive presence updates only for friends                    |

If none of these methods are called, no presence events will be delivered.

<Note>
  You must configure presence subscription in `AppSettings` during
  `CometChat.init()` before any presence events will be delivered. See [Setup
  SDK](/sdk/javascript/setup-sdk) for details.
</Note>

Register a `UserListener` to receive presence events:

<Tabs>
  <Tab title="User Listener">
    ```
    let listenerID = "UNIQUE_LISTENER_ID";

    CometChat.addUserListener(
    listenerID,
    new CometChat.UserListener({
    onUserOnline: onlineUser => {
    console.log("On User Online:", { onlineUser });
    },
    onUserOffline: offlineUser => {
    console.log("On User Offline:", { offlineUser });
    }
    })
    );

    ```
  </Tab>

  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";

    CometChat.addUserListener(
      listenerID,
      new CometChat.UserListener({
        onUserOnline: (onlineUser: CometChat.User) => {
          console.log("On User Online:", { onlineUser });
        },
        onUserOffline: (offlineUser: CometChat.User) => {
          console.log("On User Offline:", { offlineUser });
        }
      })
    );
    ```
  </Tab>
</Tabs>

| Parameter    | Description                                   |
| ------------ | --------------------------------------------- |
| `listenerID` | An ID that uniquely identifies that listener. |

You will receive an object of the `User` class in the listener methods.

We recommend you remove the listener once the activity or view is not in use.

We suggest adding this method when not in use.

<Tabs>
  <Tab title="Remove User Listener">
    ```
    let listenerID = "UNIQUE_LISTENER_ID";

    CometChat.addUserListener(
    listenerID,
    new CometChat.UserListener({
    onUserOnline: onlineUser => {
    console.log("On User Online:", { onlineUser });
    },
    onUserOffline: offlineUser => {
    console.log("On User Offline:", { offlineUser });
    }
    })
    );

    ```
  </Tab>
</Tabs>

| Parameter    | Description                        |
| ------------ | ---------------------------------- |
| `listenerID` | Unique identifier for the listener |

Each callback receives a [`User`](/sdk/reference/entities#user) object with presence information.

Relevant fields to access on returned users:

| Field        | Getter              | Return Type | Description                                           |
| ------------ | ------------------- | ----------- | ----------------------------------------------------- |
| status       | `getStatus()`       | `string`    | Online status of the user (`"online"` or `"offline"`) |
| lastActiveAt | `getLastActiveAt()` | `number`    | Timestamp when the user was last active               |

Remove the listener when no longer needed:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.removeUserListener(listenerID);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let listenerID = "UNIQUE_LISTENER_ID";
    CometChat.removeUserListener(listenerID);
    ```
  </Tab>
</Tabs>

<Warning>
  Always remove your `UserListener` when the component or view unmounts to prevent memory leaks and duplicate event handling.

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

## User List Presence

When fetching users via `UsersRequest`, each [`User`](/sdk/reference/entities#user) object includes presence fields:

| Field          | Description                                                 |
| -------------- | ----------------------------------------------------------- |
| `status`       | `"online"` or `"offline"`                                   |
| `lastActiveAt` | Timestamp of last activity (useful for "Last seen" display) |

## Next Steps

<CardGroup cols={2}>
  <Card title="Retrieve Users" icon="users" href="/sdk/javascript/retrieve-users">
    Fetch user lists with filtering and pagination.
  </Card>

  <Card title="User Management" icon="user-plus" href="/sdk/javascript/user-management">
    Create and update users programmatically.
  </Card>

  <Card title="Connection Status" icon="wifi" href="/sdk/javascript/connection-status">
    Monitor SDK connection to CometChat servers.
  </Card>

  <Card title="All Real-time Listeners" icon="tower-broadcast" href="/sdk/javascript/all-real-time-listeners">
    Overview of all available real-time listeners.
  </Card>
</CardGroup>