How to Build a JavaScript Chat App

Building real-time chat into a JavaScript app from scratch sounds straightforward at first, but it quickly turns into a system-level challenge.

What starts as sending a message from one user to another expands into handling real-time messaging logic, managing reconnections, syncing state across tabs and sessions, and tracking user presence in real time.

Each of these problems is manageable individually. Together, they add up to weeks or even months of engineering effort before you’ve built anything close to a usable chat experience.

That’s where CometChat’s JavaScript chat SDK comes in. It gives you direct access to a fully managed real-time messaging infrastructure through a clean. Whether you're working with plain JavaScript or frameworks like Next.js, Nuxt, or Ionic, you can integrate chat without having to build or maintain the underlying systems yourself.

In this tutorial, you’ll use the JS SDK to build a minimal but complete chat flow from scratch: initializing the SDK, authenticating users, sending and receiving messages in real time, and retrieving message history.

If you’d rather skip building the UI layer altogether, CometChat also offers ready-to-use UI Kits for frameworks like React, Angular, Vue, and Flutter.

Why Use CometChat Instead of Building It Yourself?

To better understand how CometChat can accelerate your development process, here's a quick comparison of building a chat app using the traditional DIY approach versus leveraging CometChat:

What You'll Build

By the end of this tutorial you'll have an JavaScript app that supports:

Prerequisites

Knowledge

Tools

Getting Started

Step 1: Create a New JavaScript App

The CometChat JavaScript SDK works in any JavaScript environment, plain JS in the browser, or any Node-based web framework. Choose the option that matches your stack:

Option A: Next.js

Start the dev server to confirm everything is working:

Open the local host. You should see the default Next.js welcome page.

Option B: NuxtJS

Use your preferred Nuxt project generator (Nuxt 2 or Nuxt 3), then install dependencies:

Option C: Ionic

Create an Ionic/Cordova app (Ionic CLI) and install dependencies:

For plain JavaScript projects, you can skip the scaffolding and work directly in an HTML file or an existing project directory.

Step 2: Create a CometChat App and Collect Your Credentials

Every CometChat integration is tied to a CometChat app that manages your users, messages, and settings. Create one now:

Important: Keep your Auth Key secure. It grants full access to your CometChat app. Never commit it to version control or expose it in client-side code for production deployments.

Step 3: Install the CometChat JavaScript Chat SDK

Install the JS Chat SDK via npm. This is the right approach for any framework-based project (Next.js, NuxtJS, Ionic, or plain JS with a bundler):

If you're working in a plain HTML file without a build tool, load the SDK directly from the CDN instead:

After this script tag loads, the CometChat object is available globally as window.CometChat.

Step 4: Handle SSR Compatibility (Next.js and NuxtJS)

If you're using an SSR framework like Next.js or NuxtJS, you need to import the CometChat SDK dynamically on client-side to prevent server-side execution errors.

Next.js - dynamic import in a client component

Import the SDK inside a useEffect hook so it only runs in the browser. Gate your chat UI on the import completing:

The empty dependency array [] ensures the import runs once, after the component mounts in the browser. Your Chat component can then safely reference window.CometChat.

NuxtJS - dynamic import in the mounted hook

In NuxtJS, use the mounted lifecycle hook for the same result , it only fires client-side:

If you're not using an SSR framework, skip this step. In client-only environments (plain JS, Ionic), you can import the SDK at the top of your file in the normal way:

Step 5: Initialize CometChat

CometChat needs to be initialized once, before any SDK method is called. This registers your app credentials and establishes the connection to CometChat's real-time infrastructure. Run this on app startup, client-side.

// If using SSR dynamic import (Step 4), CometChat is on window.CometChat.

// In client-only apps, import directly:

// import { CometChat } from "@cometchat/chat-sdk-javascript";

Important: Replace YOUR_APP_ID, YOUR_REGION, and YOUR_AUTH_KEY with the values from your CometChat Dashboard. Call initCometChat() once before rendering any chat UI — in a top-level component effect, an app bootstrap function, or an initialization service.

.subscribePresenceForAllUsers() tells the SDK to track online/offline presence for all users in your app. If you only need presence for a subset of users, the SDK offers more targeted subscription options, see the CometChat JS SDK documentation.

Step 6: Authenticate a User

Before sending or receiving messages, a user must be logged in. The SDK's login method takes a User ID (UID) , the unique identifier you've assigned to this user in your CometChat app. For quick local testing, CometChat pre-seeds every new app with five test users:

• cometchat-uid-1

• cometchat-uid-2

• cometchat-uid-3

• cometchat-uid-4

• cometchat-uid-5

getLoggedinUser() checks whether a CometChat session is already active in this browser context, so the user isn't forced to re-authenticate on every page load or navigation.

Optional: Create a user on the fly (development only)

