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, SoundCloud, 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 briefly examine the differences between the two APIs and detail how developers can migrate their applications to Stream Chat.

Stream Chat vs. CometChat

CometChat provides three main ways for developers to integrate an API into applications:

1. Chat Widgets: Embeddable pieces of code that can be added directly to a website or WordPress site.
2. Chat UI Kits: Pre-made components available through one of their client-side SDKs that handle most of the interaction and UI developers and customers would expect in a Chat SDK. For example, using the CometChat UI SDK, developers can quickly add a Message List, which comes pre-connect to their API and is optimized for handling large volumes of real-time messages
3. Chat SDKs: Low-level chat SDKs are pure language wrappers that communicate directly with the CometChat API and provide high-level interfaces for developers to work within their applications.

At a glance, CometChat provides:

• Support for Vue, Laravel, and Ionic out of the box.
• Email and SMS notifications built-in for unread messages
• ChatGPT-based Message Summary
• Smart Replies

Stream offers two main types of highly customizable SDKs: chat UI Kits and SDKs. Although Stream does not offer embeddable website or WordPress widgets directly, the same can easily be integrated via our Javascript API.

At a glance, Stream provides:

• Offline Support for client-side SDKs.
• Unlimited channel members benchmarked up to 5 million concurrent users.
• Global Edge Network with excellent coverage in APAC, Americas, and EMEA
• 9ms average API response time.
• Experience hosting, scaling, and migrating high-volume customers like Strava, Patreon, and Hopin.
• Shared Slack Channels with Engineering and Support teams.
• World-class client-side SDKs with rich documentation, guides, and developer resources to help you get started quickly.

Stream’s Chat UI Kits provide the same components as CometChat’s, complete with rich theming and customization to match the style and behavior of your applications. Our extensive developer documentation and guides on our website and YouTube channel allow developers to get up and running with Stream in just a few lines of code.

Like CometChat, Stream’s Chat SDKs are rich API wrappers available over most popular frameworks and languages, allowing you to decide whether to customize our pre-made components or write your own from scratch.

SDK Support

Both Stream and CometChat offer SDKs for all major frameworks and languages. Notably, CometChat supports Vue, Laravel, and Ionic out of the box. In contrast, users of Stream would have to use our Javascript API directly to integrate with these frameworks.

Unlike CometChat, all of Stream’s SDKs are highly scalable and optimized for high traffic volumes, up to five million concurrent users in a single channel, all chatting simultaneously.

Stream has Chat SDKs for:

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

And Video SDKs covering:

• iOS
• Android
• Flutter
• React
• React Native
• Unity
• Javascript
• Platform API

Although this guide is focused on Stream’s Chat API, it is worth noting that our Video API, Stream Video, is a robust WebRTC-based API with high-quality video calling, audio rooms, and livestreaming support.

Unlike CometChat, Stream is built with scalability and reliability in mind. Stream is one of the few APIs with support for SFU cascading. When paired with our global edge network and expansive worldwide coverage, users on Stream can benefit from low-latency calling and superior audio thanks to features like OPUS-Red and OPUS-DTX built directly into the API.

Stream calls can scale from small one-on-one calls to large group calls. Video codecs are automatically handled and resolved along with dynamic video resolution adjustments based on an end user's device state and connection speed. Like our Chat API, developers using Stream can benefit from our rich UI components and SDKs when building their projects across all significant technology stacks and platforms.

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 group 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 snipped on the commandline:

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.