JavaScript
Sync Manager Getting Started

SyncManager for JavaScript

SyncManager for JavaScript is a Sendbird Chat SDK add-on for chat data synchronization that allows you to reliably cache group channels and messages in your JavaScript client app with minimal effort. When SyncManager is added to your client app, it listens to the events that happen in channels and messages in real-time and executes the background tasks to update the local cache with data queried from Sendbird server.

Note: SyncManager for JavaScript is only applicable to group channels.


Benefits

Simplified integration

Sendbird SyncManager is designed to ensure quick and easy implementation that doesn’t require much effort. It can easily be added to your client app, so that you are able to benefit from all the advantages of our Chat SDK for JavaScript.

Better user experience

SyncManager implements local data caching, meaning that group channels and messages are cached in local storage for fast loading in unstable network environments as well as data retrieval in offline mode.


Requirements

The minimum requirements for SyncManager for JavaScript are:

  • Node.js v10+
  • NPM v6+
  • Sendbird Chat SDK for JavaScript v3.0.115+

Supported browsers

Apart from browsers that don’t provide IndexDB, SyncManager supports all browsers that Sendbird Chat SDK for JavaScript also supports. Since access to local storage is restricted during private browsing in Firefox or InPrivate in Edge, SyncManager automatically detects the browsing mode and uses memory-based cache instead.


Try the sample app

Our sample app has the core features of SyncManager for JavaScript. Download the app from our repository on GitHub to get an idea of how to integrate the SyncManager to the Chat SDK and your project.

Download Sample App

Note: The fastest way to see our SyncManager in action is to build your chat app on top of our sample app. Make sure to change the application ID of the sample app to your own. Go to the Create a Sendbird application from your dashboard section to learn more.


Download SyncManager for JavaScript

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

Download SyncManager


Install SyncManager for JavaScript

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

Light Color Skin
Copy
npm install -S sendbird-syncmanager

How it works

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.

Event-driven structure

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.

Collection

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:

Light Color Skin
Copy
const query = sb.createMyGroupChannelListQuery();
const col = new SendBirdSyncManager.ChannelCollection(query);
const handler = new SendBirdSyncManager.ChannelCollectionHandler();
handler.onSucceededMessageEvent = (channels, action) => {
    // TODO: Implement the view as the action indicates.
    // action := 'insert' | 'update' | 'move' | 'remove' | 'clear'
};
col.setCollectionHandler(handler);

Background sync

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

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.

Offline mode

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.


Implementation guide

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

Initialization

Initialize and set up the database for SyncManager as below:

Light Color Skin
Copy
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.
    });
FieldTypeDescription

userId

string

Specifies the ID of the user.

options

SendBirdSyncManager.Options

Specifies the options for how SyncManager works.

function()

Callback

Returns Promise if not given. Otherwise returns nothing.

The SendBirdSyncManager.Options has the following properties:

Property nameDescription

messageCollectionCapacity

Determines the maximum capacity of messages in a collection related to a chat view. Messages that exceed the maximum capacity are removed. Acceptable values are from 200 to 2,147,483,647. (Default: 2,147,483,647)

messageResendPolicy

Determines the policy for handling failed messages. If delivery of a message fails, SyncManager performs different actions based on the configured policy. Acceptable values are:
- none (default): removes the pending message.
- manual: stores the failed message in the local cache and updates the pending message state as failed.
- automatic: performs the same actions as manual, but also tries to automatically resend the failed message.

automaticMessageResendRetryCount

Determines the maximum number of attempts to resend a failed message. Resend attempts are stopped for messages that have been resent the maximum number of attempts and they remain as failed. The messageResendPolicy value must be set as automatic for this to be applicable. (Default: 2,147,483,647)

maxFailedMessageCountPerChannel

Determines the maximum number of failed messages allowed in a channel. SyncManager deletes the earliest failed message and delivers the remove event through the MessageCollectionHandler if the number of failed messages exceeds this limit. (Default: 20)

failedMessageRetentionDays

Determines the number of days to retain failed messages. Once failed messages have been retained for the retention period, they are automatically removed. (Default: 7)

Connection handling

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.

Light Color Skin
Copy
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.

Clear local cache

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

Light Color Skin
Copy
SendBirdSyncManager.getInstance().clearCache();

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