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

Group channel: Advanced

This page explains the advanced features for group channels.


Send typing indicators to other members

If the startTyping() and endTyping() methods are called while the current user is typing a text message in a group channel, the onTypingStatusUpdated() method in the channel event handler will be invoked on all channel members' devices except the one that belongs to the current user.

groupChannel.startTyping();
groupChannel.endTyping();
...

const channelHandler = new GroupChannelHandler({
    onTypingStatusUpdated: (channel: GroupChannel) => {
        const members = channel.getTypingMembers();
        // Refresh typing status of members within channel.
    },
});
sb.groupChannel.addChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Mark messages as delivered

To mark messages as delivered when an online group channel member receives the message from Sendbird server, the markAsDelivered() method should be called. For offline group channel members, markAsDelivered() should be called when they come back from the background or go back online.

sb.groupChannel.markAsDelivered(CHANNEL_URL);
const channel = await sb.groupChannel.getChannel(CHANNEL_URL);
channel.markAsDelivered();

When a message is delivered to an online group channel member, it is automatically marked as delivered and the other online members are notified of delivery receipt through the onUndeliveredMemberCountUpdated() method in the channel event handler. However, when it is delivered to an offline group channel member as a push notification, the message can be marked as delivered through the groupChannel.markAsDelivered() method, and other online members are notified of the delivery receipt through onUndeliveredMemberCountUpdated().

const channelHandler = new GroupChannelHandler({
    onDeliveryReceiptUpdated = (channel: GroupChannel) => {
        ...
    },
});
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Mark messages as read

To keep the most up-to-date and accurate read status of messages for all group channel members, the markAsRead() method should be called every time one of the members reads messages by entering the channel from a channel list or bringing the opened channel view to the foreground.

If the current user opens a channel and markAsReadAll() is called, Sendbird server will update both the unread message count of the individual channel and the total unread message count of all the group channels joined by the user. The server then notifies the change of read status to all members' devices through the onUnreadMemberCountUpdated() method in the channel event handler, except the one that is being used by the current user.

Note : When a channel member sends a message to the channel, Sendbird server updates the member's read receipt to the time when the message has sent. Meanwhile, the read receipts of other channel members can be updated when the markAsRead() method is called. If a new member joins the channel, the method works differently based on the value of the display_past_message property of your Sendbird application. If the property is set to true, the new member’s read receipt will be updated to the sent time of the last message in the channel. If false, it will be updated to 0.

groupChannel.markAsRead();
...

const channelHandler = new GroupChannelHandler({
    onUnreadMemberCountUpdated: (channel: GroupChannel) => {
        ...
    },
});
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Note: The display_past_message property determines whether to display past messages to newly joined members when they enter the channel. This property is also linked to the Chat history option, which can be adjusted in your dashboard under Settings > Chat > Channels > Group channels.


Retrieve number of members who haven’t received a message

You can retrieve the number of members who haven’t received a specific message in a group channel. If zero is returned, it means that the message has been delivered to all the other members.

const params = new GroupChannelCreateParams();
params.addUsers([USER_2, USER_3]);
const channel = await sb.groupChannel.createChannel(param);

...
const params = new UserMessageCreateParams({
    message: 'Hi Sendbirdians!',
});
channel.sendUserMessage(params)
    .onSucceeded((message: UserMessage) => {
        const numberOfUndeliveredMembers = channel.getUndeliveredMemberCount(message);
        ...
    });

Retrieve members who have read a message

Using the getReadMembers() method, you can view members who have read a specific message in a group channel. The method returns a list of channel members who have read the message by comparing the message’s creation time and the channel members’ read receipt. The list will exclude the current user and the message sender.

Note: Read receipt indicates the timestamp of the latest time when each user has read messages in the channel, in Unix milliseconds.

If you want to keep track of who has read a new message, we recommend that you use the getReadMembers() in the onUnreadMemberCountUpdated(). Then the client app will receive a callback from Sendbird server whenever a channel member reads a message. To do so, you should pass the new message object as an argument to a parameter in the getReadMembers() through the onUnreadMemberCountUpdated().

const readMembers = channel.getReadMembers(MESSAGE);

Note: Using the getUnreadMembers() method, you can also view members who have not read a specific message in a group channel, except the current user and the message sender. In the meantime, you can get information on each channel member's read receipt through the getReadStatus() method.


Retrieve number of members who have not read a message

