Quick Reference for AI Agents & Developers // Core Entities
User → uid , name , avatar , status , metadata
Group → guid , name , type ( public / password / private ), membersCount
Message → id , sender , receiver , type ( text / media / custom ), category
Conversation → conversationId , type ( user / group ), lastMessage , unreadCount
// Key Constants
CometChat . RECEIVER_TYPE . USER | GROUP
CometChat . MESSAGE_TYPE . TEXT | IMAGE | VIDEO | AUDIO | FILE
CometChat . GROUP_TYPE . PUBLIC | PASSWORD | PRIVATE
CometChat . GROUP_MEMBER_SCOPE . ADMIN | MODERATOR | PARTICIPANT
// Essential Listeners
MessageListener → onTextMessageReceived , onMediaMessageReceived , onTypingStarted
UserListener → onUserOnline , onUserOffline
GroupListener → onGroupMemberJoined , onGroupMemberLeft , onGroupMemberKicked
CallListener → onIncomingCallReceived , onOutgoingCallAccepted
ConnectionListener → onConnected , onDisconnected
// Security: Auth Key (dev only) vs Auth Token (production)
// Use REST API Key server-side only, never expose in client
Before diving into implementation, understanding these core concepts will help you build better chat experiences. This guide covers everything you need to know about how CometChat works.
How CometChat Works
CometChat provides the messaging infrastructure so you can focus on your app’s unique features.
Component What It Does When to Use SDK Real-time messaging from client Sending/receiving messages, presence, typing REST API Server-side operations Creating users, generating auth tokens Dashboard Configuration & monitoring Setup, analytics, testing WebSocket Real-time event delivery Automatic (SDK manages this)
Key Principle: CometChat handles messaging infrastructure. You handle user management and business logic in your app.
CometChat Dashboard
The CometChat Dashboard is your control center:
Create Your App
Sign up and create a new app. Choose a region closest to your users.
Get Credentials
Navigate to API & Auth Keys to find your App ID, Region, and Auth Key.
Configure Features
Enable extensions, set up webhooks, and configure settings.
Test with Sample Users
Use the pre-created test users (cometchat-uid-1 to cometchat-uid-5) for development.
Monitor Usage
Track messages, users, and API calls in the Analytics section.
How many apps should I create? Create two apps : one for development and one for production. Use a single app across all platforms (web, iOS, Android) so users can communicate regardless of their device.
API Keys & Security
CometChat provides different keys for different purposes:
Key Access Level Where to Use Security App ID Identifies your app Client & Server Public (safe to expose) Auth Key Create/login users Client (dev only) ⚠️ Development only REST API Key Full admin access Server only 🔒 Never expose Auth Token Single user session Client ✅ Production recommended
Security Rules:
Never expose REST API Key in client code
Use Auth Key only during development
In production, generate Auth Tokens server-side
Users
A User represents anyone who can send or receive messages in your app.
User Lifecycle
User Identifier (UID)
Each user needs a unique identifier:
Rule Valid Invalid Alphanumeric user123, john_doe- Underscores user_name- Hyphens user-456- No spaces - user 123No special chars - john@doe, user.nameCase-sensitive User1 ≠ user1-
Best Practice: Use the same user ID from your database as the CometChat UID for easy mapping.
User Properties
// Creating a user with all properties
const user = new CometChat . User ( "user123" );
user . setName ( "John Doe" );
user . setAvatar ( "https://example.com/avatar.png" );
user . setRole ( "premium" );
user . setMetadata ({
department: "Engineering" ,
location: "New York"
});
user . setTags ([ "developer" , "team-alpha" ]);
user . setStatusMessage ( "Available for chat" );
// Create the user (requires Auth Key)
CometChat . createUser ( user , authKey );
Property Type Description Editable uidstring Unique identifier Create only namestring Display name ✅ avatarstring Profile picture URL ✅ rolestring Role for filtering/permissions ✅ metadataobject Custom JSON data ✅ tagsarray Tags for categorization ✅ statusMessagestring Custom status text ✅ statusstring online / offline❌ (system) lastActiveAtnumber Last activity timestamp ❌ (system)
User Roles
Roles help you segment users and control features:
// Filter users by role
const usersRequest = new CometChat . UsersRequestBuilder ()
. setRoles ([ "premium" , "moderator" ])
. build ();
// Subscribe to presence for specific roles only
const appSettings = new CometChat . AppSettingsBuilder ()
. subscribePresenceForRoles ([ "premium" , "vip" ])
. setRegion ( region )
. build ();
Example Role Use Case defaultRegular users premiumPaid subscribers moderatorContent moderators adminApp administrators supportCustomer support agents
Groups
A Group enables multiple users to communicate together.
Group Types
Type Visibility Join Method Use Case Public Everyone Open join Community channels, public forums Password Everyone Password required Semi-private rooms, events Private Members only Invitation (auto-join) Team chats, support tickets
// Create different group types
const publicGroup = new CometChat . Group (
"community" ,
"Community Chat" ,
CometChat . GROUP_TYPE . PUBLIC
);
const passwordGroup = new CometChat . Group (
"event-123" ,
"VIP Event" ,
CometChat . GROUP_TYPE . PASSWORD ,
"secretPassword"
);
const privateGroup = new CometChat . Group (
"team-alpha" ,
"Team Alpha" ,
CometChat . GROUP_TYPE . PRIVATE
);
Member Scopes (Permissions)
Scope Assigned To Capabilities Admin Group creator (default) Full control: delete group, manage all members, change settings Moderator Promoted by admin Moderate: kick/ban participants, update group info Participant All other members Basic: send/receive messages, join calls
// Add member with specific scope
const member = new CometChat . GroupMember (
"user123" ,
CometChat . GROUP_MEMBER_SCOPE . MODERATOR
);
// Change member scope
CometChat . updateGroupMemberScope (
"group-guid" ,
"user123" ,
CometChat . GROUP_MEMBER_SCOPE . ADMIN
);
Group Properties
// Create group with all properties
const group = new CometChat . Group (
"team-123" , // GUID
"Engineering Team" , // Name
CometChat . GROUP_TYPE . PRIVATE
);
group . setIcon ( "https://example.com/group-icon.png" );
group . setDescription ( "Engineering team discussions" );
group . setMetadata ({ department: "Engineering" , project: "Alpha" });
group . setTags ([ "engineering" , "internal" ]);
CometChat . createGroup ( group );
Messages
Messages are the core of chat functionality. CometChat supports multiple message types and categories.
Message Categories & Types
Category Description Examples messageStandard messages Text, images, videos, files customYour custom types Location, polls, payments actionSystem events Member joined, message deleted callCall events Call initiated, ended
Sending Different Message Types
Text Message
Media Message
Custom Message
Async/Await
const textMessage = new CometChat . TextMessage (
"receiver-uid" , // Receiver UID or GUID
"Hello, how are you?" , // Message text
CometChat . RECEIVER_TYPE . USER // USER or GROUP
);
// Optional: Add metadata
textMessage . setMetadata ({ priority: "high" });
// Optional: Add tags
textMessage . setTags ([ "important" ]);
CometChat . sendMessage ( textMessage ). then (
( message ) => console . log ( "Sent:" , message ),
( error ) => console . log ( "Error:" , error )
);
// From file input
const file = document . getElementById ( "fileInput" ). files [ 0 ];
const mediaMessage = new CometChat . MediaMessage (
"receiver-uid" ,
file ,
CometChat . MESSAGE_TYPE . IMAGE , // IMAGE, VIDEO, AUDIO, FILE
CometChat . RECEIVER_TYPE . USER
);
// Optional: Add caption
mediaMessage . setCaption ( "Check out this photo!" );
CometChat . sendMediaMessage ( mediaMessage ). then (
( message ) => console . log ( "Sent:" , message ),
( error ) => console . log ( "Error:" , error )
);
// Example: Location message
const customMessage = new CometChat . CustomMessage (
"receiver-uid" ,
CometChat . RECEIVER_TYPE . USER ,
"location" , // Your custom type
{
latitude: 37.7749 ,
longitude: - 122.4194 ,
address: "San Francisco, CA"
}
);
CometChat . sendCustomMessage ( customMessage ). then (
( message ) => console . log ( "Sent:" , message ),
( error ) => console . log ( "Error:" , error )
);
// Text message
async function sendTextMessage ( receiverID , text , isGroup = false ) {
const receiverType = isGroup
? CometChat . RECEIVER_TYPE . GROUP
: CometChat . RECEIVER_TYPE . USER ;
const textMessage = new CometChat . TextMessage (
receiverID ,
text ,
receiverType
);
try {
const message = await CometChat . sendMessage ( textMessage );
console . log ( "Sent:" , message );
return message ;
} catch ( error ) {
console . error ( "Error:" , error );
throw error ;
}
}
// Media message
async function sendMediaMessage ( receiverID , file , type , isGroup = false ) {
const receiverType = isGroup
? CometChat . RECEIVER_TYPE . GROUP
: CometChat . RECEIVER_TYPE . USER ;
const mediaMessage = new CometChat . MediaMessage (
receiverID ,
file ,
type ,
receiverType
);
try {
const message = await CometChat . sendMediaMessage ( mediaMessage );
console . log ( "Sent:" , message );
return message ;
} catch ( error ) {
console . error ( "Error:" , error );
throw error ;
}
}
// Custom message
async function sendCustomMessage ( receiverID , customType , data , isGroup = false ) {
const receiverType = isGroup
? CometChat . RECEIVER_TYPE . GROUP
: CometChat . RECEIVER_TYPE . USER ;
const customMessage = new CometChat . CustomMessage (
receiverID ,
receiverType ,
customType ,
data
);
try {
const message = await CometChat . sendCustomMessage ( customMessage );
console . log ( "Sent:" , message );
return message ;
} catch ( error ) {
console . error ( "Error:" , error );
throw error ;
}
}
// Usage
await sendTextMessage ( "user123" , "Hello!" );
await sendMediaMessage ( "user123" , file , CometChat . MESSAGE_TYPE . IMAGE );
await sendCustomMessage ( "user123" , "location" , { latitude: 37.7749 , longitude: - 122.4194 });
Message Properties
Property Method Description ID getId()Unique message identifier Sender getSender()User who sent the message Receiver getReceiver()User or Group receiving Type getType()text, image, video, etc. Category getCategory()message, custom, action, call Sent At getSentAt()Timestamp when sent Delivered At getDeliveredAt()When delivered Read At getReadAt()When read Edited At getEditedAt()When edited (if edited) Deleted At getDeletedAt()When deleted (if deleted) Metadata getMetadata()Custom data attached Tags getTags()Tags for filtering
Conversations
A Conversation represents a chat thread and is automatically created when messages are exchanged.
Conversation Types
Type Description Created When User One-on-one chat First message between two users Group Group chat User joins or messages a group
Conversation Properties
// Fetch conversations
const conversationsRequest = new CometChat . ConversationsRequestBuilder ()
. setLimit ( 30 )
. build ();
conversationsRequest . fetchNext (). then (( conversations ) => {
conversations . forEach (( conversation ) => {
// Conversation details
console . log ( "ID:" , conversation . getConversationId ());
console . log ( "Type:" , conversation . getConversationType ()); // "user" or "group"
console . log ( "Unread:" , conversation . getUnreadMessageCount ());
console . log ( "Updated:" , conversation . getUpdatedAt ());
// Last message
const lastMessage = conversation . getLastMessage ();
console . log ( "Last message:" , lastMessage ?. getText ());
// Conversation partner (user or group)
const partner = conversation . getConversationWith ();
console . log ( "With:" , partner . getName ());
});
});
async function fetchConversations () {
const conversationsRequest = new CometChat . ConversationsRequestBuilder ()
. setLimit ( 30 )
. build ();
try {
const conversations = await conversationsRequest . fetchNext ();
conversations . forEach (( conversation ) => {
console . log ( "ID:" , conversation . getConversationId ());
console . log ( "Type:" , conversation . getConversationType ());
console . log ( "Unread:" , conversation . getUnreadMessageCount ());
console . log ( "Updated:" , conversation . getUpdatedAt ());
const lastMessage = conversation . getLastMessage ();
console . log ( "Last message:" , lastMessage ?. getText ());
const partner = conversation . getConversationWith ();
console . log ( "With:" , partner . getName ());
});
return conversations ;
} catch ( error ) {
console . log ( "Error:" , error );
throw error ;
}
}
Property Method Description ID getConversationId()Unique conversation ID Type getConversationType()user or groupLast Message getLastMessage()Most recent message Unread Count getUnreadMessageCount()Number of unread messages Updated At getUpdatedAt()Last activity timestamp Conversation With getConversationWith()User or Group object Tags getTags()Conversation tags
Building a Chat List
// Typical "Recent Chats" implementation
async function loadRecentChats () {
const request = new CometChat . ConversationsRequestBuilder ()
. setLimit ( 30 )
. build ();
const conversations = await request . fetchNext ();
return conversations . map (( conv ) => ({
id: conv . getConversationId (),
name: conv . getConversationWith (). getName (),
avatar: conv . getConversationWith (). getAvatar (),
lastMessage: conv . getLastMessage ()?. getText () || "No messages" ,
unreadCount: conv . getUnreadMessageCount (),
timestamp: conv . getUpdatedAt (),
isGroup: conv . getConversationType () === "group"
}));
}
Real-Time Events
CometChat uses WebSocket connections to deliver events instantly. You register listeners to handle these events.
Available Listeners
Listener Events Use Case MessageListener Messages, typing, receipts, reactions Chat UI updates UserListener Online/offline status Presence indicators GroupListener Member changes, scope changes Group roster updates CallListener Incoming/outgoing calls Call handling ConnectionListener Connected/disconnected Network status UI
Registering Listeners
Message Listener
User Listener
Group Listener
Connection Listener
const listenerID = "UNIQUE_MESSAGE_LISTENER" ;
CometChat . addMessageListener (
listenerID ,
new CometChat . MessageListener ({
onTextMessageReceived : ( message ) => {
console . log ( "Text received:" , message . getText ());
// Update your chat UI
},
onMediaMessageReceived : ( message ) => {
console . log ( "Media received:" , message . getAttachment ());
},
onTypingStarted : ( typingIndicator ) => {
console . log ( typingIndicator . getSender (). getName (), "is typing..." );
},
onTypingEnded : ( typingIndicator ) => {
console . log ( typingIndicator . getSender (). getName (), "stopped typing" );
},
onMessagesDelivered : ( receipt ) => {
console . log ( "Message delivered:" , receipt . getMessageId ());
},
onMessagesRead : ( receipt ) => {
console . log ( "Message read:" , receipt . getMessageId ());
},
onMessageEdited : ( message ) => {
console . log ( "Message edited:" , message . getId ());
},
onMessageDeleted : ( message ) => {
console . log ( "Message deleted:" , message . getId ());
}
})
);
// Remove when done (e.g., component unmount)
CometChat . removeMessageListener ( listenerID );
const listenerID = "UNIQUE_USER_LISTENER" ;
CometChat . addUserListener (
listenerID ,
new CometChat . UserListener ({
onUserOnline : ( user ) => {
console . log ( user . getName (), "is now online" );
// Update presence indicator to green
},
onUserOffline : ( user ) => {
console . log ( user . getName (), "went offline" );
console . log ( "Last seen:" , user . getLastActiveAt ());
// Update presence indicator to gray
}
})
);
// Remove when done
CometChat . removeUserListener ( listenerID );
const listenerID = "UNIQUE_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" );
},
onGroupMemberScopeChanged : ( message , user , newScope , oldScope , group ) => {
console . log ( user . getName (), "scope changed:" , oldScope , "→" , newScope );
},
onMemberAddedToGroup : ( message , addedUser , addedBy , addedTo ) => {
console . log ( addedUser . getName (), "was added by" , addedBy . getName ());
}
})
);
// Remove when done
CometChat . removeGroupListener ( listenerID );
const listenerID = "UNIQUE_CONNECTION_LISTENER" ;
CometChat . addConnectionListener (
listenerID ,
new CometChat . ConnectionListener ({
onConnected : () => {
console . log ( "Connected to CometChat" );
// Hide offline banner, enable send button
},
inConnecting : () => {
console . log ( "Connecting..." );
// Show "Reconnecting..." indicator
},
onDisconnected : () => {
console . log ( "Disconnected from CometChat" );
// Show offline banner, disable send button
}
})
);
// Remove when done
CometChat . removeConnectionListener ( listenerID );
Important Rules:
Use unique listener IDs - duplicate IDs will overwrite previous listeners
Remove listeners when components unmount to prevent memory leaks
Register listeners after login - they won’t work before authentication
Integration Patterns
Pattern 1: User Registration Flow
Pattern 2: Existing User Login Flow
Pattern 3: Chat Screen Initialization
// Typical chat screen setup
async function initializeChatScreen ( conversationId , conversationType ) {
// 1. Register message listener
CometChat . addMessageListener (
"CHAT_SCREEN_LISTENER" ,
new CometChat . MessageListener ({
onTextMessageReceived : ( message ) => addMessageToUI ( message ),
onMediaMessageReceived : ( message ) => addMessageToUI ( message ),
onTypingStarted : ( indicator ) => showTypingIndicator ( indicator ),
onTypingEnded : ( indicator ) => hideTypingIndicator ( indicator ),
onMessagesRead : ( receipt ) => updateReadStatus ( receipt )
})
);
// 2. Fetch message history
const messagesRequest = new CometChat . MessagesRequestBuilder ()
[ conversationType === "user" ? "setUID" : "setGUID" ]( conversationId )
. setLimit ( 30 )
. build ();
const messages = await messagesRequest . fetchPrevious ();
displayMessages ( messages );
// 3. Mark conversation as read
if ( messages . length > 0 ) {
CometChat . markAsRead ( messages [ messages . length - 1 ]);
}
}
// Cleanup when leaving chat screen
function cleanupChatScreen () {
CometChat . removeMessageListener ( "CHAT_SCREEN_LISTENER" );
}
Integration Checklist
Step Your App CometChat When User signs up Save to database Create user (REST API) Registration User logs in Verify credentials Generate auth token → SDK login Login Open chat list - Fetch conversations App load Open chat - Fetch messages, add listeners Enter chat Send message - SDK handles User action Receive message - Listener callback Real-time User logs out Clear session CometChat.logout()Logout
Common Patterns & Best Practices
Syncing Users Between Your App and CometChat
When to create CometChat users:
Create during user registration in your app
Use the same UID as your database user ID
// Your server-side code (Node.js example)
async function registerUser ( email , password , name ) {
// 1. Create user in your database
const user = await db . users . create ({ email , password , name });
// 2. Create user in CometChat
await fetch ( `https://api- ${ REGION } .cometchat.io/v3/users` , {
method: "POST" ,
headers: {
"apiKey" : REST_API_KEY ,
"Content-Type" : "application/json"
},
body: JSON . stringify ({
uid: user . id , // Use same ID
name: name
})
});
return user ;
}
Handling Offline/Online States
// Track connection status
let isOnline = false ;
const pendingMessages = [];
CometChat . addConnectionListener (
"CONNECTION_HANDLER" ,
new CometChat . ConnectionListener ({
onConnected : () => {
isOnline = true ;
// Send any queued messages
pendingMessages . forEach ( msg => CometChat . sendMessage ( msg ));
pendingMessages . length = 0 ;
},
onDisconnected : () => {
isOnline = false ;
}
})
);
// Queue messages when offline
function sendMessage ( message ) {
if ( isOnline ) {
return CometChat . sendMessage ( message );
} else {
pendingMessages . push ( message );
return Promise . resolve ( message ); // Optimistic UI
}
}
Efficient Listener Management
// React example with cleanup
useEffect (() => {
const listenerID = `chat- ${ conversationId } ` ;
CometChat . addMessageListener (
listenerID ,
new CometChat . MessageListener ({
onTextMessageReceived: handleNewMessage
})
);
// Cleanup on unmount or conversation change
return () => {
CometChat . removeMessageListener ( listenerID );
};
}, [ conversationId ]);
Pagination for Large Lists
Quick Reference
SDK Constants
// Receiver Types
CometChat . RECEIVER_TYPE . USER
CometChat . RECEIVER_TYPE . GROUP
// Message Types
CometChat . MESSAGE_TYPE . TEXT
CometChat . MESSAGE_TYPE . IMAGE
CometChat . MESSAGE_TYPE . VIDEO
CometChat . MESSAGE_TYPE . AUDIO
CometChat . MESSAGE_TYPE . FILE
// Group Types
CometChat . GROUP_TYPE . PUBLIC
CometChat . GROUP_TYPE . PASSWORD
CometChat . GROUP_TYPE . PRIVATE
// Member Scopes
CometChat . GROUP_MEMBER_SCOPE . ADMIN
CometChat . GROUP_MEMBER_SCOPE . MODERATOR
CometChat . GROUP_MEMBER_SCOPE . PARTICIPANT
// Call Types
CometChat . CALL_TYPE . AUDIO
CometChat . CALL_TYPE . VIDEO
// User Status
CometChat . USER_STATUS . ONLINE
CometChat . USER_STATUS . OFFLINE
Common Methods Cheat Sheet
Action Method Initialize CometChat.init(appID, appSettings)Login CometChat.login(uid, authKey) or CometChat.login(authToken)Logout CometChat.logout()Get logged-in user CometChat.getLoggedinUser()Send text message CometChat.sendMessage(textMessage)Send media CometChat.sendMediaMessage(mediaMessage)Fetch messages messagesRequest.fetchPrevious()Fetch conversations conversationsRequest.fetchNext()Fetch users usersRequest.fetchNext()Fetch groups groupsRequest.fetchNext()Join group CometChat.joinGroup(guid, type, password?)Leave group CometChat.leaveGroup(guid)Mark as read CometChat.markAsRead(message)Start typing CometChat.startTyping(typingIndicator)End typing CometChat.endTyping(typingIndicator)
Glossary
Quick reference for terms used throughout the CometChat JavaScript SDK documentation.
Term Definition UID User Identifier. A unique string you assign to each user. Alphanumeric, underscores, and hyphens only. GUID Group Unique Identifier. A unique string you assign to each group. Same character rules as UID. App ID Your application’s unique identifier from the CometChat Dashboard . Safe to include in client code. Auth Key A key for client-side login during development. Never use in production — use Auth Tokens instead. Auth Token A short-lived token generated server-side via REST API. The secure way to authenticate users in production. REST API Key A server-only key with full admin access. Never expose in client-side code. Region The server region your app runs on (us, eu, or in). Set during app creation. Receiver Type Whether a message target is a USER or GROUP. Set via CometChat.RECEIVER_TYPE. Message Category High-level classification: message, custom, action, or call. Message Type Specific type within a category: text, image, video, audio, file, or your custom types. Scope A group member’s permission level: admin, moderator, or participant. Listener A callback object registered with the SDK to receive real-time events (messages, presence, group changes, calls). Conversation An auto-created thread between a user pair or within a group. Tracks last message and unread count. Metadata Arbitrary JSON data you can attach to users, groups, or messages for custom use cases. Tags String labels you can attach to users, groups, messages, or conversations for filtering and categorization.
Next Steps