How to Build a Chat App with Firebase

This tutorial will show you how to build your own chat application using Firebase's Realtime Database.

Njoku Samson Ebere • Mar 22, 2021

Have you thought about how difficult it is to build a chat application, showing you messages as soon as they are sent? In this tutorial we will do just that. I will guide you through building a web based chat application using Firebase as a realtime database and some simple HTML, CSS and Javascript for the interface.You can view the source code for the application on Github.

Note: If you're looking for a chat application but don’t want to build your own, you should consider CometChat. Our robust suite of cloud-hosted text, voice & video solutions, ranging from simple drag-and-drop plugins to UI Kits, APIs and fully customizable SDKs, plus a host of unique ready-to-use extensions, will seamlessly integrate into your website & apps, quickly and securely; saving you countless hours & resources, and dramatically growing engagement on your website. Give us a try for free today!

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/605913cf02c015b412ec24b5_623q4k34f6aar5ld9912.jpeg

What You Will Need

You will need a basic understanding of HTML, CSS and JavaScript as well as a google account to use with Firebase.

What is 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.

Setting Up Firebase

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

You will need to create a new Firebase project:

Create a Realtime Database

In the sidebar on the left

  • Open the ‘Build’ menu

  • Click on 'Realtime Database' and then ‘Create Database

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/636adaa6da8a9f9e9afd39eb_tCA7fjSbHZQYUH3mSJOYlSwbGRg6LjXZ9rLEWSd7tgwlCMfYjnXzPCJN0l1JAg3VYgk7gqFaeFGn3A5VudtfAOBUd0m1kZmo8rlpGWlom7PA4dFfAHepe4R3RJwn98eeEcU26efR2t9UgAi66S2TFu1pQhg3vN_A6sJnF5eFMVxZiKc7hecp8HazKtxQfQ.png

After that, select the region you want to use

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/636adaa6987188de88058605_7xGtFfBUmBTNQs9vhkgZg_u_U_4xU281EQQ6ip30avPnTFeUGxL44h1wT1LO0w-BTI8r5ZP6VOqIylvYL4cvzKLIi77NpSvsyxJ4P1QuR-4-ZHcqMlxWI01dCn0VkcI8DQkv-GdAOw6HDI27bvuxh3ix1H5YS3gnSOLDufsOdhBP90U_uyKIx-5npO5ZVw.png

Finally, start the database in 'test mode'

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/636adaa61d6abbcef6aabec0_xmmkdBhpsO9FKWApYf-mXOYeEw4j0fpCsXaScj1dj4zeMIItR0PQFllmuT1ChTbubT4FccIqMtQ7PHKJJtH8HvzJpTHLAYp8Wy3BuF-npKY3_1JtqFUeKGqz52GZP95v2llCKkHEaRyBC8ZD4ANE1TiN-ouPJb31D_MhhR-YhL3lxYnhCd9oBY086xw7qQ.png

Get Your Configuration Details

Once your database is setup, 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'

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/636adaa69b117042a35d24c7_zyjcO_cQiDHSrkh8M9f7HOPXQt0H1CdEmq3gkEgDG6WKkgWAme19WOtty3H8b38KYdFadWVvH7ATmKUJrtjQCYDxFQ3uUfWQI4TID94h0B2V4zBt5cG3aYILz5X4jP8xLRPnI4uZ821un27xCQPsNLp1devJc21HZSMv6UJ-dIcRTmIK98OWNjeWOd9acg.png https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/636adaa63981e2823077c0e5_9w2RPnby1MEWrTn2aIBrx3SD7dlsU5VfBNzMsWhkNI6IDYZQKOlc_4ZO_vpYpxC6yhmQCdZDMaAG2hhtTfYHRtPYDoOwFSstoMEZ0c5qJT4gV5zf_w_jGnRswCNRHxHRCCq2DHMo_QiygLq5e0lX2oZ4CR9FZsFzmZuoAfAVJSSVR6y49npZn6t3aTQejA.png
  • Enter a name for your application

  • 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

Project Setup

You project will consist of 3 files, create a folder with the 3 files named:

  • index.html

  • index.css

  • index.js

Laying The Foundation

The index.html file will contain the HTML for your application as well as  links to the index.css, and index.js files, as well as the Firebase SDK.

Add the following code to your index.html file:

Notice that the script tags for the Firebase SDKs and your index.js file are included in the <body> element. These load the Firebase SDK and make it available to your application. The index.css file is also included in the <head> element and will be used to style the application.

Next, Add the following content to the <body> element above the <script> tags:

In the HTML above, you created a <header> with the name of your app. The <ul> element will be used to to display messages loaded from the server while the <form> element will enable users to submit their messages.

If you open your application in a browser now, it should look something like this:

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/605913d16ada1f05a4e46b95_8za2j7xawb7h9xvqcj7y.jpeg

Adding Functionality

You now need to open the index.js file. This is where we will build out the functionality of our application step by step.

Initializing the Application

You need to tell your application how to connect to the Realtime Database we created and initialize the Firebase application.

Copy the firebaseConfig for your application from the Firebase Project Console and paste it into your index.js file. Then add the following lines of code:

Sending Messages

In order to send messages, users will type into the input form provided and click on the ‘Send’ button. Your app will subscribe to the submit event when the ‘Send’ button is clicked and then call the sendMessage() function.

The sendMessage() function will:

  • Prevent the default form behaviour

  • Capture and store the message sent by the user

  • Clear the input box

  • Scroll to the bottom of the page where the new message will appear

  • Add the message to the database

Edit your index.js file to contain the following code:

Receiving Text Messages

When a message is sent by one user it needs to be received by the other users of the application.

Edit your index.js file to contain the following code:

In the code above, you subscribe to the database's child_added event in order to be notified when new messages are added to the database. When a new message is added, it is appended to the <ul> element you created earlier as a new list item.

At this point, if you open your application in a browser it should be possible to:

  • Specify a username

  • Send and receive messages

https://uploads-ssl.webflow.com/5f3c19f18169b62a0d0bf387/605913d13f6a84d4221145a7_6f2w5ns0vflvzekdopym.gif

Chat App Demo Without CSS

Styling The App

To style your application you need to add some CSS to the index.css file. Feel free to copy and paste the styles below to get you started:

Conclusion

You have now built a simple realtime chat application using the Firebase SDK and Realtime Database as a datastore.

If you're looking for a robust application that's built to scale, consider CometChat. You can create an account for free, and start building right away. Develop for as long as you need, and don't pay a thing until you're ready to scale.

Njoku Samson Ebere

CometChat

He is a software engineer who is interested in building solutions to real world problems and teaching others about the things he knows. Something he really enjoys doing aside writing codes and technical articles is body building.

Try out CometChat in action

Experience CometChat's messaging with this interactive demo built with CometChat's UI kits and SDKs.