/ SDKs / JavaScript
SDKs
Chat SDKs JavaScript v4
Chat SDKs JavaScript
Chat SDKs
JavaScript
Version 4

Send a message

Copy link

For both open and group channels, users can send messages of the following types to the channel they are in.

List of message types

Copy link
Message typeClassDescription

Text

UserMessage

A text message sent by a user

File

FileMessage

A binary file message sent by a user.

File

MultipleFilesMessage

A message with multiple files sent by a user.

In addition to these message types, you can further subclassify a message by specifying its custom type. This custom type takes on the form of String and can be used to search or filter messages. It allows you to append information to your message and customize message categorization.

The following code shows several types of parameters that you can configure to customize text messages by using UserMessageCreateParams. Under the UserMessageCreateParams object, you can assign specific values to message, data and other properties. By assigning arbitrary string to the data property, you can set custom font size, font type or JSON object. To send your messages, you need to pass the UserMessageCreateParams object as an argument to the parameter in the sendUserMessage() method.

Through the callback function of the sendUserMessage() method, the Sendbird server always notifies whether your text message has been successfully sent to the channel. When there is a delivery failure due to network issues, an exception is returned through the callback function.

JavaScriptTypeScript
const params = {
    message: TEXT_MESSAGE,
    customType: CUSTOM_TYPE,
    data: DATA,
    mentionType: MentionType.USERS,
    mentionedUserIds: ['Jeff', 'Julia'],                // Or mentionedUsers = Array<User>;
    metaArrays: [        // A pair of key-value
    new MessageMetaArray({ key: 'itemType', value: ['tablet'] }),
    new MessageMetaArray({ key: 'quality', value: ['best', 'good'] })
    ],
    translationTargetLanguages: ['fe', 'de'],        // French and German
    pushNotificationDeliveryOption: PushNotificationDeliveryOption.DEFAULT,        // Either DEFAULT or SUPPRESS
};
channel.sendUserMessage(params)
    .onSucceeded((message) => {
        // A text message with detailed configuration is successfully sent to the channel.
        // By using userMessage.messageId, userMessage.message, userMessage.customType, and so on,
        // you can access the result object from the Sendbird server to check your UserMessageCreateParams configuration.
        // The current user can receive messages from other users through the onMessageReceived() method of an event handler.
    const messageId = userMessage.messageId;

        // ...
    });

A user can also send a binary file through the Chat SDK as the file itself or using a URL.

Sending a raw file means you're uploading it to the Sendbird server where it can be downloaded in client apps. When you upload a file directly to the server, there is a size limit imposed on the file depending on your plan. You can see the limit on your dashboard and contact our sales team to adjust the limit.

The other option is to send a file hosted on your server. You can pass the file's URL, which represents its location, as an argument to sendFileMessage(). In this case, your file isn't hosted on the Sendbird server and it can only be downloaded from your own server. When you send a file message with a URL, there is no limit on the file size since it's not directly uploaded to the Sendbird server.

Note: You can use sendFileMessages(), which is another method that allows you to send up to 20 file messages per one method call. Refer to our API Reference to learn more.

The following code shows several types of parameters that you can configure to customize file messages by using FileMessageCreateParams. Under the FileMessageCreateParams object, you can assign specific values to customType and other properties. To send your messages, you need to pass the FileMessageCreateParams object as an argument to the parameter in the sendFileMessage() method.

Through the callback function of the sendFileMessage() method, the Sendbird server always notifies whether your file message has been successfully sent to the channel. When there is a delivery failure due to network issues, an exception is returned through the callback function.

JavaScriptTypeScript
// Send a file message with a raw file.
const params: FileMessageCreateParams = {
    file: FILE, // Or .fileUrl = FILE_URL (You can also send a file message with a file URL.)
    fileName: FILE_NAME,
    fileSize: FILE_SIZE,
    thumbnailSizes: [{maxWidth: 100, maxHeight: 100}, {maxWidth: 200, maxHeight: 200}],
        // Add the maximum sizes of thumbnail images.
        // Up to three thumbnail images are allowed.
    mimeType: MIME_TYPE,
    customType: CUSTOM_TYPE,
    mentionType: MentionType.USERS, // Either USERS or CHANNEL
    mentionedUserIds: ['Jeff', 'Julia'], // Or mentionedUsers = Array<User>;
    pushNotificationDeliveryOption: PushNotificationDeliveryOption.DEFAULT, // Either DEFAULT or SUPPRESS
};
channel.sendFileMessage(params)
    .onSucceeded((message: FileMessage) => {
        // A file message with detailed configuration is successfully sent to the channel.
        // By using fileMessage.messageId, fileMessage.fileName, fileMessage.customType, and so on,
        // you can access the result object from the Sendbird server to check your FileMessageCreateParams configuration.
        // The current user can receive messages from other users through the onMessageReceived() method of an event handler.
        const messageId = fileMessage.messageId;
    });

You can also send a message with multiple files through sendMultipleFilesMessage() by passing an object MultipleFilesMessageCreateParams. The params contains uploadableFileInfoList, which holds an array of uploadableFileInfo objects. A single uploadableFileInfo object contains the data of each file such as fileUrl and fileSize.

jsTypeScript
const params = {
fileInfoList: [
    {
    file: fileOne,
    fileSize: fileOne.size,
    fileName: fileOne.name,
    mimeType: fileOne.type,
    // Add the maximum sizes of thumbnail images.
    // Up to three thumbnail images are allowed.
    thumbnailSizes: [
        {maxWidth: 100, maxHeight: 100},
        {maxWidth: 200, maxHeight: 200}
    ],
    },
    {
    file: fileTwo,
    fileSize: fileTwo.size,
    fileName: fileTwo.name,
    mimeType: fileTwo.type,
    thumbnailSizes: [
        {maxWidth: 100, maxHeight: 100},
        {maxWidth: 200, maxHeight: 200}
    ],
    },
]
};

groupChannel.sendMultipleFilesMessage(params)
.onPending((message) => {
    // ...
})
.onFailed((err, message) => {
    // ...
})
.onSucceeded((message) => {
    // ...
})
.onFileUploaded((
    requestId,
    index,
    uploadableFileInfo,
    err
) => {
    // ...
});

Once all of the files were uploaded to the Sendbird server and its message was successfully sent, file-related data is contained in the message object's fileInfoList as an array of UploadedFileInfo.

If the upload of some of the files fail while others succeed, the message is marked as failed and the server returns the URL of successfully uploaded files in a failed message through onResult(). You could use the URLs when retrying the message request.