Install SyncManager

This page provides a guide that demonstrates how to integrate Sendbird SyncManager onto a client app. Sendbird SyncManager can be installed through npm. Start building the add-on to your Chat SDK by clicking the Download SyncManager button below.

Note: Sendbird Chat SDK is required in order to use Sendbird SyncManager because it is an add-on feature.

Sendbird SyncManager currently supports iOS, Android, and JavaScript SDKs. You can download SyncManager for JavaScript from our repository on GitHub.

Download SyncManager

SyncManager for JavaScript is distributed via NPM. Install as below:

npm install -S sendbird-syncmanager

SyncManager is designed to simplify the process of integrating chat in your JavaScript client app by leveraging local caching. While Sendbird Chat SDK for JavaScript is highly customizable with a number of atomic features, SyncManager facilitates SDK integration by managing most background operations needed to run chat in your JavaScript client app.

SyncManager has an event-driven architecture that updates the chatting view based on data events. Both events received through the WebSocket connection and processed data in the cache are delivered to the client app by the SyncManager’s collection handlers and can be leveraged when implementing your view.

As a key component that can be used for view implementation, the Collection holds items that comprise channel or message data. In your view, a collection instance can be binded to an event handler to subscribe to events. In the callbacks of the event handler, you can implement what jobs to execute when a specific type of event happens. The following shows a simple example of how you can create a channel collection and bind it to a collection event handler:

const listQuery = sb.createMyGroupChannelListQuery();
const col = new SendBirdSyncManager.ChannelCollection(listQuery);
const handler = new SendBirdSyncManager.ChannelCollectionHandler();

handler.onSucceededMessageEvent = (channels, action) => {
    // Implement the view as the action indicates.
    // action := 'insert' | 'update' | 'move' | 'remove' | 'clear'
};

col.setCollectionHandler(handler);

Background sync is a feature of SyncManager that automatically stores data fetched from Sendbird server in the local cache. When a collection is created, the background sync process starts running with the given conditions. Background sync should follow the lifecycle of a connection: the pauseSync() method is called when a connection is lost and the resumeSync() method is called when a connection is established.

For example, even if only 2 out of 12 channels are cached, background sync feeds the uncached Sendbird server data to the chatting view so that all 12 channels are displayed. In order for this to happen, the channel collection’s fetch() should be called, and the collection brings the insert event for the two channels from the cache. Then, the uncached 10 channels are synchronized through background sync. After synchronization is completed, another insert event is given for the uncached 10 channels. Through this process, all 12 channels are displayed in the view.

Real-time event sync is a feature of SyncManager that listens for real-time events received through the WebSocket connection. When an event arrives, SyncManager identifies it, stores it in the cache, and delivers it to the collection handler with the appropriate action such as insert or remove.

SyncManager ensures your client app is operational during offline mode. If background sync isn’t running because a connection with the server hasn’t been established, the view can display cached data provided by SyncManager. Once a connection is re-established, the resumeSync() resumes background sync for data synchronization.

This section describes how to implement SyncManager in your JavaScript client app.

Initialize and set up the database for SyncManager as below:

const options = new SendBirdSyncManager.Options();
options.messageCollectionCapacity = 2000;
options.messageResendPolicy = 'manual';
options.maxFailedMessageCountPerChannel = 5;

SendBirdSyncManager.sendBird = sb;
SendBirdSyncManager.setup(userId, options)
    .then(() => {
        // At this point, the database is ready.
        // You may not assume that a connection is established here.
    })
    .catch(err => {
        // Failed to initialize.
    });

The SendBirdSyncManager.Options has the following properties:

When the Chat SDK is connected to Sendbird server, SyncManager fetches the current user’s chat-related data from the server to update the local cache. This enables SyncManager to synchronize the local cache with the channel and message data.

Additional jobs, which detect changes in connection status and notify SyncManager, are needed when data is fetched from the server through the Chat SDK’s connection event handler: calling the resumeSync() and pauseSync() methods. The resumeSync() should be called in the onReconnectSucceeded() to run background processes for data synchronization when connected, whereas the pauseSync() should be called in the onReconnectStarted() to pause the background processes when disconnected.

const handler = new sb.ConnectionHandler();
handler.onReconnectStarted = () => {
    SendBirdSyncManager.pauseSync();
};
handler.onReconnectSucceeded = () => {
    SendBirdSyncManager.resumeSync();
};
handler.onReconnectFailed = () => {
};
sb.addConnectionHandler(UNIQUE_HANDLER_ID, handler);

Note: The SendBird.removeAllConnectionHandlers() or SendBird.removeAllChannelHandlers() method shouldn’t be called because it not only removes the handlers you’ve added, but also the handlers internally managed by SyncManager.

The cache can be cleared regardless of connection to Sendbird server using the clearCache() method.

SendBirdSyncManager.getInstance().clearCache();

Note: The clearCache() is designed for debugging purposes only. Using it for other purposes isn’t recommended.