Send a Message

Using CometChat, you can send three types of messages:

  1. A text message, the most common and standard message type.
  2. A media message, for sending photos, videos and files.
  3. A custom message, for sending completely custom data using JSON structures.

You can also send metadata along with a text, media or custom message. Think, for example, if you'd want to share the user's location with every message, you can use the metadata field

Text Message

In other words, as a sender, how do I send a text message?

To send a text message to a single user or group, you need to use the sendMessage() method and pass a TextMessage object to it.

var receiverID = "UID";
var messageText = "Hello world!";
var receiverType = CometChat.RECEIVER_TYPE.USER;
var textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

CometChat.sendMessage(textMessage).then(
  message => {
    console.log("Message sent successfully:", message);
  },
  error => {
    console.log("Message sending failed with error:", error);
  }
);
var receiverID = "GUID";
var messageText = "Hello world!";
var receiverType = CometChat.RECEIVER_TYPE.GROUP;

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

CometChat.sendMessage(textMessage).then(
  message => {
    console.log("Message sent successfully:", message);
  },
  error => {
    console.log("Message sending failed with error:", error);
  }
);

The TextMessage class constructor takes the following parameters:

Parameter

Description

Required

receiverID

UID of the user or GUID of the group receiving the message

YES

messageText

The text message

YES

receiverType

The type of the receiver- CometChatConstants.RECEIVER_TYPE_USER (user) or CometChatConstants.RECEIVER_TYPE_GROUP (group)

YES

When a text message is sent successfully, the response will include a TextMessage object which includes all information related to the sent message.

Add Metadata

To send custom data along with a text message, you can use the setMetadata method and pass a JSONObject to it.

var receiverID = "UID";
var messageText = "Hello World!";
var receiverType = CometChat.RECEIVER_TYPE.USER;
var textMessage = new CometChat.TextMessage(
  receiverID,
  messageText,
  receiverType
);

var metadata = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002"
};

textMessage.setMetadata(metadata);

CometChat.sendMessage(textMessage).then(
  message => {
    console.log("Message sent successfully:", message);
  },
  error => {
    console.log("Message sending failed with error:", error);
  }
);
var receiverID = "GUID";
var messageText = "Hello World!";
var receiverType = CometChat.RECEIVER_TYPE.GROUP;

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

var metadata = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002"
};

textMessage.setMetadata(metadata);

CometChat.sendMessage(textMessage).then(
  message => {
    console.log("Message sent successfully:", message);
  },
  error => {
    console.log("Message sending failed with error:", error);
  }
);

Media Message

In other words, as a sender, how do I send a media message like photos, videos & files?

To send a media message to any user or group, you need to use the sendMediaMessage() method and pass a MediaMessage object to it.

Getting file Object:
You can use different react native packages for sending media messages. We demonstrate how to send images using CometChat.

ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled photo picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  } else {
    console.log('ImagePicker Response: ', response);
    if (Platform.OS === 'ios' && response.fileName != undefined) {
      var ext = response.fileName.split('.')[1].toLowerCase();
      var type = this.getMimeType(ext);
      var name = response.fileName;
    } else {
      var type = response.type;
      var name = 'Camera_001.jpeg';
    }
    var file = {
      name: Platform.OS === "android" ? response.fileName : name,
      type: Platform.OS === "android" ? response.type : type,
      uri: Platform.OS === "android" ? response.uri : response.uri.replace("file://", ""),
    }
    console.log('file: ', file);
    this.setState({ mediaMsg: file })
  }
});
}
var receiverID = "UID";
var messageType = CometChat.MESSAGE_TYPE.FILE;
var receiverType = CometChat.RECEIVER_TYPE.USER;

var mediaMessage = new CometChat.MediaMessage(
  receiverID,
  this.state.mediaMsg,
  messageType,
  receiverType
);

CometChat.sendMediaMessage(mediaMessage).then(
  message => {
    // Message sent successfully.
    console.log("Media message sent successfully", message);
  },
  error => {
    console.log("Media message sending failed with error", error);
    // Handle exception.
  }
);
var receiverID = "GUID";
var messageType = CometChat.MESSAGE_TYPE.FILE;
var receiverType = CometChat.RECEIVER_TYPE.GROUP;

