Message sync

This page provides an overview of how messages can be synchronized by using the MessageCollection together with other components. The MessageCollection is a view adapter that subscribes to message-related events through the MessageCollectionHandler. The handler listens to cached events and real-time events in order to direct the way of view implementation.

For example, if SyncManager receives a real-time event that a message has been deleted, it creates a collection event which has the remove action for the message and delivers it to the collection handler. At the same time, cached events are also given to the handler. The collection automatically fetches messages from the cache and delivers a collection event which has the insert action for the message to the collection handler.

The following shows how to initialize and use a MessageCollection instance:

const collection = new SendBirdSyncManager.MessageCollection(channel);
const handler = new SendBirdSyncManager.MessageCollection.CollectionHandler();
handler.onSucceededMessageEvent = (messages, action) => {
    switch (action) {
        case 'insert':
            // Add messages to the view.
            break;
        case 'update':
            // Update messages in the view.
            break;
        case 'remove':
            // Remove messages from the view.
            break;
        case 'clear':
            // Clear the view.
            break;
    }
};
collection.setCollectionHandler(handler);
collection.fetchSucceededMessages('prev');
collection.fetchSucceededMessages('next');

In the above code sample, the collection instance sets the collection handler to listen to message events and call the fetchSucceededMessages() after initialization. At runtime, according to your caching status, the insert event can return multiple times. The first few events are called to fetch the messages from the local cache. If not enough messages are cached, SyncManager waits until background sync synchronizes with the server before delivering the rest of the messages. Then, you may get more events with those messages.

A viewpoint is a timestamp option that sets the starting point of the current user’s view. The default value is the Number.MAX_SAFE_INTEGER, which means that the user sees the most recent messages in the chat room. If the viewpoint is set to the middle of the conversation, then the view starts from the middle of the conversation to enable the user to scroll up and down to see the previous and next messages. The viewpoint can be set at initialization, and can be reset anytime by calling the resetViewpointTimestamp() method.

// Set the viewpoint during initialization.
const params = new MessageCollectionParams(channel, startingViewpointTimestamp);
collection = new MessageCollection(params);

...
// Reset the viewpoint.
collection.resetViewpointTimestamp(newViewpointTimestamp);

The direction parameter denotes direction and is provided by the MessageCollection’s fetchSucceededMessages(). The collection can fetch messages from two directions: previous and next. Previous messages are fetched in the direction of past messages, while next messages are fetched in the direction of the most recent, real-time messages.

SyncManager listens to real-time events from the Chat SDK in order to apply changes and notify the current user. Below is the list of real-time message events that SyncManager listens to through the MessageCollectionHandler's onSucceededMessageEvent() callback method:

Note: The collection has an array that holds all the messages that should be shown in the view. If a message isn’t shown in the view, it means that the collection isn’t holding it because background sync synchronization hasn’t been completed at that time.

The fetchSucceededMessages() method fetches messages from the local cache and delivers them to the handler. If not enough messages are cached, it waits until background sync synchronizes with the server before bringing the retrieved messages. The fetchSucceededMessages() should be called when:

• A collection is created.
• A connection is established.
• The app goes to the foreground.
• The scroll reaches the top or the bottom.
• The app returns from a locked screen when still in the foreground.

The fetchSucceededMessages() subscribes to background sync to pull data from the local cache. As this method doesn’t directly interact with the server, while online, it waits until background sync synchronizes data in Sendbird server to the cache before retrieving new data. However, after synchronization is completed by background sync, the fetchSucceededMessages() can refresh the view with new data. Therefore, the fetchSucceededMessages() can not only read cached data, but also update data in the view.

The fetchAllNextMessages() behaves similarly to fetchSucceededMessages(Direction.NEXT), except it fetches the most recent messages, regardless of the fetch limit set in MessageCollection. This method can be used to fetch messages when a user, who had scrolled to the bottom of the screen and was looking at the most recent messages, comes online.

The method to fetch messages when a user comes online from offline should depend on their scroll point. Regardless of whether the user is connecting to a network, coming to the foreground from the background, or turning on their screen, this should be implemented in the ConnectionHandler, which listens for state changes from offline to online.

Once a message is created, it has its own lifecycle. When a message has been sent but not yet received any response from Sendbird server through its callback, the requestState of the message is pending. Once the server responds, the requestState of the message is set as succeeded or failed. SyncManager internally keeps track of the request state of a message so as to update the view accordingly.

For each requestState, a message in a view can be displayed as follows:

• pending: displays the message content with a progress animation.
• failed: displays the message content with a context menu such as resend or delete.
• succeeded: displays the message content with its read receipt.

