How to Build a JavaScript Chat App

Last updated
September 23, 2021
by
Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn.

Hiep Le

This step-by-step tutorial will guide you on how to build a JavaScript chat app using CometChat's chat widget and Firebase.

How to Build a JavaScript Chat App

Table of Contents

    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.

    What You Will Build

    In this tutorial your learn how to build an application which:

    • allow end-users to signup, creating new accounts in CometChat
    • enables users to login in and have a short profile (Name, UID, Photo, About)
    • authenticate users with CometChat and Firebase

    You will also use the CometChat Chat Widget and configure it such that:

    • a list of Users/Contacts is visible to all users with the search bar
    • all users can text chat and share images, audio, video, document,
    • all users can initiate voice & video call each other and groups
    • users can create/exit groups and add/remove other users
    • group chat via text, voice, and video chat is enabled for all users

    What You Will Need

    To follow this tutorial, you need to have a basic understanding of HTML, CSS, and JavaScript. You will also need:

    Project Setup

    To setup your project Create a folder named javascript-chat-app and ddd the following files and folders

    • css: will contain all styling for your JavaScript chat application
    • img: stores images used by the application such as the logo and background
    • js: contains the applications JavaScript code and business logic
    • screenshots: this folder contains images used in the README.md file
    • favicon.ico: the favicon.ico for the application.
    • index.html: will be displayed when users visit the application
    • login.html: will be displayed when users login to the application
    • .gitignore: contains files to be excluded from git. You need to include the config.js file because it will contain the secret keys for your application
    • README.md: describes the application and provides instructions for how to run the application.

    You will create the contents of the required files and folders as you follow the tutorial.

    You need to create a styles.css file inside the css folder in your project to store the applications stylesheet. The styles.css file on GitHub contains all the styles for the application.

    The img folder on GitHub contains all the image assets required by the application. You should download them and add them to the img folder inside your project.

    Installing JavaScript Dependencies

    In order to use the application in a web browser you need to setup a simple HTTP server to serve the HTML, CSS and JavaScript files. For this you will use http-server.

    Run the command npm install -g http-server install http-server from npm. 

    Once the module is installed you can start the server by navigating to your projects root folder and running http-server

    Setting up CometChat

    You will need to create a new App:

    Provide a name for your app and select the region you want to use.

    Form to provide a name and select the region for a new CometChat App
    Creating a new App in the CometChat dashboard

    Remove Existing Users and Groups

    CometChat will automatically create some Users and Groups to use with your application. You can safely remove these as you will be creating new users that will be shared between your application and CometChat.

    Creating a CometChat Chat Widget

    CometChat provides tools to help you create and design your chat app window which can then easily be embedded into your application as a widget. 

    To create a new Chat Widget with CometChat follow the steps below:

    • Select ‘Chat Widget’s from the menu on the left
    • Click on ‘New Chat Widget’

    This will create a new widget for you which you can customize in order to change the design or add and remove different features

    User interface for modifying a new chat widget
    Modifying a Chat Widget in the CometChat dashboard

    You can find more information about the Chat Widgets and different options in the docs. However we’ve done our best to make the features easily discoverable and as you will see the powerful widget means there's no need to build everything from scratch.

    Find Your App’s Credentials

    Once your App has been created you can find your APP ID and Auth Key on the ‘Quick Start’ page.

    An Apps authorization keys displayed in the CometChat dashboard

    While the WIDGET ID and REST API KEY can be found on your widgets page

    A Chat Widgets authorization keys displayed on the CometChat dashboard

    Configuring CometChat in Your Application

    In this tutorial, we will be using the CometChat Widget. When users log in to our application, they do not just log in to our application, they also log in to the CometChat platform.

    In order to use the CometChat widget or SDK in your application you need to provide the credentials needed to communicate with the CometChat platform.

    In the js folder your created earlier add a new file config.js to store your account credentials with the content below:

    Be sure to replace the example values with the values from your CometChat account.

    Setting Up Firebase

    Firebase is a back-end platform provided by Google for building full-stack applications. It provides programmers with authentication options, storage, databases, hosting, A/B testing and other services.

    Firebase helps you to focus on developing the front-end of your applications while it does the hidden jobs for you.

    You will need to create a new Firebase project: 

    Create a Realtime Database

    Firebase offers two types of databases (Cloud Firestore and Realtime Database). For the his tutorial, you will be using a Realtime Database.

    In the sidebar on the left

    • Open the ‘Build’ menu
    • Click on 'Realtime Database' and then ‘Create Database’

    After that, select the region you want to use

    Finally, start the database in Test mode

    Add an Authentication Service

    We will be using Firebase’s Authentication Service to manage users accounts. The service will be configured so that users need to provide a username (email address) and password in order to use the application.

    In the sidebar on the left

    • Open the ‘Build’ menu
    • Click on 'Authentication' and then ‘Get Started’

    Then select ‘Email/Password’ from the ‘Native providers’ list as your authentication method.

    Finally, enable the ‘Email/Password’ option and click ‘Save’.

    Get Your Configuration Details

    Once your database is set up, the only thing left to do is to get your configuration details. You will use these in order to authenticate your application with the Firebase service.

    You can find your configuration details in the Firebase console:

    • Click the Gear icon next to Project Overview
    • Choose Project Settings

    Under ‘Your apps’, select a ‘Web app’:

    428a1abcd0f90b23.png

    Next you need to register your application

    • Enter a name for your application e.g. javascript-chat-app
    • Click on ‘Register App’

    You can ignore the next screen and click on ‘Continue to Console’

    Your application’s config values will then be visible in the ‘Your apps’ section

    You will need to add these values to the config.js file you created earlier.

    Initializing Firebase in Your Application

    The firebase.js file will be responsible for interfacing with Firebase's Realtime Database service and  initialize the email/password authentication service provider enabling users to sign in with their email/password. The projects secret keys will be retrieved from the config.js file.

    Inside your js folder create a new firebase.js file with the following content:

    The Login Page​​

    The login page is responsible for authenticating users using the Firebase authentication service. It accepts the user credentials and either creates and account for them or logs them in, depending on if they are a new user or not. 

    Add the following HTML to the login.html file in your project:

    In the HTML above you have  included some third-party libraries:

    • CometChat Widget: helps integrate the CometChat Widget
    • UUID: The UUID library is used to generate a unique ID for each account
    • Validator: used to validate the login form
    • Firebase: helps us to interact with Firebase and use Firebase services including Firebase Authentication, and Firebase Realtime Database

    As well as using third-party libraries, you need to create some files to handle the logic for your application: auth.js, config.js, firebase.js, util.js, login.js. You have already created config.js and firebase.js, however you will now need to add the other files.

    The auth.js File

    The application needs to provide a way for users to login in and have a short profile. Once  the user has logged in to the application, the user cannot go back to the login page but if the user has not signed in to the application, the user cannot go to the home page. auth.js will be used to handle this functionality

    auth.js will be used on both the login and the home page and will be executed first before any other actions. This file will be responsible for checking if the current user has logged in, or not using the getLoggedinUser() function provided by the CometChat Widget SDK. If the user has not logged in to the application, the user will be redirected to the login page. 

    In the js folder create a new auth.js file with the following content:

    The util.js File

    Some functions can be used across multiple pages in the application, such as showing or hiding the loading indicator or getting information for the authenticated user. To avoid duplicating code, you should store all common functions in a single file.

    In the js folder create a new util.js file with the following content:

    The login.js File

    The login.js file is responsible for handling the business logic for the login page. This file contains functions which let the user register a new account or log in to the application. The full source code can be found on GitHub.

    In the js folder create a new login.js file and copy the contents of the login.js on GitHub

    Reading through the file, after clicking the sign-up button, the registerNewAccount() function will be called. It accepts a JSON object as a parameter containing the user’s information including email address, password, and password confirmation. Before proceeding, the user’s information is validated using the validateNewAccount() function. If the information is valid, the user’s avatar and unique id will be generated. The application then registers a new user account with the Firebase Authentication service as well as CometChat using the CometChatWidget SDK.

    In order to log in to the chat application, the user needs to click on the ‘Login’ button. The code snippet below describes how to handle the business logic for the sign-in feature. The user’s credentials will be taken from the input elements first and the application validates that information. If the input information is valid, the application will let the user log in using the Firebase Authentication Service and the CometChatWidget. The authenticated user will then be redirected to the home page.

    The Home Page

    After the user has logged in to the application, the user will be redirected to the home page which will display the CometChat Widget.

    Add the following HTML to the index.html file in your project:

    The index.js File

    This file is responsible for showing a greeting to the user, handling the logic when clicking on the “Logout” button, and launching the CometChat Widget.

    The most important part of the above code snippet is how to launch the CometChat Widget. According to the CometChat Widget documentation, you need to initialize the CometChat Widget first, if initialization is completed successfully, the code for launching the CometChat Widget will be executed. Aside from that, all configurations will be taken from the ‘config.js’ file. 

    Clicking the “Logout” button, will call the “logout” function provided by the CometChat SDK. If the function is executed successfully, you need to redirect the user to the login page.

    Conclusion

    You have now built your fist chat application using a CometChat Widget and Firebase.  You have seen how to integrate most of the CometChat functionalities such as texting and real-time messaging. 

    I hope you enjoyed this tutorial and that you were able to successfully build the JavaScript chat app. It's time to get busy and build other related applications with the skills you have gotten from this tutorial. You can start building your chat app for free by signing up to the CometChat dashboard.

    About the Author

    Hiep Le is a software engineer. He takes a huge interest in building software products and is a full-time software engineer. Most of his work is focused on one thing - to help people learn

    What to Read Next

    No items found.