var mediaMessage = new CometChat.MediaMessage(
  receiverID,
  `INPUT FILE OBJECT`,
  messageType,
  receiverType
);

CometChat.sendMediaMessage(mediaMessage).then(
  message => {
    // Message sent successfully.
    console.log("Media message sent successfully", message);
  },
  error => {
    console.log("Media message sending failed with error", error);
    // Handle exception.
  }
);

The MediaMessage class constructor takes the following parameters:

Parameter

Description

Required

receiverId

The UID or GUID of the recipient.

YES

file

The file object to be sent

YES

messageType

The type of the message that needs to be sent which in this case can be:
1.CometChatConstants.MESSAGE_TYPE_IMAGE (image)
2.CometChatConstants.MESSAGE_TYPE_VIDEO (video)
3.CometChatConstants.MESSAGE_TYPE_AUDIO (audio)
4.CometChatConstants.MESSAGE_TYPE_FILE (file)

YES

receiverType

The type of the receiver to whom the message is to be sent i.e CometChatConstants.RECEIVER_TYPE_USER (user) or CometChatConstants.RECEIVER_TYPE_GROUP (group)

YES

When a media message is sent successfully, the response will include a MediaMessage object which includes all information related to the sent message.
If you wish to send a caption or some text along with the Media Message, you can use the caption field provided by the MediaMessage class. While sending the Media Message use the setCaption() method and at the receiver end in the MediaMessage object you can use the getCaption() method to obtain the caption shared.

Add Metadata

To send custom data along with a media message, you can use the setMetadata method and pass a JSONObject to it.

var metadata = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002"
};

mediaMessage.setMetadata(metadata);

Add Caption(Text along with Media Message)

To send a caption with a media message, you can use setCaption method and pass text to it.

var caption = "Random Caption";

mediaMessage.setCaption(caption);

Custom Message

In other words, as a sender, how do I send a custom message like location co-ordinates?

CometChat allows you to send custom messages which are neither text nor media messages.

In order to send a custom message, you need to use the sendCustomMessage() method.

The sendCustomMessage() methods takes an object of the CustomMessage which can be obtained using the below constructor.

var customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

The above constructor, helps you create a custom message with the message type set to whatever is passed to the constructor and the category set to custom.

The parameters involved are:

  1. receiverId - Unique id of the user or group to which the message is to be sent.
  2. receiverType - Type of the receiver i.e user or group
  3. customType - custom message type that you need to set
  4. customData - The data to be passed as the message in the form of a JSONObject.

You can also use the subType field of the CustomMessage class to set a specific type for the custom message. This can be achieved using the setSubtype() method.

Once the object of CustomMessage class is ready you can send the custom message using the sendCustomMessage() method.

var receiverID = "UID";
var customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002"
};

var customType = "location";
var receiverType = CometChat.RECEIVER_TYPE.USER;

var customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChat.sendCustomMessage(customMessage).then(
  message => {
    // Message sent successfully.
    console.log("custom message sent successfully", message);
  },
  error => {
    console.log("custom message sending failed with error", error);
    // Handle exception.
  }
);
var receiverID = "GUID";
var customData = {
  latitude: "50.6192171633316",
  longitude: "-72.68182268750002"
};

var customType = "location";
var receiverType = CometChat.RECEIVER_TYPE.GROUP;

var customMessage = new CometChat.CustomMessage(
  receiverID,
  receiverType,
  customType,
  customData
);

CometChat.sendCustomMessage(customMessage).then(
  message => {
    // Message sent successfully.
    console.log("custom message sent successfully", message);
  },
  error => {
    console.log("custom message sending failed with error", error);
    // Handle exception.
  }
);

The above sample explains how custom messages can be used to share the location with a user. The same can be achieved for groups.

On success, you will receive an object of the CustomMessage class.


Did this page help you?