> ## 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.

# All Real Time Listeners

> Use CometChat real-time listeners for user presence, groups, messages, calls, AI assistant events, and ongoing calls.

CometChat provides 4 listeners viz.

1. [User Listener](/sdk/javascript/all-real-time-listeners#user-listener)
2. [Group Listener](/sdk/javascript/all-real-time-listeners#group-listener)
3. [Message Listener](/sdk/javascript/all-real-time-listeners#message-listener)
4. [Call Listener](/sdk/javascript/all-real-time-listeners#call-listener)
5. [AI Assistant Listener](/sdk/javascript/all-real-time-listeners#ai-assistant-listener)
6. [Ongoing Call Listener (Calls SDK)](/sdk/javascript/all-real-time-listeners#ongoing-call-listener-calls-sdk)

## User Listener

Receive online/offline presence events for users.

| Method                                  | Information                                                                                                                                                                |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onUserOnline(user: CometChat.User)**  | This method is triggered when a user comes online and is available to chat. The details of the user can be obtained from the user object received as the method parameter. |
| **onUserOffline(user: CometChat.User)** | This method is triggered when a user goes offline. The details of the user can be obtained from the User object received as the parameter.                                 |

To add the `UserListener`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addUserListener(
      listenerID,
      new CometChat.UserListener({
        onUserOnline: (onlineUser: CometChat.User) => {
          /* when someuser/friend comes online, user will be received here */
          console.log("On User Online:", { onlineUser });
        },
        onUserOffline: (offlineUser: CometChat.User) => {
          /* when someuser/friend went offline, user will be received here */
          console.log("On User Offline:", { offlineUser });
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const 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>

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>

## Group Listener

Receive events when group members join, leave, are kicked/banned, or have their scope changed.

| Method                                                                                                                                                  | Information                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| **onGroupMemberJoined(action: CometChat.Action, joinedUser: CometChat.User, joinedGroup: CometChat.Group)**                                             | This method is triggered when a user joins any group. All the members present in the group will receive this event.                            |
| **onGroupMemberLeft(action: CometChat.Action, leftUser: CometChat.User, leftGroup: CometChat.Group)**                                                   | This method is triggered when a user who was a member of any group leaves the group. All the members of the group receive this event.          |
| **onGroupMemberKicked(action: CometChat.Action, kickedUser: CometChat.User, kickedBy: CometChat.User, kickedFrom: CometChat.Group)**                    | This method is triggered when a user is kicked from a group. All the members including the user receive this event                             |
| **onGroupMemberBanned(action: CometChat.Action, bannedUser: CometChat.User, bannedBy: CometChat.User, bannedFrom: CometChat.Group)**                    | This method is triggered when a user is banned from a group. All the members including the user receive this event                             |
| **onGroupMemberUnbanned(action: CometChat.Action, unbannedUser: CometChat.User, unbannedBy: CometChat.User, unbannedFrom: CometChat.Group)**            | This method is triggered when a user is banned from a group. All the members of the group receive this event.                                  |
| **onGroupMemberScopeChanged(action: CometChat.Action, changedUser: CometChat.User, newScope: string, oldScope: string, changedGroup: CometChat.Group)** | This method is triggered when the scope of any Group Member has been changed. All the members that are a part of that group receive this event |
| **onMemberAddedToGroup(action: CometChat.Action, userAdded: CometChat.User, addedBy: CometChat.User, addedTo: CometChat.Group)**                        | This method is triggered when a user is added to any group. All the members including the user himself receive this event.                     |

To add the `GroupListener`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChat.addGroupListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.GroupListener({
        onGroupMemberJoined: (
          message: CometChat.Action,
          joinedUser: CometChat.User,
          joinedGroup: CometChat.Group
        ) => {
          console.log("onGroupMemberJoined", { message, joinedUser, joinedGroup });
        },
        onGroupMemberLeft: (
          message: CometChat.Action,
          leftUser: CometChat.User,
          leftGroup: CometChat.Group
        ) => {
          console.log("onGroupMemberLeft", { message, leftUser, leftGroup });
        },
        onGroupMemberKicked: (
          message: CometChat.Action,
          kickedUser: CometChat.User,
          kickedBy: CometChat.User,
          kickedFrom: CometChat.Group
        ) => {
          console.log("onGroupMemberKicked", {
            message,
            kickedUser,
            kickedBy,
            kickedFrom,
          });
        },
        onGroupMemberBanned: (
          message: CometChat.Action,
          bannedUser: CometChat.User,
          bannedBy: CometChat.User,
          bannedFrom: CometChat.Group
        ) => {
          console.log("onGroupMemberBanned", {
            message,
            bannedUser,
            bannedBy,
            bannedFrom,
          });
        },
        onGroupMemberUnbanned: (
          message: CometChat.Action,
          unbannedUser: CometChat.User,
          unbannedBy: CometChat.User,
          unbannedFrom: CometChat.Group
        ) => {
          console.log("onGroupMemberUnbanned", {
            message,
            unbannedUser,
            unbannedBy,
            unbannedFrom,
          });
        },
        onGroupMemberScopeChanged: (
          message: CometChat.Action,
          changedUser: CometChat.User,
          newScope: string,
          oldScope: string,
          changedGroup: CometChat.Group
        ) => {
          console.log("onGroupMemberScopeChanged", {
            message,
            changedUser,
            newScope,
            oldScope,
            changedGroup,
          });
        },
        onMemberAddedToGroup: (
          message: CometChat.Action,
          userAdded: CometChat.User,
          addedby: CometChat.User,
          addedTo: CometChat.Group
        ) => {
          console.log("onMemberAddedToGroup", {
            message,
            userAdded,
            addedby,
            addedTo,
          });
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChat.addGroupListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.GroupListener({
        onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
          console.log("onGroupMemberJoined", { message, joinedUser, joinedGroup });
        },
        onGroupMemberLeft: (message, leftUser, leftGroup) => {
          console.log("onGroupMemberLeft", { message, leftUser, leftGroup });
        },
        onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
          console.log("onGroupMemberKicked", {
            message,
            kickedUser,
            kickedBy,
            kickedFrom,
          });
        },
        onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
          console.log("onGroupMemberBanned", {
            message,
            bannedUser,
            bannedBy,
            bannedFrom,
          });
        },
        onGroupMemberUnbanned: (
          message,
          unbannedUser,
          unbannedBy,
          unbannedFrom
        ) => {
          console.log("onGroupMemberUnbanned", {
            message,
            unbannedUser,
            unbannedBy,
            unbannedFrom,
          });
        },
        onGroupMemberScopeChanged: (
          message,
          changedUser,
          newScope,
          oldScope,
          changedGroup
        ) => {
          console.log("onGroupMemberScopeChanged", {
            message,
            changedUser,
            newScope,
            oldScope,
            changedGroup,
          });
        },
        onMemberAddedToGroup: (message, userAdded, addedby, addedTo) => {
          console.log("onMemberAddedToGroup", {
            message,
            userAdded,
            addedby,
            addedTo,
          });
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

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

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

## Message Listener

Receive events for incoming messages, typing indicators, read/delivery receipts, message edits/deletes, reactions, and moderation results.

| Method                                                                  | Information                                                                                                                                                          |
| ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onTextMessageReceived(message: CometChat.TextMessage)**               | This event is triggered when a Text Message is received.                                                                                                             |
| **onMediaMessageReceived(message: CometChat.MediaMessage)**             | This event is triggered when a Media Message is received.                                                                                                            |
| **onCustomMessageReceived(message: CometChat.CustomMessage)**           | This event is triggered when a Custom Message is received.                                                                                                           |
| **onTypingStarted(typingIndicator: CometChat.TypingIndicator)**         | This event is triggered when a user starts typing in a user/group conversation                                                                                       |
| **onTypingEnded(typingIndicator: CometChat.TypingIndicator)**           | This event is triggered when a user stops typing in a user/group conversation.                                                                                       |
| **onMessagesDelivered(messageReceipt: CometChat.MessageReceipt)**       | This event is triggered when a set of messages are marked as delivered for any particular conversation.                                                              |
| **onMessagesRead(messageReceipt: CometChat.MessageReceipt)**            | This event is triggered when a set of messages are marked as read for any particular conversation.                                                                   |
| **onMessageEdited(message: CometChat.BaseMessage)**                     | This method is triggered when a particular message has been edited in a user/group conversation.                                                                     |
| **onMessageDeleted(message: CometChat.BaseMessage)**                    | This event is triggered when a particular message is deleted in a user/group conversation.                                                                           |
| **onTransientMessageReceived(receipt: CometChat.TransientMessage)**     | This event is triggered when a Transient Message is received.                                                                                                        |
| **onMessageReactionAdded(receipt: CometChat.ReactionEvent)**            | This event is triggered when a reaction is added to a message in a user/group conversation.                                                                          |
| **onMessageReactionRemoved(receipt: CometChat.ReactionEvent)**          | This event is triggered when a reaction is remove from a message in a user/group conversation.                                                                       |
| **onMessageModerated(message: CometChat.BaseMessage)**                  | This event is triggered when a message sent by the logged-in user is successfully processed by moderation and receives either an `approved` or `disapproved` status. |
| **onMessagesDeliveredToAll(receipt: CometChat.MessageReceipt)**         | This event is triggered when a group message is delivered to all members. Group conversations only.                                                                  |
| **onMessagesReadByAll(receipt: CometChat.MessageReceipt)**              | This event is triggered when a group message is read by all members. Group conversations only.                                                                       |
| **onAIAssistantMessageReceived(message: CometChat.AIAssistantMessage)** | This event is triggered when a persisted AI assistant reply is received after an agent run completes.                                                                |
| **onAIToolResultReceived(message: CometChat.AIToolResultMessage)**      | This event is triggered when a persisted AI tool result message is received after an agent run completes.                                                            |
| **onAIToolArgumentsReceived(message: CometChat.AIToolArgumentMessage)** | This event is triggered when a persisted AI tool argument message is received after an agent run completes.                                                          |

To add the `MessageListener`, you need to use the `addMessageListener()` method provided by the `CometChat` class.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChat.addMessageListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.MessageListener({
        onTextMessageReceived: (textMessage: CometChat.TextMessage) => {
          console.log("Text message received successfully", textMessage);
        },
        onMediaMessageReceived: (mediaMessage: CometChat.MediaMessage) => {
          console.log("Media message received successfully", mediaMessage);
        },
        onCustomMessageReceived: (customMessage: CometChat.CustomMessage) => {
          console.log("Custom message received successfully", customMessage);
        },
        onMessagesDelivered: (messageReceipt: CometChat.MessageReceipt) => {
          console.log("Message Delivered", messageReceipt);
        },
        onMessagesRead: (messageReceipt: CometChat.MessageReceipt) => {
          console.log("Message Read", messageReceipt);
        },
        onTypingStarted: (typingIndicator: CometChat.TypingIndicator) => {
          console.log("Typing Started", typingIndicator);
        },
        onTypingEnded: (typingIndicator: CometChat.TypingIndicator) => {
          console.log("Typing Ended", typingIndicator);
        },
        onMessageDeleted: (message: CometChat.BaseMessage) => {
          console.log("Message Delted", message);
        },
        onMessageEdited: (message: CometChat.BaseMessage) => {
          console.log("Message Edited", message);
        },
        onTransientMessageReceived: (message: CometChat.TransientMessage) => {
          console.log("Transient Message received", message);
        },
        onMessageReactionAdded: (reaction: CometChat.ReactionEvent) => {
          console.log("Message Reaction added", reaction);
        },
        onMessageReactionRemoved: (reaction: CometChat.ReactionEvent) => {
          console.log("Message Reaction removed", reaction);
        },
        onMessageModerated: (message: CometChat.BaseMessage) => {
          console.log("Message Moderated", message);
        },
        onMessagesDeliveredToAll: (messageReceipt: CometChat.MessageReceipt) => {
          console.log("Message Delivered to All", messageReceipt);
        },
        onMessagesReadByAll: (messageReceipt: CometChat.MessageReceipt) => {
          console.log("Message Read by All", messageReceipt);
        },
        onAIAssistantMessageReceived: (message: CometChat.AIAssistantMessage) => {
          console.log("AI Assistant message received", message);
        },
        onAIToolResultReceived: (message: CometChat.AIToolResultMessage) => {
          console.log("AI Tool result received", message);
        },
        onAIToolArgumentsReceived: (message: CometChat.AIToolArgumentMessage) => {
          console.log("AI Tool arguments received", message);
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChat.addMessageListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.MessageListener({
        onTextMessageReceived: (textMessage) => {
          console.log("Text message received successfully", textMessage);
        },
        onMediaMessageReceived: (mediaMessage) => {
          console.log("Media message received successfully", mediaMessage);
        },
        onCustomMessageReceived: (customMessage) => {
          console.log("Custom message received successfully", customMessage);
        },
        onMessagesDelivered: (messageReceipt) => {
          console.log("Message Delivered", messageReceipt);
        },
        onMessagesRead: (messageReceipt) => {
          console.log("Message Read", messageReceipt);
        },
        onTypingStarted: (typingIndicator) => {
          console.log("Typing Started", typingIndicator);
        },
        onTypingEnded: (typingIndicator) => {
          console.log("Typing Ended", typingIndicator);
        },
        onMessageDeleted: (message) => {
          console.log("Message Deleted", message);
        },
        onMessageEdited: (message) => {
          console.log("Message Edited", message);
        },
        onTransientMessageReceived: (message) => {
          console.log("Transient Message received", message);
        },
        onMessageReactionAdded: (reaction) => {
          console.log("Message Reaction added", reaction);
        },
        onMessageReactionRemoved: (reaction) => {
          console.log("Message Reaction removed", reaction);
        },
        onMessageModerated: (message) => {
          console.log("Message Moderated", message);
        },
        onMessagesDeliveredToAll: (messageReceipt) => {
          console.log("Message Delivered to All", messageReceipt);
        },
        onMessagesReadByAll: (messageReceipt) => {
          console.log("Message Read by All", messageReceipt);
        },
        onAIAssistantMessageReceived: (message) => {
          console.log("AI Assistant message received", message);
        },
        onAIToolResultReceived: (message) => {
          console.log("AI Tool result received", message);
        },
        onAIToolArgumentsReceived: (message) => {
          console.log("AI Tool arguments received", message);
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

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

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

## Call Listener

Receive events for incoming and outgoing call state changes.

| Method                                               | Information                                                                                                                                                                                        |
| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **onIncomingCallReceived(call: CometChat.Call)**     | This event is triggered when the logged-in user receives an incoming call. The details of the call can be obtained from the Call object received as the method parameter.                          |
| **onOutgoingCallAccepted(call: CometChat.Call)**     | This event is triggered when the call initiated by the logged-in user is accepted by the recipient. The details of the call can be obtained from the Call object received as the method parameter. |
| **onOutgoingCallRejected(call: CometChat.Call)**     | This event is triggered when the call initiated by the logged-in user is rejected by the recipient. The details of the call can be obtained from the Call object received as the method parameter  |
| **onIncomingCallCancelled(call: CometChat.Call)**    | This event is triggered when an incoming call is canceled by the initiator of the call. The details of the call can be obtained from the Call object received as the method parameter              |
| **onCallEndedMessageReceived(call: CometChat.Call)** | This event is triggered when a call ends. The call object contains the final status and duration.                                                                                                  |

To add the `CallListener`:

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    CometChat.addCallListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.CallListener({
        onIncomingCallReceived: (call: CometChat.Call) => {
          console.log("Incoming call:", call);
        },
        onOutgoingCallAccepted: (call: CometChat.Call) => {
          console.log("Outgoing call accepted:", call);
        },
        onOutgoingCallRejected: (call: CometChat.Call) => {
          console.log("Outgoing call rejected:", call);
        },
        onIncomingCallCancelled: (call: CometChat.Call) => {
          console.log("Incoming call canceled:", call);
        },
        onCallEndedMessageReceived: (call: CometChat.Call) => {
          console.log("Call ended message:", call);
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    CometChat.addCallListener(
      "UNIQUE_LISTENER_ID",
      new CometChat.CallListener({
        onIncomingCallReceived(call) {
          console.log("Incoming call:", call);
        },
        onOutgoingCallAccepted(call) {
          console.log("Outgoing call accepted:", call);
        },
        onOutgoingCallRejected(call) {
          console.log("Outgoing call rejected:", call);
        },
        onIncomingCallCancelled(call) {
          console.log("Incoming call canceled:", call);
        },
        onCallEndedMessageReceived(call) {
          console.log("Call ended message:", call);
        },
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

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

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

***

## AI Assistant Listener

The `AIAssistantListener` provides real-time streaming events from AI Agent runs. These events are received as the agent processes a user's message, before the final persisted messages arrive via the `MessageListener`.

| Method                                                                | Information                                                                                                                                                                                                                                |
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **onAIAssistantEventReceived(event: CometChat.AIAssistantBaseEvent)** | This event is triggered for each streaming event during an AI Agent run (run start, tool calls, text message streaming, run finished). See [`AIAssistantBaseEvent`](/sdk/reference/messages#aiassistantbaseevent) for the event structure. |

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addAIAssistantListener(
      listenerID,
      new CometChat.AIAssistantListener({
        onAIAssistantEventReceived: (event: CometChat.AIAssistantBaseEvent) => {
          console.log("AI Assistant event:", event.getType(), event);
        },
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const listenerID = "UNIQUE_LISTENER_ID";
    CometChat.addAIAssistantListener(
      listenerID,
      new CometChat.AIAssistantListener({
        onAIAssistantEventReceived: (event) => {
          console.log("AI Assistant event:", event.getType(), event);
        },
      })
    );
    ```
  </Tab>
</Tabs>

To remove the listener:

<Tabs>
  <Tab title="TypeScript">
    `typescript CometChat.removeAIAssistantListener("UNIQUE_LISTENER_ID"); `
  </Tab>

  <Tab title="JavaScript">
    `javascript CometChat.removeAIAssistantListener("UNIQUE_LISTENER_ID"); `
  </Tab>
</Tabs>

## Ongoing Call Listener (Calls SDK)

The `OngoingCallListener` provides real-time callbacks for active call session events. It is part of the CometChat Calls SDK (not the Chat SDK) and is used with `CallSettingsBuilder.setCallListener()` or `CometChatCalls.addCallEventListener()`.

All three calling flows — [Call Session](/sdk/javascript/direct-call), [Standalone Calling](/sdk/javascript/standalone-calling), and [Ringing](/sdk/javascript/default-call) — use the same `OngoingCallListener`.

### Callbacks

| Callback                               | Parameter                                                                 | Description                                                               |
| -------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `onUserJoined(user)`                   | `user` object                                                             | A remote participant joined the call                                      |
| `onUserLeft(user)`                     | `user` object                                                             | A remote participant left the call                                        |
| `onUserListUpdated(userList)`          | Array of `user` objects                                                   | The participant list changed (join or leave)                              |
| `onCallEnded()`                        | —                                                                         | The call session terminated (1:1 calls only, fires for both participants) |
| `onCallEndButtonPressed()`             | —                                                                         | The local user clicked the end call button                                |
| `onSessionTimeout()`                   | —                                                                         | The call was auto-terminated due to inactivity. *v4.1.0+*                 |
| `onScreenShareStarted()`               | —                                                                         | The local user started sharing their screen                               |
| `onScreenShareStopped()`               | —                                                                         | The local user stopped sharing their screen                               |
| `onUserMuted(event)`                   | `event` object                                                            | A participant's mute state changed                                        |
| `onCallSwitchedToVideo(event)`         | `event` object                                                            | An audio call was upgraded to video                                       |
| `onMediaDeviceListUpdated(deviceList)` | `deviceList` object                                                       | Available audio/video devices changed                                     |
| `onRecordingStarted(event)`            | `event` object                                                            | A user started recording the call                                         |
| `onRecordingStopped()`                 | —                                                                         | Recording was stopped                                                     |
| `onError(error)`                       | [`CometChatCallsException`](/sdk/reference/calls#cometchatcallsexception) | An error occurred during the call session                                 |

### Callback Parameter Shapes

**`user` object** (received by `onUserJoined`, `onUserLeft`):

| Property | Type     | Description              |
| -------- | -------- | ------------------------ |
| `name`   | `string` | Display name of the user |
| `avatar` | `string` | URL of the user's avatar |
| `uid`    | `string` | UID of the user          |

**`onUserListUpdated(userList)`** — receives an array of `user` objects with the same shape as above.

**`onUserMuted(event)`**:

| Property                   | Type      | Description                |
| -------------------------- | --------- | -------------------------- |
| `event.muted.name`         | `string`  | Name of the muted user     |
| `event.muted.uid`          | `string`  | UID of the muted user      |
| `event.muted.isAudioMuted` | `boolean` | Whether audio is muted     |
| `event.muted.isVideoMuted` | `boolean` | Whether video is muted     |
| `event.mutedBy.name`       | `string`  | Name of the user who muted |
| `event.mutedBy.uid`        | `string`  | UID of the user who muted  |

**`onCallSwitchedToVideo(event)`**:

| Property               | Type     | Description                               |
| ---------------------- | -------- | ----------------------------------------- |
| `event.sessionId`      | `string` | Session ID of the call                    |
| `event.initiator.name` | `string` | Name of the user who initiated the switch |
| `event.initiator.uid`  | `string` | UID of the initiator                      |
| `event.responder.name` | `string` | Name of the responder                     |
| `event.responder.uid`  | `string` | UID of the responder                      |

**`onMediaDeviceListUpdated(deviceList)`**:

| Property                        | Type                                                        | Description                   |
| ------------------------------- | ----------------------------------------------------------- | ----------------------------- |
| `deviceList.videoInputDevices`  | [`MediaDeviceInfo[]`](/sdk/reference/calls#mediadeviceinfo) | Available cameras             |
| `deviceList.audioInputDevices`  | [`MediaDeviceInfo[]`](/sdk/reference/calls#mediadeviceinfo) | Available microphones         |
| `deviceList.audioOutputDevices` | [`MediaDeviceInfo[]`](/sdk/reference/calls#mediadeviceinfo) | Available speakers/headphones |

**`onRecordingStarted(event)`**:

| Property          | Type     | Description                            |
| ----------------- | -------- | -------------------------------------- |
| `event.user.name` | `string` | Name of the user who started recording |
| `event.user.uid`  | `string` | UID of the user who started recording  |

**`onRecordingStopped()`**, **`onCallEnded()`**, **`onSessionTimeout()`**, **`onCallEndButtonPressed()`**, **`onScreenShareStarted()`**, **`onScreenShareStopped()`** — receive no arguments.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerId: string = "UNIQUE_LISTENER_ID";

    CometChatCalls.addCallEventListener(listenerId, {
    onUserJoined: (user: any) => {
    console.log("User joined:", user);
    },
    onUserLeft: (user: any) => {
    console.log("User left:", user);
    },
    onCallEnded: () => {
    console.log("Call ended");
    },
    onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    },
    onError: (error: any) => {
    console.log("Call error:", error);
    },
    });

    // Remove listener when done
    CometChatCalls.removeCallEventListener(listenerId);

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const listenerId = "UNIQUE_LISTENER_ID";

    CometChatCalls.addCallEventListener(listenerId, {
      onUserJoined: (user) => {
        console.log("User joined:", user);
      },
      onUserLeft: (user) => {
        console.log("User left:", user);
      },
      onCallEnded: () => {
        console.log("Call ended");
      },
      onCallEndButtonPressed: () => {
        console.log("End call button pressed");
      },
      onError: (error) => {
        console.log("Call error:", error);
      },
    });

    // Remove listener when done
    CometChatCalls.removeCallEventListener(listenerId);
    ```
  </Tab>
</Tabs>

***

## Login Listener

Receive events when the user's authentication state changes — login success/failure and logout success/failure.

| Method                 | Description                                                                                    |
| ---------------------- | ---------------------------------------------------------------------------------------------- |
| `loginSuccess(user)`   | User logged in successfully. Provides the [`User`](/sdk/reference/entities#user) object.       |
| `loginFailure(error)`  | Login failed. Provides a [`CometChatException`](/sdk/reference/auxiliary#cometchatexception).  |
| `logoutSuccess()`      | User logged out successfully.                                                                  |
| `logoutFailure(error)` | Logout failed. Provides a [`CometChatException`](/sdk/reference/auxiliary#cometchatexception). |

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addLoginListener(
      listenerID,
      new CometChat.LoginListener({
        loginSuccess: (user: CometChat.User) => {
          console.log("LoginListener :: loginSuccess", user);
        },
        loginFailure: (error: CometChat.CometChatException) => {
          console.log("LoginListener :: loginFailure", error);
        },
        logoutSuccess: () => {
          console.log("LoginListener :: logoutSuccess");
        },
        logoutFailure: (error: CometChat.CometChatException) => {
          console.log("LoginListener :: logoutFailure", error);
        }
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const listenerID = "UNIQUE_LISTENER_ID";
    CometChat.addLoginListener(
      listenerID,
      new CometChat.LoginListener({
        loginSuccess: (user) => {
          console.log("LoginListener :: loginSuccess", user);
        },
        loginFailure: (error) => {
          console.log("LoginListener :: loginFailure", error);
        },
        logoutSuccess: () => {
          console.log("LoginListener :: logoutSuccess");
        },
        logoutFailure: (error) => {
          console.log("LoginListener :: logoutFailure", error);
        }
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

```javascript theme={null}
CometChat.removeLoginListener("UNIQUE_LISTENER_ID");
```

## Connection Listener

Receive events when the WebSocket connection state changes.

| Method                 | Description                                                  |
| ---------------------- | ------------------------------------------------------------ |
| `onConnected()`        | SDK has an active connection to CometChat servers.           |
| `inConnecting()`       | SDK is attempting to establish or re-establish a connection. |
| `onDisconnected()`     | SDK is disconnected due to network issues or other errors.   |
| `onFeatureThrottled()` | A feature has been throttled due to rate limiting.           |

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    const listenerID: string = "UNIQUE_LISTENER_ID";
    CometChat.addConnectionListener(
      listenerID,
      new CometChat.ConnectionListener({
        onConnected: () => {
          console.log("ConnectionListener :: connected");
        },
        inConnecting: () => {
          console.log("ConnectionListener :: connecting");
        },
        onDisconnected: () => {
          console.log("ConnectionListener :: disconnected");
        },
        onFeatureThrottled: () => {
          console.log("ConnectionListener :: feature throttled");
        }
      })
    );
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    const listenerID = "UNIQUE_LISTENER_ID";
    CometChat.addConnectionListener(
      listenerID,
      new CometChat.ConnectionListener({
        onConnected: () => {
          console.log("ConnectionListener :: connected");
        },
        inConnecting: () => {
          console.log("ConnectionListener :: connecting");
        },
        onDisconnected: () => {
          console.log("ConnectionListener :: disconnected");
        },
        onFeatureThrottled: () => {
          console.log("ConnectionListener :: feature throttled");
        }
      })
    );
    ```
  </Tab>
</Tabs>

Remove the listener when no longer needed:

```javascript theme={null}
CometChat.removeConnectionListener("UNIQUE_LISTENER_ID");
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Receive Messages" icon="inbox" href="/sdk/javascript/receive-message">
    Handle incoming messages in real-time
  </Card>

  <Card title="Typing Indicators" icon="keyboard" href="/sdk/javascript/typing-indicators">
    Show when users are typing
  </Card>

  <Card title="User Presence" icon="circle-dot" href="/sdk/javascript/user-presence">
    Track online/offline status of users
  </Card>

  <Card title="Connection Status" icon="signal" href="/sdk/javascript/connection-status">
    Monitor SDK connection state changes
  </Card>
</CardGroup>