CometChat Migration Guide

CometChat allows you to integrate chat messaging and video calling into your product quickly. While it offers a convenient way to get started, you will quickly run into flexibility, scalability, and customization limitations when using CometChat's prebuilt components in your codebase.

Stream is a popular CometChat alternative and the leading provider of chat APIs. Stream powers real-time communication experiences for enterprise apps across various industries, including Strava, IBM, Patreon, Adobe, eToro, and TaskRabbit. Stream is also a new player in the video and audio space following the Beta launch of its services in the summer of 2023.

Stream offers unparalleled performance at scale, seamless UX, and a well-documented developer experience to help engineers build engaging apps for billions of end users with APIs and SDKs powered by a global edge network and enterprise-grade infrastructure.

Existing customers of CometChat or any other chat provider who wish to migrate to Stream might be wondering how to update their app to support Stream's real-time communication APIs and migrate all relevant user data, like usernames, messages, and call history. Stream has developed a proven migration process to support enterprise applications with millions of MAUs switching from other providers to our platform, all with minimal downtime and customer interruption.

This blog post will walk through how developers can migrate their applications to Stream Chat.

Why Customers Migrate to Stream

Over the past few years, we've supported many teams migrating to Stream. These migrations are often driven by growing technical needs or changes in product direction. Common reasons include:

• Support for 5 Million Concurrent Users per Channel: Stream is built to handle extreme concurrency, enabling use cases like global events, community platforms, and large-scale collaboration without degradation in performance.
• Offline Support in Client SDKs: Stream's SDKs include built-in offline support, allowing apps to queue and sync messages reliably even when users temporarily lose connectivity.
• Shared Slack Channels with Engineering and Support: Enterprise chat customers receive direct access to Stream engineers via Slack, enabling fast responses to technical questions and smoother integration workflows.
• Global Edge Network for Chat Delivery: Stream delivers chat messages via a global edge network with sub-10ms API response times, helping ensure low latency for distributed user bases.

If your product is evolving beyond the limits of your current chat stack, Stream's scalable infrastructure and developer tools can support your next phase of growth.

Looking at the Code

When migrating from one Chat provider to another, the process involves two key steps:

1. Exporting existing chat data
2. Migrating your application’s components and implementation

For customers looking at moving to Stream, the first step would be to export your data on CometChat consisting of existing user, messages, and related data from their platform. This can be done through their data export functionality on the dashboard.

Next, you can create a free account on Stream by visiting our website. With your newly created account, Stream exposes a data import option on the Dashboard, which can be used to add your existing data from CometChat. For advanced use cases such as setting up dual writes or bi-directional syncing, please contact our sales team.

UI

After importing your data (or creating a new project), the second step of the migration process involves migrating the implementation of your client-side application to use Stream instead of CometChat.

Stream’s Chat SDK offers a rich set of highly customizable UI components that can be used to replace your existing CometChat implementation. While there may be some components that do not map exactly between Stream and CometChat, we’ve put together a short list of the common CometChat components and their Stream equivalents before. To check out our full list of components, please visit Stream’s developer documentation.

Before continuing into the implementation details, as a developer coming from CometChat to Stream, the main things to keep in mind are:

1. “Groups” on CometChat are essentially “Channels” on Stream – for both single 1:1 use-cases and groups of multiple users.
2. Features such as typing indicators, user presence, and more can be customized on the Stream dashboard. By default, Stream has five out of the box channel types for livestreaming, messaging, e-commerce, gaming, and teams, with the option to create your custom type based on the needs of your application.
3. API documentation and SDK documentation for each framework can be found on Stream’s Product landing page here.

Project Setup

In this guide, we will use our React SDK, but feel free to follow along in your SDK and language of choice.

• iOS
• Android
• Flutter
• React
• React Native
• Unity
• Unreal
• Angular
• Platform API

Let’s start by creating a React project using yarn by running the following snippet on the command line:

1
2
3
$ yarn create vite chat-example --template react-ts
$ cd chat-example
$ yarn add stream-chat stream-chat-react

This will create a new React-based application and add the stream-chat stream-chat-react package as a dependency.

Next, we can open our preferred code editor and modify the code in `src/App.tsx'.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { StreamChat, User } from 'stream-chat';
import {
  Chat,
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  Thread,
  Window,
} from 'stream-chat-react';

import 'stream-chat-react/dist/css/v2/index.css';

const userId = 'YOUR-UID';
const userName = 'YOUR-USERNAME';

const user: User = {
  id: userId,
  name: userName,
  image: `https://getstream.io/random_png/?id=${userId}&name=${userName}`,
};

const apiKey = 'YOUR-API-KEY';
const userToken = 'YOUR-TOKEN';

From the stream-chatpackage, we can import the various components we will use in our simple demo app. Before we move on to connecting our chat client and rendering the UI, we can also define the constants for our user ID, name API key, and token.

For development, our online token generator can be used to quickly generate a user token while developing. It is strongly recommended that tokens are only generated on your application’s backend for production applications.

Next, we can move on to connecting the Stream Chat client and setting up the default channel for our users to communicate in:

1
2
3
4
5
6
7
8
9
const chatClient = new StreamChat(apiKey);
chatClient.connectUser(user, userToken);

const channel = chatClient.channel('messaging', 'custom_channel_id', {
  // add as many custom fields as you'd like
  image: 'https://www.drupal.org/files/project-images/react.png',
  name: 'Talk about React',
  members: [userId],
});

On Stream, most objects such as channels and users can have extraData attached to them, which can be used for setting images, names, or any other type of JSON data.

Defining the UI

With our application configured and imports defined, we can begin to define our application’s UI in our App’s render function:

1
2
3
4
5
6
7
8
9
10
11
12
const App = () => (
  <Chat client={chatClient} theme='str-chat__theme-light'>
    <Channel channel={channel}>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

Note that we are passing in both the chatClient and channel objects, which were defined earlier during the project setup.

If we run the application as is, you’ll notice that the layout does not look very appealing. By default, we leave layout work for developers to decide how they would like to position the components.

We can create a CSS file (src/layout.css) with a basic layout for our application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
}
#root {
  display: flex;
}

.str-chat__channel-list {
  width: 30%;
}
.str-chat__channel {
  width: 100%;
}
.str-chat__thread {
  width: 45%;
}

If we run our application now, the layout looks much better! You can extend the application or customize it to fit your needs. For a full and comprehensive look at the SDK, we recommend checking out the React Chat tutorial.

Next Steps

For more information, check out our chat demos and docs. We're happy to talk to you about your unique migration process and answer any questions you may have.