Note: Pending and failed messages temporarily have a messageId of 0. When they are successfully sent to the server, they get their own unique message ID, and are delivered and replaced as succeeded messages in the collection handler by their reqId. The purpose of a reqId is to ensure messages are listed in the order of their time sent.

As messages are sent by the Chat SDK, SyncManager cannot check whether a message has been successfully sent. Therefore, the MessageCollection provides the handleSendMessageResponse() method so that SyncManager recognizes the delivery status.

const params = new sb.UserMessageParams();
params.message = 'Hello world!';
const pendingMessage = channel.sendUserMessage(params, (message, error) => {
    collection.handleSendMessageResponse(error, message);
});
collection.appendMessage(pendingMessage);

The handleSendMessageResponse() method conducts different jobs based on the set message resend policy. Below is the the list of acceptable values:

As previously mentioned, SyncManager can't check whether a message has been successfully sent because messages are sent through the Chat SDK. Therefore, the MessageCollection provides the updateMessage() method so that SyncManager recognizes the delivery status.

const params = new sb.UserMessageParams();
params.message = 'Updated message';
channel.updateUserMessage(message.messageId, params, (message, error) => {
    if (!error) {
        collection.updateMessage(message);
    }
});

Note: Only succeeded messages can be updated.

Messages can be deleted using the deleteMessage() method in the Chat SDK.

channel.deleteMessage(message, err => {
    // The collection handler gets the 'remove' event for the message, so no further job is required.
});

According to the message's requestState, the MessageCollectionHandler instance listens to message events through the following callbacks:

Suppose that a new message is requested and successfully sent. In order for this to happen, the insert event should first be given to the onPendingMessageEvent(). Once the message delivery status is determined as succeeded through the callback, the remove event is given to the onPendingMessageEvent() while the insert event is also given to the onSucceedMessageEvent().

A pending message is a message that hasn't been sent or hasn't been resolved as a success or a failure. A pending message is created when the app is closed before the message is resolved. Then SyncManager saves the message state and resolves it later.

SyncManager resolves pending messages through a background sync. It is a process where SyncManager compares and matches message data in the local cache with that in Sendbird server.

SyncManager resolves pending messages in the local cache as a success when it confirms matching messages in Sendbird server. If not, SyncManager resolves them as a failure.

The fetchPendingMessages() function in the MessageCollection fetches pending messages from the local cache. Then those messages are delivered through the CollectionHandler as an insert event through the onPendingMessageEvent().

collection.fetchPendingMessages(err => {
    if (!err) {
        // If there isn't an error, the fetched pending messages are given to the CollectionHandler.
    }

    ...
});

When the message list view is closed, the MessageCollection instance should be cleared. A MessageCollection has the remove() method, which clears all the messages managed by the collection and stops synchronization processes in the collection instance. If the collection instance isn’t explicitly dropped, the applicable memory won’t be released and could lead to performance slowdown.

To run SyncManager with React Native in your client app, additional steps should be taken. First, for SyncManager to use the AsyncStorage as storage, the client app should import the React Native’s AsyncStorage plug-in.

import AsyncStorage from '@react-native-community/async-storage';
...
SendBirdSyncManager.sendBird = new SendBird({ appId });
SendBirdSyncManager.useReactNative(AsyncStorage);
SendBirdSyncManager.setup(...);

React Native also has a push notification functionality. This feature can be enabled by registering the push token as follows:

if (Platform.OS === 'android') {
    // Android
    sb.registerGCMTokenForCurrentUser(token)
        .then(() => {
        // FCM push token is registered.
        })
        .catch(error => {
            console.error('Something went wrong.');
        });
} else if (Platform.OS === 'ios') {
    // iOS
    sb.registerAPNSTokenForCurrentUser(token)
        .then(() => {
        // APNS push token is registered.
        })
        .catch(error => {
            console.error('Something went wrong.');
        });
}

Along with the lifecycle of the client app, SyncManager should work in sync with changes to the app state. In React Native, the AppState provides changes in app state to the event listener so that SyncManager can perform the appropriate job. The following is an example of how to implement the event handler.

import {AppState} from 'react-native';

class AppStateExample extends Component {
    ...
    state = {
        appState: AppState.currentState,
    };
    _handleAppStateChange = nextAppState => {
        if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
            sb.setForegroundState();
        } else if (this.state.appState === 'active' && nextAppState.match(/inactive|background/)) {
            sb.setBackgroundState();
        }
        this.setState({appState: nextAppState});
    };
}