Methods - CometChat Docs

CometChatUIKit is a class that contains all necessary methods to help initialize the CometChat SDK with valid credentials for the ui kit to utilize. The following properties and methods are present:

Parameters	Type	Description
init	static init(uiKitSettings: UIKitSettings): Promise<boolean>	method initializes the settings required for CometChat SDK. First, ensure `authSettings` is set and then call the `init()` method on app startup
login	static async login({ uid, authToken }: { uid?: string, authToken?: string }): Promise<CometChat.User>	used for logging in with credentials but use this function only for testing purpose
logout	static logout(): Promise<Object>	used for ending user session of logged in user
createUser	static createUser( user: CometChat.User): Promise<CometChat.User>	used for creating new user
updateUser	static updateUser(user: CometChat.User): Promise<CometChat.User> {	used for updating user object
sendCustomMessage	static sendCustomMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.CustomMessage \| CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a custom message
sendTextMessage	static sendTextMessage(message: CometChat.TextMessage, onSuccess?: (msg: CometChat.TextMessage \| CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a text message
sendMediaMessage	static sendMediaMessage(message: CometChat.CustomMessage, onSuccess?: (msg: CometChat.MediaMessage \| CometChat.BaseMessage) => void, onError?: (msg: CometChat.CometChatException) => void): void	can be used to send a media message
sendFormMessage	static sendFormMessage(message: FormMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage \| CometChat.BaseMessage>	can be used to send a form message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
sendCardMessage	static sendCardMessage(message: CardMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage \| CometChat.BaseMessage>	can be used to send a card message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.
sendCustomInteractiveMessage	static sendCustomInteractiveMessage(message: CustomInteractiveMessage, disableLocalEvents: boolean = false): Promise<CometChat.TextMessage \| CometChat.BaseMessage>	can be used to send a custom interactive message. disableLocalEvents - A boolean indicating whether to disable local events or not. Default value is false.

sendTextMessage

Used to send text messages.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const messageText = "Hello world!";
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChatUIKit.sendTextMessage(textMessage)
  .then((message) => {
    console.log("Message sent successfully:", message);
  })
  .catch(console.log);

sendMediaMessage

used to send media messages

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const messageType = CometChatUiKitConstants.MessageTypeConstants.file;
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChatUIKit.sendMediaMessage(mediaMessage)
  .then((message) => {
    console.log("Media message sent successfully", message);
  })
  .catch(console.log);

sendCustomMessage

Used to send custom messages.

TypeScript

import { CometChat } from "@cometchat/chat-sdk-react-native";
import {
  CometChatUIKit,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";

const receiverID = "uid";
const customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002",
};
const customType = "location";
const receiverType = CometChatUiKitConstants.ReceiverTypeConstants.user;
const customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChatUIKit.sendCustomMessage(customMessage)
  .then((message) => {
    console.log("custom message sent successfully", message);
  })
  .catch(console.log);

Send Form message

This method allows you to send Form messages which are the extension of Interactive Message

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create an instance of APIAction
let apiAction = new APIAction("https://example.com/api", "POST");

// Create an instance of ButtonElement
let submitButton = new ButtonElement("1", apiAction, "Submit");

// Create an instance of TextInput
let nameInput = new TextInputElement("1", "Please enter your name");
// Create a new instance of FormMessage

let formMessage = new FormMessage(
  receiverID,
  CometChat.RECEIVER_TYPE.USER,
  "Title",
  [nameInput],
  submitButton
);

const onSuccessSend = (message) => {
  console.log("Form message sent successfully", message);
};

const onErrorSend = (error: CometChat.CometChatException) => {
  console.log("Form message sent error", error);
};

CometChatUIKit.sendFormMessage(
  formMessage,
  undefined,
  onSuccessSend,
  onErrorSend
);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  APIAction,
  ButtonElement,
  TextInput,
  FormMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create an instance of APIAction
let apiAction = new APIAction("https://example.com/api", "POST");
// Create an instance of ButtonElement
let submitButton = new ButtonElement("1", apiAction, "Submit");
// Create an instance of TextInput
let nameInput = new TextInput("1", "Please enter your name");
// Create a new instance of FormMessage
let formMessage = new FormMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  "Title",
  [nameInput],
  submitButton
);

CometChatUIKit.sendFormMessage(formMessage)
  .then((message) => {
    console.log("Form message sent successfully", message);
  })
  .catch(console.log);

Send Card message

This method allows you to send Card messages which are the extension of Interactive Message

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create instance of ButtonElement for card actions
let cardAction = new ButtonElement(
  "1",
  new APIAction("https://example.com/api", "POST"),
  "Click Me"
);
// Create a new instance of CardMessage
let cardMessage = new CardMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.USER,
  "This is a card",
  [cardAction]
);

const onSuccessSend = (message) => {
  console.log("Card message sent successfully", message);
};

const onErrorSend = (error: CometChat.CometChatException) => {
  console.log("Card message sent error", error);
};

CometChatUIKit.sendCardMessage(
  cardMessage,
  undefined,
  onSuccessSend,
  onErrorSend
);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create instance of ButtonElement for card actions
let cardAction = new ButtonElement(
  "1",
  new APIAction("https://example.com/api", "POST"),
  "Click Me"
);
// Create a new instance of CardMessage
let cardMessage = new CardMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  "This is a card",
  [cardAction]
);

CometChatUIKit.sendCardMessage(cardMessage)
  .then((message) => {
    console.log("card message sent successfully", message);
  })
  .catch(console.log);

Send CustomInteractive message

This method allows you to send CustomInteractive messages which are the extension of Interactive Message

1:1 chat
Group chat

import { CometChat } from "@cometchat/chat-sdk-react-native"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react-native"; //import uikit package

const receiverID = "UID";
// Create a new instance of CardMessage
let customMessage = new CustomInteractiveMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.USER,
  json
);

const onSuccess = (message) => {
  console.log("Card message sent successfully", message);
};

const onError = (error: CometChat.CometChatException) => {
  console.log("Card message sent error", error);
};

CometChatUIKit.sendCustomInteractiveMessage(
  cardMessage,
  undefined,
  onSuccess,
  onError
);

import { CometChat } from "@cometchat/chat-sdk-javascript"; //import sdk package
import { CometChatUIKit } from "@cometchat/chat-uikit-react"; //import uikit package
import {
  CometChatUIKitConstants,
  ButtonElement,
  CardMessage,
} from "@cometchat/uikit-resources"; //import shared package

const receiverID = "GUID";
// Create a new instance of CardMessage
let customMessage = new CustomInteractiveMessage(
  "receiverId",
  CometChat.RECEIVER_TYPE.GROUP,
  json
);

CometChatUIKit.sendCustomInteractiveMessage(customMessage)
  .then((message) => {
    console.log("CustomInteractive message sent successfully", message);
  })
  .catch(console.log);

UIKitSettings

UIKitSettings is an object containing credentials to initialize CometChat SDK.

Properties	Type	Description
appId	string	the unique ID for the app, available on dashboard
region	string	the region for the app `us` or `eu`
authKey	string	the auth key for the app, available on dashboard
subscriptionType	string	sets user presence subscription for all users
autoEstablishSocketConnection	Bool	configure if web socket connections will established automatically on app initialization or be done manually, set to true by default
disableCalling	boolean	disable calling
overrideAdminHost	string	used to set the admin host
overrideClientHost	string	used to set the client host

How to initialize the UI Kit?

The UI Kit can be initialized to use CometChatUIKit by populating the auth settings first and the calling the init method. Preferably this should be done at the top most level when the app starts.

infoMake sure you replace the APP_ID, REGION and AUTH_KEY with your CometChat App ID, Region and Auth Key in the below code. The Auth Key is an optional property of the UIKitSettings Class. It is intended for use primarily during proof-of-concept (POC) development or in the early stages of application development. You can use the Auth Token method to log in securely.

JavaScript

//CometChatUIKit should be initialized at the start of application. No need to initialize it again

import {CometChatUIKit} from "@cometchat/chat-uikit-react-native";

let uikitSettings = UIKitSettings({
			APP_ID: "APP_ID", // Replace with your App ID
      REGION: "REGION", // Replace with your App Region
      AUTH_KEY: "AUTH_KEY", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
		})

CometChatUIKit.init(uikitSettings)
		.then(user => {
         console.log("Initialization completed successfully")
    })
		.catch(error => {
          console.log( "Initialization failed with exception:",error)
    })

Only the UID of a user is needed to log in. This simple authentication procedure is useful when you are creating a POC or if you are in the development phase. For production apps, we suggest you use AuthToken instead of Auth Key.

JavaScript

let uid = <# Enter User's UID Here #>

CometChatUIKit.login({uid: uid})
			.then(user => {
                console.log("User logged in successfully")
			catch(error => {
                console.log("Login failed with exception:", error)
            })

This advanced authentication procedure does not use the Auth Key directly in your client code thus ensuring safety.

Create a User via the CometChat API when the user signs up in your app.
Create an Auth Token via the CometChat API for the new user and save the token in your database.
Load the Auth Token in your client and pass it to the login({authToken: authToken}) method.

JavaScript

let authToken = <# Enter User's AuthToken Here #>

CometChatUIKit.login({authToken: authToken})
		.then(user => {
                console.log("User logged in successfully")
      .catch(error => {
        console.log("Login failed with exception:", error)
            })

How to create a new user for your App?

Create an object the new user that needs to created with as little information as the name of the user and a uid and pass it to the create(user: User) method

JavaScript

let uid = <# Enter User's UID Here #>
let name = <# Enter User Name Here #>
let avatar = <# Enter User's Avatar URL Here #>

let user = new CometChat.User(uid,name)
user.setAvatar(avatar)

CometChatUIKit.create(user)
			.then(user => {
                console.log("User created successfully")
      .catch(error => {
        	console.log("Creating new user failed with exception:", error)
            })

How to update a user for your App?

Update an object the user that needs to updated with as little information as the name of the user and a uid and pass it to the update(user: User) method

JavaScript

let uid = <# Enter User's UID Here #>
let name = <# Enter Updated User Name Here #>
let avatar = <# Enter Updated User's Avatar URL Here #>

let user = new CometChat.User(uidname)
user.setAvatar(avatar)

CometChatUIKit.update(user)
		.then(user => {
                console.log("User updated successfully");
    })
      .catch(error => {
        	console.log("Updating  user failed with exception:",error)
            })

How to logout from a logged-In User in App?

just pass the loggedIn-user to the logout method

JavaScript

let uid = <# Enter User's UID Here #>
let name = <# Enter Updated User Name Here #>

let user = new CometChat.User(uid: uid, name: name)

CometChatUIKit.logout(user)
		.then(user => {
                console.log("User logged-out successfully");
		})
      .catch(error => {
        	console.log("Logged-out user failed with exception:", error)
            })

​sendTextMessage

​sendMediaMessage

​sendCustomMessage

​Send Form message

​Send Card message

​Send CustomInteractive message

​UIKitSettings

​How to initialize the UI Kit?

​How to login a user of your App?

​How to login a user with Auth Token?

​How to create a new user for your App?

​How to update a user for your App?

​How to logout from a logged-In User in App?

sendTextMessage

sendMediaMessage

sendCustomMessage

Send Form message

Send Card message

Send CustomInteractive message

UIKitSettings

How to initialize the UI Kit?

How to login a user of your App?

How to login a user with Auth Token?

How to create a new user for your App?

How to update a user for your App?

How to logout from a logged-In User in App?