All Real-Time Listeners

Complete reference for all event listeners in the CometChat JavaScript SDK

Quick Reference for AI Agents & Developers

// Message Listener
CometChat.addMessageListener("MSG_LISTENER", new CometChat.MessageListener({
  onTextMessageReceived: (msg) => console.log(msg.getText()),
  onTypingStarted: (indicator) => console.log("typing..."),
  onMessagesRead: (receipt) => console.log("read")
}));

// User Listener (presence)
CometChat.addUserListener("USER_LISTENER", new CometChat.UserListener({
  onUserOnline: (user) => console.log(user.getUid(), "online"),
  onUserOffline: (user) => console.log(user.getUid(), "offline")
}));

// Group Listener
CometChat.addGroupListener("GROUP_LISTENER", new CometChat.GroupListener({
  onGroupMemberJoined: (action, user, group) => console.log("joined")
}));

// Call Listener
CometChat.addCallListener("CALL_LISTENER", new CometChat.CallListener({
  onIncomingCallReceived: (call) => console.log("incoming call")
}));

// Remove listeners
CometChat.removeMessageListener("MSG_LISTENER");

CometChat provides real-time event listeners to keep your application synchronized with chat activities. This guide covers all available listeners and their callback methods.

Available Listeners

User Listener

Online/offline presence events

Group Listener

Group membership and scope changes

Message Listener

Messages, typing, receipts, reactions

Call Listener

Incoming and outgoing call events

Quick Reference

Listener	Key Events	Use Case
User	onUserOnline, onUserOffline	Presence indicators
Group	onGroupMemberJoined, onGroupMemberLeft, onMemberAddedToGroup	Group roster updates
Message	onTextMessageReceived, onTypingStarted, onMessagesRead	Chat UI updates
Call	onIncomingCallReceived, onOutgoingCallAccepted	Call handling

---

User Listener

Monitor user presence changes in real-time.

Method	Description
onUserOnline(user)	Triggered when a user comes online
onUserOffline(user)	Triggered when a user goes offline

JavaScript

const listenerID = "USER_LISTENER";

CometChat.addUserListener(
  listenerID,
  new CometChat.UserListener({
    onUserOnline: (onlineUser) => {
      console.log("User online:", onlineUser.getUid());
      // Update UI to show online status
    },
    onUserOffline: (offlineUser) => {
      console.log("User offline:", offlineUser.getUid());
      // Update UI to show offline status
    }
  })
);

// Remove when no longer needed
CometChat.removeUserListener(listenerID);

TypeScript

const listenerID: string = "USER_LISTENER";

CometChat.addUserListener(
  listenerID,
  new CometChat.UserListener({
    onUserOnline: (onlineUser: CometChat.User): void => {
      console.log("User online:", onlineUser.getUid());
    },
    onUserOffline: (offlineUser: CometChat.User): void => {
      console.log("User offline:", offlineUser.getUid());
    }
  })
);

// Remove when no longer needed
CometChat.removeUserListener(listenerID);

Use unique listener IDs. Duplicate IDs cause unexpected behavior and lost events.

---

Group Listener

Track all group membership and permission changes.

Method	Description
onGroupMemberJoined(action, joinedUser, joinedGroup)	User joined a group
onGroupMemberLeft(action, leftUser, leftGroup)	User left a group
onGroupMemberKicked(action, kickedUser, kickedBy, kickedFrom)	User was kicked
onGroupMemberBanned(action, bannedUser, bannedBy, bannedFrom)	User was banned
onGroupMemberUnbanned(action, unbannedUser, unbannedBy, unbannedFrom)	User was unbanned
onGroupMemberScopeChanged(action, changedUser, newScope, oldScope, changedGroup)	User scope changed
onMemberAddedToGroup(action, userAdded, addedBy, addedTo)	User was added to group

JavaScript

const listenerID = "GROUP_LISTENER";

CometChat.addGroupListener(
  listenerID,
  new CometChat.GroupListener({
    onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
      console.log(`${joinedUser.getName()} joined ${joinedGroup.getName()}`);
    },
    onGroupMemberLeft: (message, leftUser, leftGroup) => {
      console.log(`${leftUser.getName()} left ${leftGroup.getName()}`);
    },
    onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
      console.log(`${kickedUser.getName()} was kicked by ${kickedBy.getName()}`);
    },
    onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
      console.log(`${bannedUser.getName()} was banned`);
    },
    onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
      console.log(`${unbannedUser.getName()} was unbanned`);
    },
    onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
      console.log(`${changedUser.getName()} scope: ${oldScope} → ${newScope}`);
    },
    onMemberAddedToGroup: (message, userAdded, addedBy, addedTo) => {
      console.log(`${userAdded.getName()} was added by ${addedBy.getName()}`);
    }
  })
);

// Remove when no longer needed
CometChat.removeGroupListener(listenerID);

TypeScript

const listenerID: string = "GROUP_LISTENER";