If you need to test with a user that doesn't exist yet in your CometChat app, you can create one via the SDK. This is useful during early development, not for production:

Production auth: Auth Key login exposes your Auth Key in client-side code, never use it in production. For production, generate a short-lived Auth Token server-side using your CometChat REST API and pass it to the client. Replace CometChat.login(uid, AUTH_KEY) with CometChat.login(uid, authToken) where authToken comes from your backend.

Step 7: Build a Minimal Chat Flow

With initialization and auth in place, you have everything you need to send and receive messages. A complete chat experience at minimum requires four things: a way to send messages, a listener to receive them in real time, a way to fetch history, and some state to hold the conversation. Here's each piece:

Send a text message (one-to-one)

The returned sentMessage contains the server-assigned message ID, timestamp, and delivery status, use these to update your UI optimistically after sending.

Listen for incoming messages in real time

Attach a message listener as soon as the user logs in. The listener key ("MESSAGE_LISTENER") is a unique string you choose, use it later to remove the listener when the component unmounts or the user navigates away:

Note: Always remove message listeners when they're no longer needed. In React, do this in the useEffect cleanup function. In Vue, do it in the beforeDestroy hook. Leaving listeners attached causes duplicate message events.

App and web development have come a long way in the last few years. We use a lot of chat applications every day, including Facebook Messenger, WhatsApp, and Snapchat. Using the CometChat Widget and Firebase backend services you will learn how to make a chat app with JavaScript with minimal effort.

Fetch previous message history

When a conversation is opened, fetch the message history before attaching the real-time listener. This gives the user context before new messages start arriving:

fetchPrevious() returns messages in reverse chronological order (newest last). Call it again with the same request builder to paginate further back through history.

Step 8 (Optional): Skip the SDK and Use a UI Kit Instead

If building the message list, conversation UI, typing indicators, and media handling yourself sounds like more work than you want to take on right now, CometChat's framework-specific UI Kits give you all of that pre-built. They use the same SDK under the hood but wrap it in ready-to-use components.

React UI Kit (React / Next.js)

Initialize using UIKitSettingsBuilder and render CometChatConversationsWithMessages to get a full conversations + messages UI in a single component. See the React tutorial for the complete walkthrough.

Angular UI Kit

Vue UI Kit

Each UI Kit has its own dedicated tutorial with complete setup and rendering instructions.

Step 9 (Optional): Embed a Full Chat UI via the CometChat Widget

If you want a complete chat UI in your app without writing any component code at all, the CometChat Chat Widget gives you a configurable, embeddable chat interface via a script tag — no SDK integration required.

Configure the widget appearance and behavior in your CometChat Dashboard, then paste the generated embed snippet into your HTML, Next.js custom document, or Nuxt layout. The widget handles authentication, conversation management, and messaging entirely on its own.

See the CometChat Chat Widget documentation for the full integration guide.

CometChat JavaScript Sample Apps

CometChat provides fully functional sample apps for each supported framework. These are the fastest way to see every CometChat feature running together before building your own integration.

Prerequisites

• Node.js and npm installed

• A CometChat account with an App ID, Region, and Auth Key

Option A: Framework Sample Apps (with Full UI)

Clone the sample app for your framework, install dependencies, add your credentials, and run it locally. Each repository's README contains the exact run command.

React Sample App

Angular Sample App

Vue Sample App

After installing, add your App ID, Region, and Auth Key where the sample app prompts you to (typically an AppConstants or .env file), then follow the README to start it locally.

Option B: Chat Widget Embed (No Framework Code Required)

If you want to explore the full CometChat UI without writing any integration code, the Chat Widget embed is the fastest path. Configure the widget in your CometChat Dashboard, copy the script snippet, and paste it into any HTML page.

Start from the Widget integration documentation.

Conclusion

You now have a working JavaScript chat; initialized, authenticated, and ready to send and receive real-time messages. The CometChat JS chat SDK gives you full control over how the data flows through your app, without having to build or operate any of the real-time infrastructure behind it.

From here, the natural next step is building out the UI layer: a message list that updates as new messages arrive, a conversation picker that switches the active UID, and input handling for sending. The sample apps are worth running if you want a reference implementation to study — each one shows how these pieces fit together in a real app.

When you're ready to move faster on the UI side, the React, Angular, and Vue UI Kits sit directly on top of the same SDK you've just integrated. You can adopt them incrementally without replacing what you've already built. Happy shipping!

Haris Kumar

Lead Content Strategist , CometChat

Haris brings nearly half a decade of expertise in B2B SaaS content marketing, where he excels at developing strategic content that drives engagement and supports business growth. His deep understanding of the SaaS landscape allows him to craft compelling narratives that resonate with target audiences. Outside of his professional pursuits, Haris enjoys reading, trying out new dishes and watching new movies!