Open channel: Advanced

This page explains the advanced features for open channels.

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.

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.
openChannel.createMessageMetaArrayKeys(MESSAGE, ['referees', 'games'], function(message, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

openChannel.addMessageMetaArrayValues(MESSAGE, valuesToAdd, function(message, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

openChannel.removeMessageMetaArrayValues(MESSAGE, valuesToRemove, function(message, error) {
    if (error) {
        // Handle error.
    }

    ...
});

// Deleting items by their keys.
openChannel.deleteMessageMetaArrayKeys(MESSAGE, ['referees', 'games'], function(message, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

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 to enable the feature.

To view the image in full screen, click on the

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.

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.

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.

// Send a user message containing the URL of a web page.
const params = new sb.UserMessageParams();
params.message = 'sendbird.com';
...

openChannel.sendUserMessage(params, function(message, error) {
    if (error) {
        // Handle error.
    }

    ...
});

// Receive a user message containing OG metadata of the web page through a channel event handler.
const channelHandler = new sb.ChannelHandler();

channelHandler.onMessageReceived = (channel, message) => {
    if (message.ogMetaData) {
        // You can create and customize the URL link preview by using the Open Graph metadata of the message.
        var url = message.ogMetaData.url;
        var width = message.ogMetaData.width;
        ...

    } else {
        // If the `message.ogMetaData` is null, wait until the `onMessageUpdated()` method receives a callback from Sendbird server.
    }

    ...
};

channelHandler.onMessageUpdated = (channel, message) => {
    if (message.ogMetaData) {
        // You can create and customize the URL link preview by using the Open Graph metadata of the message.
        var url = message.ogMetaData.url;
        var width = message.ogMetaData.width;
        ...

    }

    ...
};

sb.addChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

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.

sb.OpenChannel.createChannel(NAME, COVER_IMAGE_OR_URL, DATA, OPERATOR_USER_IDS, CUSTOM_TYPE, function(openChannel, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

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 UserMessageParams or FileMessageParams object. Then, pass the specified object as an argument to the parameter in the sendUserMessage() or sendFileMessage() method.

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

openChannel.sendUserMessage(params, function(userMessage, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

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.

var listQuery = sb.OpenChannel.createOpenChannelListQuery();
listQuery.nameKeyword = 'Sendbird';

listQuery.next(function(openChannels, error) {
    if (error) {
        // Handle error.
    }

    // Through "openChannels" parameter of the callback function, which Sendbird server has passed a result list to,
    // a list of channels that have 'Sendbird' in their names is returned.
    ...
});

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.

var listQuery = sb.OpenChannel.createOpenChannelListQuery();
listQuery.urlKeyword = 'seminar';

listQuery.next(function(openChannels, error) {
    if (error) {
        // Handle error.
    }

    // Through "openChannels" parameter of the callback function, which Sendbird server has passed a result list to,
    // a list of open channels that have 'seminar' in their URLs is returned.
    ...
});

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

var listQuery = sb.OpenChannel.createOpenChannelListQuery();
listQuery.customTypes = ['movie', 'music'];

lstQuery.next(function(openChannels, error) {
    if (error) {
        // Handle error.
    }

    // Through "openChannels" parameter of the callback function, which Sendbird server has passed a result list to,
    // a list of open channels with a 'movie' or 'music' custom type is returned.
    ...
});

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 FileMessageParams 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 sb.FileMessageParams();
...
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).

openChannel.sendFileMessage(params, function(fileMessage, error) {
    if (error) {
        // Handle error.
    }

    var thumbnailFirst = fileMessage.thumbnails[0];
    var thumbnailSecond = fileMessage.thumbnails[1];

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

    var urlFirst = thumbnailFirst.url;      // The URL of first thumbnail file.
    var 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.

You can track the file upload progress by passing a progressHandler as an argument to a parameter when calling the sendFileMessage() method.

Note: The progressHandler will not work in the Service Worker environment.

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

var sentFileMessage = openChannel.sendFileMessage(params,
    function(event) {   // Check progress of file upload request.
        console.log(parseInt(Math.floor(event.loaded / event.total * 100)) + '%');
        // Display upload progress with UI component.
    },
    function(fileMessage, error) {  // Callback to execute when either a successful response or error data returns.
        if (error) {
            // Handle error.
        }

        ...
    }
);

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 sb.FileMessageParams();
params.file = FILE;
...

var sentFileMessage = openChannel.sendFileMessage(params, function(fileMessage, error) {
    if (error) {
        // Handle error.
    }

    ...
});

var cancelResult = openChannel.cancelUploadingFileMessage(sentFileMessage.reqId);
console.log(cancelResult);

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 3 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 parameter auth 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, 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 parameter auth with an encryption key of the current user.

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 5 messages per second. This limit can be manually adjusted only from our side. Contact our sales team for more information.

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 5 messages per second. This limit can be manually adjusted only from our side. Contact our sales team for more information.

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 UserMessageParams 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 sb.UserMessageParams();
...
params.translationTargetLanguages = ['es', 'ko'];   // Spanish and Korean

openChannel.sendUserMessage(params, function(userMessage, error) {
    if (error) {
        // Handle error.
    }

    ...
});

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

var channelHandler = new sb.ChannelHandler();

channelHandler.onMessageReceived = function(channel, message) {
    var esTranslatedMessage = message.translations['es'];   // Spanish
    ...

    // Display translation in UI.
};

sb.addChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Using the openChannel.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

// The USER_MESSAGE below indicates a UserMessage object which represents an already sent or received text message.
openChannel.translateUserMessage(USER_MESSAGE, targetLanguages, function(userMessage, error) {
    if (error) {
        // Handle error.
    }

    var esTranslatedMessage = userMessage.translations['es'];   // Spanish
    var deTranslatedMessage = userMessage.translations['de'];   // German
    ...

    // Display translations in UI.
});

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.