Chat JavaScript v4
Chat JavaScript
Chat
JavaScript
Home
/
Chat
/
JavaScript
/
Open channel
This is the new Docs for Chat SDK v4 beta for JavaScript. To see the previous Docs, click here.

Open channel: Advanced

This page explains the advanced features for open channels.


Send an admin message

You can send an admin message to an open channel using Sendbird Dashboard or Chat Platform API. To send the admin message through your dashboard, on the Chat > Open channels, select an open channel, find a message box below, click the Admin message tab, and then write your message in the box. An admin message is limited to 1,000 characters.


Add extra data to a message

You have the option to create further actions in a channel by using extra data in a message. You can add one or more key-values items to a message which you can save, update, or remove, when necessary. Based on those items, you can design and implement several different actions such as measuring user engagement within a chosen time limit through polls or counting how many times a message has been copied by participants.

Note: For the quality of performance, every Sendbird application has its own limits to how many key-values items you can add to a single message, as well as the maximum number of values an item can have. If you would like more information on these limits, contact our sales team.

// When a message has been successfully sent to a channel, create items with keys.
await channel.createMessageMetaArrayKeys(MESSAGE, ['referees', 'games']);

// Add values to specific items by their keys.
const valuesToAdd = {
    'referees': ['John', 'Brandon', 'Harry', 'Jay'],
    'games': ['soccer', 'baseball', 'basketball']
};

await channel.addMessageMetaArrayValues(MESSAGE, valuesToAdd);

// Remove existing values of specific items by their keys.
const valuesToRemove = {
    'referees': ['Brandon', 'Jay']
};

await channel.removeMessageMetaArrayValues(MESSAGE, valuesToRemove);

// Delete items by their keys.
await channel.deleteMessageMetaArrayKeys(MESSAGE, ['referees', 'games']);

To get the key-values items of a message, read the message.metaArrays.


Display Open Graph tags in a message

The Chat SDK supports the URL link preview when a message text contains the URL of a web page.

Note: This feature is turned on by default for Sendbird applications. If this isn't available for your Sendbird application, contact our support team and contact us on the Sendbird Dashboard to enable the feature.

OGMetaData

OGMetaData is a class that holds the Open Graph (OG) protocol-related data, including the four properties: title, URL, description, and image of an OG object.

Note: Some websites don’t provide the OG metadata fields mentioned above. In that case, even though the Open Graph protocol states them as requirements, all of the four fields can be null.

List of properties

Property nameDescription

title

The title of the OG object as it should appear within the graph. The value can be null.

url

The canonical URL of the object that can be used as its permanent ID in the graph. The value can be null.

desc

The description of the object. The value can be null.

defaultImage

An OGImage object that contains information about the image that the Open Graph points to. The OGImage also holds its own properties such as type, URL, and size. However, the value can be null.

OGImage

OGImage is a class that holds image-related data for an OGMetaData object. The OGImage class can also have six optional structured properties of URL, secure URL, type, width, height, and alt.

Note: Except for width and height, other fields such as URL, secure URL, type, and alt can be null. If the target website doesn’t provide width and height data, the value of those two fields are set to 0.

List of properties

Property nameDescription

url

The URL of an image object within the Open Graph. The value can be null.

secureUrl

An alternative url to use if the webpage requires HTTPS. The value can be null.

type

A media type or MIME type of this image. The value can be null.

width

The number of pixels horizontal. When the value is unavailable, this method returns 0.

height

The number of pixels vertical. When the value is unavailable, this method returns 0.

alt

The description of what is in the image, not a caption of the image. The alt attribute is designed to provide a fuller context of the image in the OGImage object and help users better understand it when they can’t load or see the image. The value can be null.

How it works

If a user sends a message with a web page URL and the linked web page possesses Open Graph (OG) tags, or OG metadata, Sendbird server parses the message content, extracts the URL in the message, gets the OG metadata from it, and creates an OG metadata object for the message. Then message recipients will get the parsed message with its OG metadata object through the onMessageReceived() method in the channel event handler of the SDK. On the other hand, the message sender will do the same through the onMessageUpdated().

Displaying an OG metadata object is available for two subtypes of BaseMessage: UserMessage and AdminMessage. If the content of a BaseMessage object includes a web page URL containing OG metadata, the onMessageReceived() method returns OGMetaData and OGImage objects.

If Sendbird server doesn’t have cache memory of the OG metadata of the given URL, the BaseMessage.ogMetaData can be null due to the time it takes to fetch the OG metadata from a remote web page. In the meantime, the message text containing the URL will be delivered first to message recipients’ client app through the onMessageReceived() method. When the server completes fetching, the onMessageUpdated() method will be called and the message with its OG metadata object will be delivered to the recipients’ client app. However, if Sendbird server has already cached the OG metadata of the URL, the BaseMessage.ogMetaData returns the message and its OGMetaData object instantly and the onMessageUpdated() method won’t be called.

