Firebase realtime database chat application hướng dẫn

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

Njoku Samson Ebere • Mar 22, 2021

Introduction

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!

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:

• Go to the Firebase Console
• Create a new project

Create 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'

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'

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

Next you need to register your application:

• 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 element. These load the Firebase SDK and make it available to your application. The index.css file is also included in the element and will be used to style the application.

Next, Add the following content to the element above the