Environment-specific implementation

The Sendbird Chat SDK for JavaScript provides powerful chat capabilities that can be integrated into different platforms, including web browsers, mobile applications (through React Native), and desktop applications (using Electron). This guide will walk you through the setup process for each environment.

In a web browser, managing the connection lifecycle can be challenging because different situations can be interpreted as idle states. Some browsers may automatically close connections in idle tabs to conserve battery life, while others might do so if the tab or process remains idle for a certain period. These behaviors vary depending on each browser's policy for managing idle states.

This inconsistency makes it difficult to reliably track the connection status. To address this, the Sendbird Chat SDK simplifies the process by managing the connection lifecycle itself. The SDK introduces an option called appStateToggleEnabled, which automatically closes the WebSocket connection if the browser tab remains not visible for 30 seconds. If you prefer to manage the connection lifecycle on your own, you can disable this feature by setting the option to false.

const sendbird = SendbirdChat.init({
  ...sdkOptions,
  appStateToggleEnabled: false, // true by default
});

Additionally, the Chat SDK monitors network state changes using the browser's built-in onLine event listener. If it detects that the network goes offline, the SDK will automatically close the connection. Once the network is restored, the connection will be re-established.

Modern web browsers come equipped with integrated local storage and database capabilities. The Sendbird Chat SDK leverages these built-in storage APIs, such as localStorage and IndexedDB. The SDK automatically detects the availability of these storage APIs in the runtime environment and defaults to in-memory storage if they are not available. To enable local caching, simply set the localCacheEnabled option to true, and the SDK will handle the rest.

const sendbird = SendbirdChat.init({
  ...sdkOptions,
  localCacheEnabled: true, // false by default
});

The Sendbird Chat SDK does not have a feature for browser-level push notification.

For React Native does not have browser-native event handlers, the Sendbird Chat SDK provides a couple of ways to manage the connection lifecycle.

A mobile app has a lifecycle. It initiates, activates, and sometimes goes to idle state. Along with the app state change, you can call the connection state management functions accordingly. The following is an example.

import { AppState } from 'react-native';

AppState.addEventListener('change', nextAppState => {
  if (
    AppState.currentState.match(/inactive|background/) &&
    nextAppState === 'active'
  ) {
    sendbird.setForegroundState();
  } else if (
    AppState.currentState === 'active' &&
    nextAppState.match(/inactive|background/)
  ) {
    sendbird.setBackgroundState();
  }
});

You can listen to the network condition whether the internet is reachable. @react-native-community/netinfo gives a way to keep track of network connectivity by doing,

import NetInfo from '@react-native-community/netinfo';

NetInfo.addEventListener((state) => {
  if (state.isInternetReachable) {
    sendbird.setForegroundState();
  } else {
    sendbird.setBackgroundState();
  }
});

Setting the SDK connection state in many places is not a great idea because it should stay in the background state if the app is in the background OR the internet is unreachable. A better approach is to have a single state that controls the SDK connection state. Here's an example.

import { useEffect, useState } from 'react';
import { AppState } from 'react-native';
import NetInfo from '@react-native-community/netinfo';

const YourComponent = () => {
  const [isAppActive, setIsAppActive] = useState(true);
  const [isInternetReachable, setIsInternetReachable] = useState(true);

  useEffect(() => {
    // tracking app state change
    AppState.addEventListener('change', nextAppState => {
      if (
        AppState.currentState.match(/inactive|background/) &&
        nextAppState === 'active'
      ) {
        setIsAppActive(true);
      } else if (
        AppState.currentState === 'active' &&
        nextAppState.match(/inactive|background/)
      ) {
        setIsAppActive(false);
      }
    });

    // tracking network state change
    NetInfo.addEventListener(({ isInternetReachable }) => {
      setIsInternetReachable(isInternetReachable);
    });
  }, []);

  useEffect(() => {
    if (isAppActive && isInternetReachable) {
      sendbird.setForegroundState();
    } else {
      sendbird.setBackgroundState();
    }
  }, [isAppActive, isInternetReachable]);
}

Implementing local caching in React Native presents unique challenges due to the need to support various environments. Since React Native does not natively support localStorage or IndexedDB, the Sendbird Chat SDK uses MMKV for local caching. The storage size limit may vary depending on the device, but it is generally constrained by the available internal memory. To enable this feature, you can add the necessary package by installing react-native-mmkv.

To keep the Sendbird Chat SDK optimized for minimal package size, MMKV is not directly integrated into the SDK. Instead, the SDK provides an option called useMMKVStorageStore, which allows you to supply the imported MMKV library during initialization.

import { MMKV } from 'react-native-mmkv'

const mmkv = new MMKV();
const sendbird = SendbirdChat.init({
  ...sdkOptions,
  useMMKVStorageStore: mmkv,
});

Note: Do NOT touch mmkv data (e.g. calling mmkv.clearAll()). It may corrupt the data and cause some problems in the SDK operation.

React Native does not support the File type, which is typically used as a parameter when sending file messages. Instead, the Sendbird Chat SDK accepts an object that implements the FileInfo interface, which is structured as follows:

interface FileInfo {
  name: string;
  uri: string;
  type: string;
}

Passing a File or Blob to the file parameter may not work in React Native. Instead, you should provide an object that conforms to the FileInfo interface to upload and send a file message.

For Electron acts mostly as a Chrome browser, it complies to almost every browser built-in functionalities. You can view the Web browser section to setup for Electron.