Chat SDKs JavaScript v3
Chat SDKs JavaScript
Chat SDKs
JavaScript
Version 3
Sendbird Chat SDK v3 for JavaScript is no longer supported as a new version is released. Check out our latest Chat SDK v4

Message collection

Copy link

A messageCollection allows you to swiftly create a chat view that includes all data. This page explains how to make a view using the collection.

Note: Understand the differences between local caching and SyncManager, and learn how to migrate Message collection.


Initialization

Copy link

First, create a messageCollection through the createMessageCollection() method. Here, you need to set the message filter to determine the message order and the starting point of the message list in the chat view.

var messageFilter = new sb.MessageFilter();

var startingPoint = Date.now();
var messageCollectionFetchLimit = 100;
var messageCollection: MessageCollection = groupChannel.createMessageCollection()
    .setFilter(messageFilter)
    .setStartingPoint(startingPoint)
    .setLimit(messageCollectionFetchLimit)
    .build();

messageCollection
    .initialize(sb.MessageCollection.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
    .onCacheResult(function (err, messages) {
        // Messages will be retrieved from the local cache.
        // They might be too outdated or far from the startingPoint.
    })
    .onApiResult(function (err, messages) {
        // Messages will be retrieved from the Sendbird server through API.
        // According to the MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API,
        // the existing data source needs to be cleared
        // before adding retrieved messages to the local cache.
    });

Starting point

Copy link

The startingPoint is the reference point of the message retrieval for a chat view. This should be specified as a timestamp.

If you set the value of startingPoint to the current time or Long.MAX_VALUE, messages in the view will be retrieved in reverse chronological order, showing messages from the most recent to the oldest.

If you set the value of startingPoint to the message last read by the current user, messages in the view will be fetched in chronological order, starting from the last message seen by the user to the latest.

Policy

Copy link

After initializing a messageCollection instance through the initialize() method, you need to set the MessageCollectionInitPolicy.

The MessageCollectionInitPolicy determines how initialization deals with the message data retrieved from the local cache and API calls. Because we only support CACHE_AND_REPLACE_BY_API as of now, messages in the local cache must be cleared prior to adding the messages from the remote server.

PolicyDescription

CACHE_AND_REPLACE_BY_API

Retrieves cached messages from the local cache and then replaces them with the messages pulled from Sendbird server through API calls.


Pagination

Copy link

Use the loadPrevious() and loadNext() methods to retrieve messages from the previous page and the next page.

When the loadPrevious() method is called, the Chat SDK first checks whether there're more messages to load from the previous page through the hasPrevious function. The same goes for the loadNext().

These methods have to be called during initialization as well.

// ...
try {
    // ...
    if (messageCollection.hasPrevious) {    // Load the previous messages when the scroll                                               // reaches the first message in the chat view.
        messageCollection
            .loadPrevious()
            .then(function (messages) {
                // ...
            })
            .catch(function (err) {
                // ...
            });
    }
    // ...
    if (messageCollection.hasNext) {    // Load the next messages when the scroll                                                   // reaches the last message in the chat view.
        messageCollection
            .loadNext()
            .then(function (messages) {
                // ...
            })
            .catch(function (err) {
                // ...
            });
    }
    // ...
} catch (e) {
    // ...
}
// ...

Message events

Copy link

Use the messageCollectionHandler to determine how the client app would react to message-related events.

The following table shows possible cases where each event handler can be called.

HandlerCalled when

onMessagesAdded

- New messages are created as a real-time event.
- New messages are fetched through changelog sync.

onMessagesDeleted

- Messages are deleted as a real-time event.
- Message deletion is detected during changelog sync.
- The value of the messageFilter setter changes.

onMessagesUpdated

- Messages are updated as a real-time event.
- Message update is detected during changelog sync.
- The sending status of a pending message changes.

onChannelUpdated

- The channel information that is included in the user's current chat view is updated as a real-time event.
- Channel info update is detected during changelog sync.

onChannelDeleted

- The current channel is deleted as a real-time event.
- Channel deletion is detected during changelog sync.
* In both cases, the entire view should be disposed of.

onHugeGapDetected

- A huge gap is detected through background sync. In this case, you need to dispose of the view and create a new messageCollection instance.

var messageCollectionHandler = {
    onMessagesAdded: function (context, channel, messages) {
        // Add the messages to your data source.
    },
    onMessagesUpdated: function (context, channel, messages) {
        // Update the messages in your data source.
    },
    onMessagesDeleted: function (context, channel, messages) {
        // Remove the messages from the data source.
    },
    onChannelUpdated: function (context, channel) {
        // Change the chat view with the updated channel information.
    },
    onChannelDeleted: function (context, channelUrl) {
        // This is called when a channel was deleted. So the current chat view should be cleared.
    },
    onHugeGapDetected: function () {
        // The Chat SDK detects more than 300 messages missing.
    }
};
messageCollection.setMessageCollectionHandler(messageCollectionHandler);

Depending on the online status, the client app could miss message events. Especially when new messages or new channels stored in Sendbird server don't reach the Chat SDK in the client app, a gap is created. A gap is a chunk of objects that are created and logged in the remote server but missing in the local cache.

small gaps can be filled in through changelog sync. However, if the client app has been disconnected for a while, too big of a gap can be created.

Huge gap

Copy link

A gap can be created for many reasons, such as when a user has been offline for days. When the client app comes back online, the Chat SDK checks with Sendbird server to see if there are any new messages. If it detects more than 300 messages missing in the local cache compared to the remote server, the SDK determines that there is a huge gap and the onHugeGapDetected is called.

Note: To adjust the number, contact support on the Sendbird Dashboard.

In this case, the existing messageCollection should be cleared through the dispose() method and a new one must be created for better performance.


Dispose of the collection

Copy link

The dispose() should be called when you need to clear the current chat view. This can be used when the current user leaves the channel or when a huge gap is detected by the onHugeGapDetected and a new collection needs to be created.

messageCollection.dispose();