Using the getUnreadMemberCount() method, you can get the number of members who have not read a specific message in a group channel. To get the exact value, the channel should be updated first through markAsRead() before calling the getUnreadMemberCount() method.

const count = channel.getUnreadMemberCount();
...

// To listen to an update from all the other channel members' client apps, implement the onReadReceiptUpdated() with things to do when notified.
const channelHandler = new GroupChannelHandler({
    onUnreadMemberCountUpdated: (channel: GroupChannel) => {
        ...
        for (const message of messages) {
            const unreadCount = channel.getUnreadMemberCount(message);
            if (unreadCount <= 0) {
                // All members have read the message.
            } else {
                // Some of members haven't read the message yet.
            }
        }
    },
});
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Retrieve the last message of a channel

You can view the last message of a group channel.

groupChannel.lastMessage;

Retrieve number of unread messages in a channel

You can retrieve the total number of the current user's unread messages in a group channel.

groupChannel.unreadMessageCount;

Retrieve number of unread messages in all channels

You can retrieve the total number of the current user's unread messages in all joined group channels.

const count = await sb.getTotalUnreadMessageCount();

Retrieve number of channels with unread messages

You can retrieve the total number of the current user's joined group channels which one or more unread messages.

const count = await sb.getTotalUnreadChannelCount();

Send an admin message

You can send admin messages to a group channel using Sendbird Dashboard or Chat Platform API. To send an admin message through your dashboard, go to the Chat > Group channels, select a group channel, find the 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.

Unlike other types of messages, a push notification for an admin message isn't available by default. If you want assistance on this, contact our sales team.


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 members.

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.

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 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 this 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';

channel.sendUserMessage(params)
    .onSucceeded((message: UserMessage) => {
        ...
    });
