This content originally appeared on DEV Community and was authored by TheHappieDog
In this blog I am going to cover some basic stuff about the Firebase real-time database. So let's get started by creating basic HTML elements:
Notice we have created a input and a button and that is because for entering a message and sending it. One more thing is that we have used
<form>
and that is because we want to show the input and the button in the same line.
Next lets setup a new Firebase project and a app:
Now lets create a new web app in the console:
Give it a name and you can enable firebase hosting if you want but I don't want to do it now so I will uncheck it.
Then to use the Real-time database we will have create it so lets do that
after you have set up the database lets write some code
First of all lets import our database and our app
Now we will have to import our cdn in our JavaScript file and you can find that cdn in your project settings
Now let's configure firebase database and you can do it by copy pasting this snippet:
const db = firebase.database();
Now to get users data we will render a prompt:
Then we will listen for submit event on the form and call the postChat function:
document.getElementById("message-form").addEventListener("submit", sendMessage);
Next: We will send the message to the database
Now we will add a auto scroll to bottom functionality so that the user doesn't has to scroll down for a whole lot of time:
Now lets display the messages from our collection:
Now when you send a message it automatically updates in our database in the messages collection
Now lets add some bootstrap to enhance the user experience
Yes! I love it
You can find the whole code here: https://github.com/TheHappieDog/chat-app-blog
To support me you can follow me on github: https://github.com/TheHappieDog
Thank you!
This content originally appeared on DEV Community and was authored by TheHappieDog
TheHappieDog | Sciencx (2021-09-27T12:32:54+00:00) Building a chat app with Firebase DB. Retrieved from https://www.scien.cx/2021/09/27/building-a-chat-app-with-firebase-db/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.