CometChat.addGroupListener(
  listenerID,
  new CometChat.GroupListener({
    onGroupMemberJoined: (
      message: CometChat.Action,
      joinedUser: CometChat.User,
      joinedGroup: CometChat.Group
    ): void => {
      console.log(`${joinedUser.getName()} joined ${joinedGroup.getName()}`);
    },
    onGroupMemberLeft: (
      message: CometChat.Action,
      leftUser: CometChat.User,
      leftGroup: CometChat.Group
    ): void => {
      console.log(`${leftUser.getName()} left ${leftGroup.getName()}`);
    },
    onGroupMemberKicked: (
      message: CometChat.Action,
      kickedUser: CometChat.User,
      kickedBy: CometChat.User,
      kickedFrom: CometChat.Group
    ): void => {
      console.log(`${kickedUser.getName()} was kicked by ${kickedBy.getName()}`);
    },
    onGroupMemberBanned: (
      message: CometChat.Action,
      bannedUser: CometChat.User,
      bannedBy: CometChat.User,
      bannedFrom: CometChat.Group
    ): void => {
      console.log(`${bannedUser.getName()} was banned`);
    },
    onGroupMemberUnbanned: (
      message: CometChat.Action,
      unbannedUser: CometChat.User,
      unbannedBy: CometChat.User,
      unbannedFrom: CometChat.Group
    ): void => {
      console.log(`${unbannedUser.getName()} was unbanned`);
    },
    onGroupMemberScopeChanged: (
      message: CometChat.Action,
      changedUser: CometChat.User,
      newScope: string,
      oldScope: string,
      changedGroup: CometChat.Group
    ): void => {
      console.log(`${changedUser.getName()} scope: ${oldScope} → ${newScope}`);
    },
    onMemberAddedToGroup: (
      message: CometChat.Action,
      userAdded: CometChat.User,
      addedBy: CometChat.User,
      addedTo: CometChat.Group
    ): void => {
      console.log(`${userAdded.getName()} was added by ${addedBy.getName()}`);
    }
  })
);

// Remove when no longer needed
CometChat.removeGroupListener(listenerID);

---

Message Listener

Handle all message-related events including typing indicators, receipts, and reactions.

Method	Description
onTextMessageReceived(message)	Text message received
onMediaMessageReceived(message)	Media message received
onCustomMessageReceived(message)	Custom message received
onInteractiveMessageReceived(message)	Interactive message received
onTypingStarted(typingIndicator)	User started typing
onTypingEnded(typingIndicator)	User stopped typing
onMessagesDelivered(messageReceipt)	Messages marked delivered
onMessagesRead(messageReceipt)	Messages marked read
onMessageEdited(message)	Message was edited
onMessageDeleted(message)	Message was deleted
onTransientMessageReceived(message)	Transient message received
onMessageReactionAdded(reaction)	Reaction added to message
onMessageReactionRemoved(reaction)	Reaction removed from message
onMessageModerated(message)	Message moderation status updated

JavaScript

const listenerID = "MESSAGE_LISTENER";

CometChat.addMessageListener(
  listenerID,
  new CometChat.MessageListener({
    // Message events
    onTextMessageReceived: (textMessage) => {
      console.log("Text message:", textMessage.getText());
    },
    onMediaMessageReceived: (mediaMessage) => {
      console.log("Media message:", mediaMessage.getAttachment());
    },
    onCustomMessageReceived: (customMessage) => {
      console.log("Custom message:", customMessage.getCustomData());
    },
    onInteractiveMessageReceived: (message) => {
      console.log("Interactive message:", message);
    },
    
    // Typing events
    onTypingStarted: (typingIndicator) => {
      console.log(`${typingIndicator.getSender().getName()} is typing...`);
    },
    onTypingEnded: (typingIndicator) => {
      console.log(`${typingIndicator.getSender().getName()} stopped typing`);
    },
    
    // Receipt events
    onMessagesDelivered: (messageReceipt) => {
      console.log("Messages delivered:", messageReceipt.getMessageId());
    },
    onMessagesRead: (messageReceipt) => {
      console.log("Messages read:", messageReceipt.getMessageId());
    },
    
    // Edit/Delete events
    onMessageEdited: (message) => {
      console.log("Message edited:", message.getId());
    },
    onMessageDeleted: (message) => {
      console.log("Message deleted:", message.getId());
    },
    
    // Reaction events
    onMessageReactionAdded: (reaction) => {
      console.log("Reaction added:", reaction.getReaction());
    },
    onMessageReactionRemoved: (reaction) => {
      console.log("Reaction removed:", reaction.getReaction());
    },
    
    // Other events
    onTransientMessageReceived: (message) => {
      console.log("Transient message:", message);
    },
    onMessageModerated: (message) => {
      console.log("Message moderated:", message);
    }
  })
);

// Remove when no longer needed
CometChat.removeMessageListener(listenerID);

TypeScript

const listenerID: string = "MESSAGE_LISTENER";