const params = new UserMessageCreateParams();
params.message = 'sendbird.com';
...

await channel.sendUserMessage(params)
    .onSucceeded((message: UserMessage) => {
        ...
    });
const channelHandler = new OpenChannelHandler({
    onMessageReceived: (channel: BaseChannel, message: BaseMessage) => {
        if (message.ogMetaData) {
            // You can create and customize the URL link preview by using the Open Graph metadata of the message.
            const url = message.ogMetaData.url;
            const width = message.ogMetaData.width;
            ...
        } else {
            // If message.ogMetaData is null, wait until the onMessageUpdated() method receives a callback from Sendbird server.
        }
    },
   onMessageUpdated: (channel: BaseChannel, message: BaseMessage) => {
        if (message.ogMetaData) {
            // You can create and customize the URL link preview by using the Open Graph metadata of the message.
            const url = message.ogMetaData.url;
            const width = message.ogMetaData.width;
            ...
        }
    ...
    },
});

sb.openChannel.addOpenChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Categorize channels by custom type

When creating an open channel, you can additionally specify a custom channel type to subclassify open channels. This custom type takes on the form of a String, and can be useful in searching or filtering open channels.

The data and customType property of a channel object allow you to append information to your channels. While both properties can be used flexibly, common examples for the customType include categorizing channels into School or Work.

const params = new OpenChannelParams();
params.name = NAME;
params.customType = CUSTOM_TYPE;

await sb.openChannel.createChannel(params);

To get a channel's custom type, read the openChannel.customType.


Categorize messages by custom type

When sending a message, you can additionally specify a custom message type to subclassify messages. This custom type takes on the form of a String, and can be useful in searching or filtering messages.

The data and customType properties of a message object allow you to append information to your messages. While both properties can be used flexibly, common examples for the customType include categorizing message groups into Notes or Contacts.

To embed a custom type into your message, assign a value to the customType under the UserMessageCreateParams or FileMessageCreateParams object. Then, pass the specified object as an argument to the parameter in the sendUserMessage() or sendFileMessage() method.

const params = new UserMessageCreateParams();
params.message = TEXT_MESSAGE;
params.customType = CUSTOM_TYPE;

channel.sendUserMessage(params)
    .onSucceeded((message: UserMessage) => {
        ...
    })

To get a message's custom type, read the message.customType.


Search channels by name, URL, or custom type

You can search for specific open channels by adding a keyword to an OpenChannelListQuery instance. There are two types of keywords: a Name and a URL. The code sample below shows the query instance which returns a list of open channels that partially match the specified Name keyword in the names of the channels.

const query = sb.openChannel.createOpenChannelListQuery({
    nameKeyword: 'Sendbird',
});

const channels = await query.next();

The following shows the query instance which returns a list of open channels that partially match the specified URL keyword in the URLs of the channels.

const query = sb.openChannel.createOpenChannelListQuery({
    urlKeyword: 'seminar',
});

const channels = await query.next();

By setting a value to the customTypes like the following, you can also search for open channels with any of the specified custom types.

const query = sb.openChannel.createOpenChannelListQuery({
    customTypes: ['movie', 'music'],
});

const channels = await query.next();

Generate thumbnails of a file message

When sending an image file, you can determine whether to create thumbnails of the image to fetch and render into your UI. You can specify up to 3 different dimensions to generate thumbnail images in for supporting various display densities.