const channelHandler = new GroupChannelHandler({
    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 the 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.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, channelHandler);

Categorize channels by custom type

When creating a group channel, you can additionally specify a custom channel type to subclassify group channels. This custom type takes on the form of a String, and can be useful in searching or filtering group 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 GroupChannelCreateParams();
params.addUserIds(['James', 'Chris']);
params.name = NAME;
params.customType = CUSTOM_TYPE;

const channel = await sb.groupChannel.createChannel(params);

To get a channel's custom type, read groupChannel.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() methods.

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 userMessage.customType.


Search channels by name, URL, or other filters

You can search for specific group channels by using several types of search filters within GroupChannelListQuery and PublicGroupChannelListQuery classes.

GroupChannelListQuery

A GroupChannelListQuery instance provides many types of search filters such as ChannelNameContainsFilter and ChannelUrlsFilter. You can use these filters to search for specific private group channels.

The sample code below shows the query instance, which returns a list of the current user's group channels that partially match the specified keyword in the ChannelNameContainsFilter in the channels' name.

const query = sb.groupChannel.createMyGroupChannelListQuery({
    includeEmpty: true,
    channelNameContainsFilter: 'Sendbird',
});
const channels = await query.next();

The following shows the query instance, which returns a list of the current user's group channels that partially match the specified keyword in the ChannelUrlsFilter in the channels' URL.

const query = sb.groupChannel.createMyGroupChannelListQuery({
    includeEmpty: true,
    channelUrlsFilter: ['seminar', 'lecture'],
});
const channels = await query.next();

The following table shows all supported filters for GroupChannelListQuery to search for specific channels you want to retrieve. You can use any filters in a similar fashion with the sample code above.

List of filters

NameFilters

CustomTypesFilter

Group channels with one or more specified custom types.

CustomTypeStartsWithFilter

Group channels with a custom type that starts with the specified value.

ChannelNameContainsFilter

Group channels that contain the specified value in their names.

ChannelUrlsFilter

Group channels with one or more specified channel URLs.

SuperChannelFilter

Either super or nonsuper group channels.

PublicChannelFilter

Either public or private group channels.

UnreadChannelFilter

Group channels with one or more unread messages.

HiddenChannelFilter

Group channels with the specified state and operating behavior.

MemberStateFilter

Group channels based on whether the user has accepted an invitation, or whether the user was invited by a friend.

UserIdsExactFilter

Group channels that contain members with one or more specified user IDs.

UserIdsIncludeFilter

Group channels that include one or more members with the specified user IDs.

NicknameContainsFilter

Group channels with members whose nicknames contain the specified value.

MetaDataOrderKeyFilter

Group channels with metadata containing an item with the specified value as its key. This filter is effective only when the metadata are sorted in alphabetical order.

PublicGroupChannelListQuery

A PublicGroupChannelListQuery instance provides many types of search filters such as ChannelNameContainsFilter and ChannelUrlsFilter. You can use these filters to search for specific public group channels.

The sample code below shows the query instance, which returns a list of the current user's group channels that partially match the specified keyword in ChannelNameContainsFilter in the channels' name.

const query = sb.groupChannel.createPublicGroupChannelListQuery({
    includeEmpty: true,
    channelNameContainsFilter: 'Sendbird',
});
const channels = await query.next();

The following shows the query instance, which returns a list of the current user's group channels that partially match the specified keyword in ChannelUrlsFilter in the channels' URL.

const query = sb.groupChannel.createPublicGroupChannelListQuery({
    includeEmpty: true,
    channelUrlsFilter: ['seminar', 'lecture'],
});
const channels = await query.next();

The following table shows all supported filters for PublicGroupChannelListQuery to search for specific channels you want to retrieve. You can use any filters in a similar fashion with the sample code above.

List of filters

NameFilters

CustomTypesFilter

Group channels with one or more specified custom types.

CustomTypeStartsWithFilter

Group channels with a custom type that starts with the specified value.

ChannelNameContainsFilter

Group channels that contain the specified value in their names.

ChannelUrlsFilter

Group channels with one or more specified channel URLs.

SuperChannelFilter

Either super or nonsuper group channels.

MembershipFilter

Group channels with specified membership.

MetaDataOrderKeyFilter

Group channels with metadata containing an item with the specified value as its key. This filter is effective only when the metadata are sorted in alphabetical order.


Search messages by keyword

Message search is a feature that retrieves a list of messages that contain a search query or a specified keyword.

Implement the MessageSearchQuery to search messages in your client app. The query will retrieve a list of messages that contain a search term and meet the optional parameter values set in the createMessageSearchQuery class.

You can create the query instance in two ways. First, you can do so with the default values. If not, you can create an instance by changing those values to your preference.

const query = sb.createMessageSearchQuery({
    keyword: 'Sendbird',
    channelUrl: '',
    channelCustomType: '',
    limit: 20,
    exactMatch: false,
    messageTimestampFrom: null,
    messageTimestampTo: null,
    order: 'score',
    reverse: false,
});

The query will retrieve a list of matched messages. Calling the builder method again will return the next page of the results.

const messages = await query.next();

Use the hasNext method to see if there is a next page.

query.hasNext

Use the isLoading method to see if the search results are loading.

query.isLoading

createMessageSearchQuery

You can build the query class using the following parameters, which allows you to add various search options.

List of parameters

Parameter nameTypeDescription

keyword

string

Specifies the search term.

* If the specified search term includes special characters or punctuations, it will return an error.

channelUrl

string

Specifies the URL of the target channel.

channelCustomType

string

Specifies the custom channel type.

limit

number

Specifies the number of messages to return per page. Acceptable values are 1 to 99, inclusive. (Default: 20)

exactMatch

boolean

Determines whether to search for messages that exactly match the search term. If set to false, it will return partial matches that contain the search term. (Default: false)

messageTimestampFrom

number

Restricts the search scope to the messages sent after the specified value in Unix milliseconds format. This includes the messages sent exactly on the timestamp. (Default: 0)

messageTimestampTo

number

Restricts the search scope to the messages sent before the specified value in Unix milliseconds format. This includes the messages sent exactly on the timestamp. (Default: 0)

order

string

Determines by which field the results are sorted. Acceptable values are the following:
- MessageSearchOrder.SCORE: a relevance score.
- MessageSearchOrder.TIMESTAMP: the time when a message was created. (Default: MessageSearchOrder.SCORE)

reverse

boolean

Determines whether to sort the results in reverse order. If set to false, they will be sorted in descending order. (Default: false)


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's 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 members

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 a group channel, encrypted files and thumbnail images will be decrypted and accessed securely only by the members. 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 the auth parameter, Sendbird server first decrypts the file, then checks if the user is a member of the group 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 member can send in a group channel per second. By doing so, all excess messages will be deleted and only the number of messages allowed to be sent per member per second will be delivered. This feature protects your app from some members 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.


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 GroupChannelHandler({
    onMessageReceived: (channel: BaseChannel, message: BaseMessage) => {
        if (message instanceof UserMessage) {
            const esTranslatedMessage = message.translations['es']; // Spanish.
            ...
        }
    }
});
sb.groupChannel.addGroupChannelHandler(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.