CometChat.addMessageListener(
  listenerID,
  new CometChat.MessageListener({
    // Message events
    onTextMessageReceived: (textMessage: CometChat.TextMessage): void => {
      console.log("Text message:", textMessage.getText());
    },
    onMediaMessageReceived: (mediaMessage: CometChat.MediaMessage): void => {
      console.log("Media message:", mediaMessage.getAttachment());
    },
    onCustomMessageReceived: (customMessage: CometChat.CustomMessage): void => {
      console.log("Custom message:", customMessage.getCustomData());
    },
    onInteractiveMessageReceived: (message: CometChat.InteractiveMessage): void => {
      console.log("Interactive message:", message);
    },
    
    // Typing events
    onTypingStarted: (typingIndicator: CometChat.TypingIndicator): void => {
      console.log(`${typingIndicator.getSender().getName()} is typing...`);
    },
    onTypingEnded: (typingIndicator: CometChat.TypingIndicator): void => {
      console.log(`${typingIndicator.getSender().getName()} stopped typing`);
    },
    
    // Receipt events
    onMessagesDelivered: (messageReceipt: CometChat.MessageReceipt): void => {
      console.log("Messages delivered:", messageReceipt.getMessageId());
    },
    onMessagesRead: (messageReceipt: CometChat.MessageReceipt): void => {
      console.log("Messages read:", messageReceipt.getMessageId());
    },
    
    // Edit/Delete events
    onMessageEdited: (message: CometChat.BaseMessage): void => {
      console.log("Message edited:", message.getId());
    },
    onMessageDeleted: (message: CometChat.BaseMessage): void => {
      console.log("Message deleted:", message.getId());
    },
    
    // Reaction events
    onMessageReactionAdded: (reaction: CometChat.ReactionEvent): void => {
      console.log("Reaction added:", reaction.getReaction());
    },
    onMessageReactionRemoved: (reaction: CometChat.ReactionEvent): void => {
      console.log("Reaction removed:", reaction.getReaction());
    },
    
    // Other events
    onTransientMessageReceived: (message: CometChat.TransientMessage): void => {
      console.log("Transient message:", message);
    },
    onMessageModerated: (message: CometChat.BaseMessage): void => {
      console.log("Message moderated:", message);
    }
  })
);

// Remove when no longer needed
CometChat.removeMessageListener(listenerID);

---

Call Listener

Handle voice and video call events.

Method	Description
onIncomingCallReceived(call)	Incoming call received
onOutgoingCallAccepted(call)	Outgoing call was accepted
onOutgoingCallRejected(call)	Outgoing call was rejected
onIncomingCallCancelled(call)	Incoming call was cancelled

JavaScript

const listenerID = "CALL_LISTENER";

CometChat.addCallListener(
  listenerID,
  new CometChat.CallListener({
    onIncomingCallReceived: (call) => {
      console.log("Incoming call from:", call.getSender().getName());
      // Show incoming call UI
    },
    onOutgoingCallAccepted: (call) => {
      console.log("Call accepted");
      // Start the call
    },
    onOutgoingCallRejected: (call) => {
      console.log("Call rejected");
      // Handle rejection
    },
    onIncomingCallCancelled: (call) => {
      console.log("Call cancelled");
      // Dismiss incoming call UI
    }
  })
);

// Remove when no longer needed
CometChat.removeCallListener(listenerID);

TypeScript

const listenerID: string = "CALL_LISTENER";

CometChat.addCallListener(
  listenerID,
  new CometChat.CallListener({
    onIncomingCallReceived: (call: CometChat.Call): void => {
      console.log("Incoming call from:", call.getSender().getName());
    },
    onOutgoingCallAccepted: (call: CometChat.Call): void => {
      console.log("Call accepted");
    },
    onOutgoingCallRejected: (call: CometChat.Call): void => {
      console.log("Call rejected");
    },
    onIncomingCallCancelled: (call: CometChat.Call): void => {
      console.log("Call cancelled");
    }
  })
);

// Remove when no longer needed
CometChat.removeCallListener(listenerID);

---

Best Practices

Use Unique Listener IDs

Each listener must have a unique ID. Using duplicate IDs causes events to be lost.

// Good: Unique IDs per component
CometChat.addMessageListener("CHAT_SCREEN_LISTENER", ...);
CometChat.addMessageListener("NOTIFICATION_LISTENER", ...);

// Bad: Same ID
CometChat.addMessageListener("LISTENER", ...);
CometChat.addMessageListener("LISTENER", ...); // Overwrites first!

Always Remove Listeners

Remove listeners when components unmount to prevent memory leaks.

// React example
useEffect(() => {
  CometChat.addMessageListener("MSG_LISTENER", listener);
  
  return () => {
    CometChat.removeMessageListener("MSG_LISTENER");
  };
}, []);

Handle All Relevant Events

Subscribe to all events your UI needs to stay synchronized.

// For a chat screen, handle:
// - New messages (onTextMessageReceived, onMediaMessageReceived)
// - Typing indicators (onTypingStarted, onTypingEnded)
// - Read receipts (onMessagesRead)
// - Edits/deletes (onMessageEdited, onMessageDeleted)

Next Steps

Connection Status

Monitor WebSocket connection state

Login Listener

Handle authentication events