CometChat Pro Documentation

You'll find comprehensive guides and documentation to help you start working with CometChat as quickly as possible. Let's jump right in!

Quick Start

This guide demonstrates how to add chat to a Javascript application using CometChat. Before you begin, we strongly recommend you read the Key Concepts guide.

I want to explore a sample app (includes UI)

Import the app into Android Studio and follow the steps mentioned in the README.md file.

Download sample app

View on Github

Get your Application Keys

Signup for CometChat and then:

  1. Create a new app
  2. Head over to the API Keys section and click on the Create API Key button
  3. Enter a name and select the scope as Auth Only
  4. Now note the API Key and App ID

Add the CometChat Dependency

NPM

First, install via npm

npm install @cometchat-pro/chat@1.8 --save
npm install @cometchat-pro/react-native-chat --save

Then, import the CometChat object wherever you want to use CometChat

import { CometChat } from "@cometchat-pro/chat"
import { CometChat } from "@cometchat-pro/react-native-chat"

HTML (via CDN)

Include the CometChat Javascript library in your HTML code

<script type="text/javascript" src="https://unpkg.com/@cometchat-pro/chat@1.8/CometChat.js"></script>

Initialize CometChat

The init() method initializes the settings required for CometChat.

You need to call init() before calling any other method from CometChat.

var appID = "APP_ID";

CometChat.init(appID).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  error => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);

Make sure you replace the APP_ID with your CometChat App ID in the above code.

Login your user

Once initialization is successful, you will need to log the user into CometChat using the login() method.

We recommend you call the CometChat login method once your user logs into your app.

var UID = "SUPERHERO1";
var apiKey = "API_KEY";

CometChat.login(UID, apiKey).then(
  user => {
    console.log("Login Successful:", { user });    
  },
  error => {
    console.log("Login failed with exception:", { error });    
  }
);

Make sure you replace the API_KEY with your CometChat API Key in the above code.

Sample Users

We have set-up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4 and SUPERHERO5.

The login() method returns the User object on Promise resolved containing all the information of the logged in user.

Send a message

Once your user has logged in, you can send a message using the sendMessage() method.

var receiverID = "SUPERHERO2";
var messageText = "Hello";
var messageType = CometChat.MESSAGE_TYPE.TEXT;
var receiverType = CometChat.RECEIVER_TYPE.USER;

var textMessage = new CometChat.TextMessage(receiverID, messageText, messageType, receiverType);

CometChat.sendMessage(textMessage).then(
  message => {
    console.log("Message sent successfully:", message);
    // Do something with message
  },
  error => {
    console.log("Message sending failed with error:", error);
    // Handle any error
  }
);
Parameter
Description

receiverID

The UID or GUID of the recipient

messageText

The message string to be sent

messageType

The type of the message that needs to be sent which in this case is MESSAGE_TYPE.TEXT (text)

receiverType

The type of the receiver to whom the message is to be sent i.e RECEIVER_TYPE.USER (user) or RECEIVER_TYPE.GROUP (group)

Once the message is sent successfully, you will receive the message information as TextMessage object on Promise resolved.

Receive Messages

You can add multiple MessageListener using the addMessageListener() method, to receive incoming message wherever you need.

var listenerID = "UNIQUE_LISTENER_ID";

CometChat.addMessageListener(listenerID, new CometChat.MessageListener({
  onTextMessageReceived: message => {
    console.log("Message received successfully:", message);
    // Handle text message
  }
}));
Parameter
Description

listenerID

An ID that uniquely identifies that listener. We recommend using the activity or fragment name


What's Next

To add more functionality, check our Messaging and Calling guides.

Messaging
Calling

Quick Start


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.