Note: Supported file types are files whose media type is image/* or video/*. The Chat SDK doesn't support creating thumbnails when sending a file message via a file URL.

The sendFileMessage() method requires passing a FileMessageCreateParams object as an argument to a parameter, containing an array of items which each specify the maximum values of width and height of a thumbnail image. The callback function subsequently returns a list of Thumbnail items that each contain the URL of the generated thumbnail image file.

const params = new FileMessageCreateParams();
params.file = FILE;
params.fileName = FILE_NAME;
params.fileSize = FILE_SIZE;
params.mimeType = MIME_TYPE;
params.thumbnailSizes = [{maxWidth: 100, maxHeight: 100}, {maxWidth: 200, maxHeight: 200}]; // Add the maximum sizes of thumbnail images (allowed number of thumbnail images: 3).

channel.sendFileMessage(params)
    .onSucceeded((message: FileMessage) => {
        const thumbnailFirst = fileMessage.thumbnails[0];
        const thumbnailSecond = fileMessage.thumbnails[1];

        const maxHeightFirst = thumbnailFirst.maxHeight;        // 100
        const maxHeightSecond = thumbnailSecond.maxHeight;  // 200

        const urlFirst = thumbnailFirst.url;        // The URL of first thumbnail file.
        const urlSecond = thumbnailSecond.url;  // The URL of second thumbnail file.
    });

A thumbnail image is generated evenly to fit within the bounds of provided maxWidth and maxHeight. Note that if the original image is smaller than the specified dimensions, the thumbnail isn't resized. The url returns the location of the generated thumbnail file within Sendbird server.


Cancel an in-progress file upload

Using the cancelUploadingFileMessage() method, you can cancel an in-progress file upload while it is not completed yet. If the function operates successfully, true is returned.

Note: If you attempt to cancel the uploading after it is already completed, or canceled, or returned an error, the function returns false.

const params = new FileMessageCreateParams();
params.file = FILE;
params.fileName = FILE_NAME;
params.customType = CUSTOM_TYPE;
params.data = DATA;

channel.sendFileMessage(params)
    .onPending((message: FileMessage) => {
        ...
        channel.cancelUploadingFileMessage(message.reqId);
    });

Share an encrypted file with other participants

This file encryption feature prevents users without access from opening and reading encrypted files that have been shared within a group of users. When this feature is turned on, all types of sent files and thumbnail images will be first uploaded to Sendbird server, and then encrypted by AES256.

In an open channel, encrypted files and thumbnail images will be decrypted and accessed securely only by the participants. Anyone outside of the channel and application will not have access to those files and thumbnail images. The following explains how this data security works and what to do at the SDK level to apply it to your client apps.

The Sendbird system enables secure encryption and decryption of files by generating and distributing an opaque and unique encryption key for each user. An encryption key is managed internally by the system, and is valid for three days. It is generated every time the user logs in to Sendbird server through the Chat SDK, which then gets delivered to the Chat SDK from the server.

When the Chat SDK requests an encrypted file by its URL, the auth parameter should be added to the URL to access the file, which is specified with an encryption key of the user such as ?auth=RW5jb2RlIHaXMgdGV4eA==. With the specified key in the auth parameter, Sendbird server first decrypts the file, then checks if the user is participating in the open channel, and finally, allows the user to access and open the file in the channel.

This can be easily done by retrieving the fileMessage.url property, which returns the unique file URL containing the auth parameter with an encryption key of the current user.


Spam flood protection

This feature allows you to customize the number of messages a participant can send in an open channel per second. By doing so, all excess messages from a participant will be deleted and only the number of messages allowed to be sent per participant per second will be delivered. This feature protects your app from some participants spamming others in the channel with the same messages.

Note: Our default system setting is five messages per second. This limit can be manually adjusted only from our side. Contact our sales team for more information.


Smart throttling

You can use this feature to customize the number of messages displayed in an open channel per second. By doing so, you can adjust the pace of the conversation in a chat so that the participants can read the messages more clearly. In fact, each participant's channel will display the messages they have sent and those that other participants have sent up to this limit in chronological order.

Note: Our default system setting is five messages per second. This limit can be manually adjusted only from our side. Contact our sales team for more information.


Message auto-translation

It is possible for text messages to be sent in different languages through the Sendbird's auto-translation feature. When sending a text message, set an array of language codes to a UserMessageCreateParams object and then pass the object as an argument to a parameter in the sendUserMessage() method to request translated messages in the corresponding languages.

Note: Message auto-translation is powered by Google Cloud Translation API recognition engine. Find language codes supported by the engine in the Miscellaneous page or visit the Language Support page in Google Cloud Translation.

const params = new UserMessageCreateParams();
...
params.translationTargetLanguages = ['es', 'ko'];   // Spanish and Korean.

channel.sendUserMessage(params)
    .onSucceeded((message: UserMessage) => {

    })

You can retrieve translations of a text message using the userMessage.translations property which has a Map object containing the language codes and translations.

const channelHandler = new OpenChannelHandler({
    onMessageReceived: (channel: BaseChannel, message: BaseMessage) => {
        if (message instanceof UserMessage) {
            const esTranslatedMessage = message.translations['es']; // Spanish.
            ...
        }
    },
});

sb.openChannel.addChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Message on-demand translation

Using the channel.translateUserMessage() method, you can allow your users to translate text messages into other languages when needed.

Note: Message on-demand translation is powered by Google Cloud Translation API recognition engine. Find language codes supported by the engine in the Miscellaneous page or visit the Language Support page in Google Cloud Translation.

const targetLanguages = ['es', 'de'];   // Spanish and German.
const message = await channel.translateUserMessage(USER_MESSAGE, targetLanguages);

const esTranslatedMessage = message.translations['es']; // Spanish.
const deTranslatedMessage = message.translations['de']; // German.

Based on this method, you can implement features such as real-time or instant translation to your app. You can also implement to only translate a selected message into preferred languages.