Skip to main content
FieldValue
Key ClassesTextMessage, MediaMessage, CustomMessage
Key MethodssendMessage(), sendMediaMessage(), sendCustomMessage()
Receiver TypesCometChat.RECEIVER_TYPE.USER, CometChat.RECEIVER_TYPE.GROUP
Message TypesTEXT, IMAGE, VIDEO, AUDIO, FILE, CUSTOM
PrerequisitesSDK initialized, user logged in
CometChat supports three types of messages:
TypeMethodUse Case
TextsendMessage()Plain text messages
MediasendMediaMessage()Images, videos, audio, files
CustomsendCustomMessage()Location, polls, or any JSON data

Text Message

Send a text message using CometChat.sendMessage() with a TextMessage object.
let receiverID: string = "UID",
  messageText: string = "Hello world!",
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  textMessage: CometChat.TextMessage = new CometChat.TextMessage(
    receiverID,
    messageText,
    receiverType
  );

CometChat.sendMessage(textMessage).then(
  (message: CometChat.TextMessage) => {
    console.log("Message sent successfully:", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Message sending failed with error:", error);
  }
);
The TextMessage class constructor takes the following parameters:
ParameterDescriptionRequired
receiverIDUID of the user or GUID of the group receiving the messageYes
messageTextThe text message contentYes
receiverTypeCometChat.RECEIVER_TYPE.USER or CometChat.RECEIVER_TYPE.GROUPYes
On success, sendMessage() method returns a TextMessage | MediaMessage | CustomMessage | BaseMessage object depending on the input message type.

Media Message

Send images, videos, audio, or files using CometChat.sendMediaMessage(). There are two ways to send media messages:
  1. Upload a file — Pass a file object and CometChat uploads it automatically
  2. Send a URL — Provide a URL to media hosted on your server or cloud storage

Upload a File

Get the file from an input element and pass it to MediaMessage:
<input type="file" name="img_file" id="img_file" />
let receiverID: string = "UID",
  messageType: string = CometChat.MESSAGE_TYPE.IMAGE,
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  file: File = (document.getElementById("img_file") as HTMLInputElement).files![0];

let mediaMessage: CometChat.MediaMessage = new CometChat.MediaMessage(
  receiverID,
  file,
  messageType,
  receiverType
);

CometChat.sendMediaMessage(mediaMessage).then(
  (message: CometChat.MediaMessage) => {
    console.log("Media message sent successfully", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Media message sending failed with error", error);
  }
);

Send a URL

Send media hosted on your server or cloud storage using the Attachment class:
let receiverID: string = "UID",
  messageType: string = CometChat.MESSAGE_TYPE.IMAGE,
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  mediaMessage: CometChat.MediaMessage = new CometChat.MediaMessage(
    receiverID,
    "",
    messageType,
    receiverType
  );

let file: Object = {
  name: "mario",
  extension: "png",
  mimeType: "image/png",
  url: "https://pngimg.com/uploads/mario/mario_PNG125.png",
};

let attachment: CometChat.Attachment = new CometChat.Attachment(file);
mediaMessage.setAttachment(attachment);

CometChat.sendMediaMessage(mediaMessage).then(
  (message: CometChat.MediaMessage) => {
    console.log("Media message sent successfully", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Media message sending failed with error", error);
  }
);
The MediaMessage class constructor takes the following parameters:
ParameterDescriptionRequired
receiverIDUID of the user or GUID of the groupYes
fileFile object to upload, or empty string if using URLYes
messageTypeCometChat.MESSAGE_TYPE.IMAGE, VIDEO, AUDIO, or FILEYes
receiverTypeCometChat.RECEIVER_TYPE.USER or GROUPYes
On success, sendMediaMessage() returns a MediaMessage object.

Add Caption

Add text along with the media:
mediaMessage.setCaption("Check out this photo!");

Add Metadata and Tags

Same as text messages:
mediaMessage.setMetadata({ location: "Paris" });
mediaMessage.setTags(["vacation"]);
mediaMessage.setQuotedMessageId(10);
The sendMediaMessage() method returns a MediaMessage object.

Multiple Attachments in a Media Message

Starting version 3.0.9 & above the SDK supports sending multiple attachments in a single media message. As in the case of a single attachment in a media message, there are two ways you can send Media Messages using the CometChat SDK:
  1. By providing an array of files: You can now share an array of files while creating an object of the MediaMessage class. When the media message is sent using the sendMediaMessage() method, the files are uploaded to the CometChat servers & the URL of the files is sent in the success response of the sendMediaMessage() method.
Getting files:
<html>
  <body>
    <input type="file" name="img_file" id="img_file" />
    <script>
      const UID = "UID";
      const files = document.getElementById("img_file").files;
      const fileType = MESSAGE_TYPE.IMAGE;
      const userType = CometChat.RECEIVER_TYPE.USER;
      const mediaMessage = new MediaMessage(UID, files, fileType, userType);
    </script>
  </body>
</html>
let receiverID: string = "UID",
  messageType: string = CometChat.MESSAGE_TYPE.FILE,
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  files: FileList = (document.getElementById("img_file") as HTMLInputElement).files!;

let mediaMessage: CometChat.MediaMessage = new CometChat.MediaMessage(
  receiverID,
  files,
  messageType,
  receiverType
);

CometChat.sendMediaMessage(mediaMessage).then(
  (message: CometChat.MediaMessage) => {
    console.log("Media message sent successfully", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Media message sending failed with error", error);
  }
);

Send Multiple URLs

let receiverID: string = "UID",
  messageType: string = CometChat.MESSAGE_TYPE.IMAGE,
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  mediaMessage: CometChat.MediaMessage = new CometChat.MediaMessage(
    receiverID,
    "",
    messageType,
    receiverType
  );

let attachment1: Object = {
  name: "mario",
  extension: "png",
  mimeType: "image/png",
  url: "https://pngimg.com/uploads/mario/mario_PNG125.png",
};

let attachment2: Object = {
  name: "jaguar",
  extension: "png",
  mimeType: "image/png",
  url: "https://pngimg.com/uploads/jaguar/jaguar_PNG20759.png",
};

let attachments: Array<CometChat.Attachment> = [];
attachments.push(new CometChat.Attachment(attachment1));
attachments.push(new CometChat.Attachment(attachment2));

mediaMessage.setAttachments(attachments);

CometChat.sendMediaMessage(mediaMessage).then(
  (message: CometChat.MediaMessage) => {
    console.log("Media message sent successfully", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Media message sending failed with error", error);
  }
);

Custom Message

Send structured data that doesn’t fit text or media categories — like location coordinates, polls, or game moves.
let receiverID: string = "UID",
  customData: Object = {
    latitude: "50.6192171633316",
    longitude: "-72.68182268750002",
  },
  customType: string = "location",
  receiverType: string = CometChat.RECEIVER_TYPE.USER,
  customMessage: CometChat.CustomMessage = new CometChat.CustomMessage(
    receiverID,
    receiverType,
    customType,
    customData
  );

CometChat.sendCustomMessage(customMessage).then(
  (message: CometChat.CustomMessage) => {
    console.log("Custom message sent successfully", message);
  },
  (error: CometChat.CometChatException) => {
    console.log("Custom message sending failed with error", error);
  }
);
The CustomMessage class constructor takes the following parameters:
ParameterDescriptionRequired
receiverIDUID of the user or GUID of the groupYes
receiverTypeCometChat.RECEIVER_TYPE.USER or GROUPYes
customTypeYour custom type string (e.g., "location", "poll")Yes
customDataJSON object with your custom dataYes
On success, sendCustomMessage() returns a CustomMessage object.

Add Tags

customMessage.setTags(["starredMessage"]);

Quote a Message

customMessage.setQuotedMessageId(10);

Control Conversation Update

By default, custom messages update the conversation’s last message. To prevent this:
customMessage.shouldUpdateConversation(false);

Custom Notification Text

Set custom text for push, email, and SMS notifications:
customMessage.setConversationText("Shared a location");
The sendCustomMessage() method returns a CustomMessage object.

Next Steps

Receive Messages

Listen for incoming messages in real-time

Edit Message

Edit previously sent messages

Delete Message

Delete sent messages