> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # All Real Time Listeners 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) ## User Listener The `UserListener` class provides you with live events related to users. Below are the callback methods provided by the `UserListener` class. | 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`, you need to use the `addUserListener()` method provided by the `CometChat` class. ```js theme={null} var 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 }); }, }) ); ``` ```typescript theme={null} var 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 }); }, }) ); ``` where `UNIQUE_LISTENER_ID` is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events. Once the `UserListener` is not in use, you need to remove the listener using the `removeUserListener()` method which takes the id of the listener to be removed as the parameter. ```js theme={null} CometChat.removeUserListener(UNIQUE_LISTENER_ID); ``` ```typescript theme={null} let listenerID: string = "UNIQUE_LISTENER_ID"; CometChat.removeUserListener(listenerID); ``` ## Group Listener The `GroupListener` class provides you with all the real-time events related to groups. Below are the callback methods provided by the `GroupListener` class. | 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`, you need to use the `addGroupListener()` method provided by the `CometChat` class. ```js 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, }); }, }) ); ``` ```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, }); }, }) ); ``` where `UNIQUE_LISTENER_ID` is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events. Once the `GroupListener` is not in use, you need to remove the listener using the `removeGroupListener()` method which takes the id of the listener to be removed as the parameter. ```js theme={null} CometChat.removeGroupListener(UNIQUE_LISTENER_ID); ``` ```typescript theme={null} let listenerID: string = "UNIQUE_LISTENER_ID"; CometChat.removeGroupListener(listenerID); ``` ## Message Listener The `MessageListener` class provides you with live events related to messages. Below are the callback methods provided by the `MessageListener` class. | 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. | | **onInteractiveMessageReceived(message: CometChat.InteractiveMessage)** | This event is triggered when an Interactive Message is received. | | **onInteractionGoalCompleted(receipt: CometChat.InteractionReceipt)** | This event is triggered when an interaction Goal is achieved. | | **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. | | To add the `MessageListener`, you need to use the `addMessageListener()` method provided by the `CometChat` class. | | ```js 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); }, onMessagesDeleted: (message) => { console.log("Message Deleted", message); }, onMessageEdited: (message) => { console.log("Message Edited", message); }, onInteractiveMessageReceived: (message) => { console.log("interactive Message received", message); }, onInteractionGoalCompleted: (message) => { console.log("Message interaction goal completed", 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); }, }) ); ``` ```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); }, onInteractiveMessageReceived: (message: CometChat.InteractiveMessage) => { console.log("interactive Message received", message); }, onInteractionGoalCompleted: (receipt: CometChat.InteractionReceipt) => { console.log("Message interaction goal completed", 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); }, }) ); ``` where `UNIQUE_LISTENER_ID` is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events. Once the `MessageListener` is not in use, you need to remove the listener using the `removeMessageListener()` method which takes the id of the listener to be removed as the parameter. ```js theme={null} CometChat.removeMessageListener(UNIQUE_LISTENER_ID); ``` ```typescript theme={null} let listenerID: string = "UNIQUE_LISTENER_ID"; CometChat.removeMessageListener(listenerID); ``` ## Call Listener The `CallListener` class provides you with live events related to calls. Below are the callback methods provided by the `CallListener` class. | 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 | To add the `CallListener`, you need to use the `addCallListener()` method provided by the `CometChat` class. ```js 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); }, }) ); ``` ```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); }, }) ); ``` where `UNIQUE_LISTENER_ID` is the unique identifier for the listener. Please make sure that no two listeners are added with the same listener id as this could lead to unexpected behavior resulting in loss of events. Once the `CallListener` is not in use, you need to remove the listener using the `removeCallListener()` method which takes the id of the listener to be removed as the parameter. ```js theme={null} CometChat.removeCallListener(UNIQUE_LISTENER_ID); ``` ```typescript theme={null} let listenerID: string = "UNIQUE_LISTENER_ID"; CometChat.removeCallListener(listenerID); ```