Real-Time Chat Application
Let’s build a simple real-time chat application to demonstrate Firebase Realtime Database in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Chat Application</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.chat-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#chat-window {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#message-input {
width: calc(100% - 70px);
padding: 5px 10px;
margin-right: 10px;
}
#send-button {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
#send-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chat-container">
<div id="chat-window"></div>
<input type="text" id="message-input" placeholder="Type your message...">
<button id="send-button">Send</button>
</div>
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-database.js"></script>
<script>
const firebaseConfig = {
apiKey: "AIzaSyDmaZAcK7xwQTAsQJxaGnG56oB8RIJDMnc",
authDomain: "samplep-d6b68.firebaseapp.com",
projectId: "samplep-d6b68",
storageBucket: "samplep-d6b68.appspot.com",
messagingSenderId: "398502093281",
appId: "1:398502093281:web:5d685b0733d4d6d66472a0",
measurementId: "G-9E6K9YD8D1"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const database = firebase.database();
const chatWindow = document.getElementById('chat-window');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');
sendButton.addEventListener('click', () => {
const message = messageInput.value.trim();
if (message !== '') {
database.ref('messages').push({
message: message,
timestamp: firebase.database.ServerValue.TIMESTAMP
});
messageInput.value = '';
}
});
database.ref('messages').on('child_added', (snapshot) => {
const messageData = snapshot.val();
const messageElement = document.createElement('div');
messageElement.textContent = messageData.message;
chatWindow.appendChild(messageElement);
chatWindow.scrollTop = chatWindow.scrollHeight;
});
</script>
</body>
</html>
Output:
Firebase Realtime Database
Firebase Realtime Database is a powerful NoSQL cloud database that enables real–time data storage and synchronization across all clients. It’s particularly suited for applications requiring live updates, such as chat apps and collaborative tools.
By following the setup instructions and using the provided examples we can take help of Firebase Realtime Database to build efficient and interactive web applications that meet the demands of modern real-time data needs.
In this article, We will learn about Firebase Realtime Database and how to Setting Up Firebase Realtime Database in detail.
Contact Us