Skip to content

Commit

Permalink
Realtime Chatroom | Firebase
Browse files Browse the repository at this point in the history
  • Loading branch information
@YeaminRabbi
YeaminRabbi committed Feb 4, 2022
1 parent 037f109 commit ceb1d85
Show file tree
Hide file tree
Showing 5 changed files with 274 additions and 0 deletions.
93 changes: 93 additions & 0 deletions 17. Realtime-Chatroom/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Firebase Database</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- container and title -->
<div class="container my-4">
<h1 class="my-4 text-center">Jellyfish Chat</h1>

<!-- buttons for chatrooms -->
<div class="chat-rooms mb-3 text-center">
<div class="my-2">Choose chatroom:</div>
<button class="btn" id="general">#general</button>
<button class="btn" id="gaming">#gaming</button>
<button class="btn" id="music">#music</button>
<button class="btn" id="jellyfish">#jellyfish</button>
</div>
<!-- chat list / window -->
<div class="chat-window">
<ul class="chat-list list-group"></ul>
</div>
<!-- new chat form -->
<form class="new-chat my-3">
<div class="input-group">
<div class="input-group-prepand">
<div class="input-group-text">Your message:</div>
</div>
<input type="text" id="message" class="form-control" required>
<div class="input-group-append">
<input type="submit" class="btn" value="send">
</div>
</div>
</form>

<!-- update name form -->
<form class="new-name my-3">
<div class="input-group">
<div class="input-group-prepand">
<div class="input-group-text">Update name:</div>
</div>
<input type="text" id="name" class="form-control" required>
<div class="input-group-append">
<input type="submit" class="btn" value="update">
</div>
</div>

<div class="update-mssg"></div>
</form>

</div>



<script src="http://cdn.date-fns.org/v1.9.0/date_fns.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
<script>
//Initialize firebase
var config = {
apiKey: "AIzaSyARhuobNZ7yjMU7bGdwfKDfIqIC2rsIcLc",
authDomain: "javascript-basic-4a754.firebaseapp.com",
databaseURL: "https://javascript-basic-4a754-default-rtdb.firebaseio.com",
projectId: "javascript-basic-4a754",
storageBucket: "javascript-basic-4a754.appspot.com",
messagingSenderId: "795018421770",
appId: "1:795018421770:web:f8643727845b22d6a4a1f3",
measurementId: "G-828HZ8L0KN"
};

firebase.initializeApp(config);
const db = firebase.firestore();

</script>


<script src="scripts/chat.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
70 changes: 70 additions & 0 deletions 17. Realtime-Chatroom/scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
// dom quires
const chatList = document.querySelector('.chat-list');
const newChatForm =document.querySelector('.new-chat');
const newNameForm =document.querySelector('.new-name');
const updateMssg =document.querySelector('.update-mssg');
const rooms =document.querySelector('.chat-rooms');


// add a new chat
newChatForm.addEventListener('submit', e =>{
e.preventDefault();
const message = newChatForm.message.value.trim();
chatroom.addChat(message)
.then(() => newChatForm.reset())
.catch(err => console.log(err));
});

//update username
newNameForm.addEventListener('submit', e=> {
e.preventDefault();
//update name via chatroom class
const newName = newNameForm.name.value.trim();
chatroom.updateName(newName);

//reset the form
newNameForm.reset();

//show then hide the update msg
updateMssg.innerText = `Your name was updated to ${newName}`;
setTimeout(() => updateMssg.innerText = '', 3000);

});


//update the chat room
rooms.addEventListener('click', e => {
if(e.target.tagName === 'BUTTON'){
chatUI.clear();
chatroom.updateRoom(e.target.getAttribute('id'));
chatroom.getChats(chat => chatUI.render(chat));
}
});


//check local storage for the username if exist
const username = localStorage.username ? localStorage.username : 'anonymous';

// class instances
const chatUI = new ChatUI(chatList);
const chatroom = new Chatroom('gaming', username);

//get chats and render
chatroom.getChats(data => chatUI.render(data));

















55 changes: 55 additions & 0 deletions 17. Realtime-Chatroom/scripts/chat.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
//adding new chat documents
//setting up a real-time listerner to get new chats
//updating the username
//updating the room

class Chatroom{
constructor(room, username){
this.room = room;
this.username = username;
this.chats = db.collection('chat');
this.unsub;
}

async addChat(message){
//format a chat object
const now = new Date();
const chat = {
message,
username: this.username,
room: this.room,
created_at: firebase.firestore.Timestamp.fromDate(now)
};

//save the chat document
const response = await this.chats.add(chat);
return response;
}

getChats(callback){
this.unsub = this.chats
.where('room', '==', this.room)
.orderBy('created_at')
.onSnapshot(snapshot => {
snapshot.docChanges().forEach(change => {
if(change.type === 'added'){
// update the ui
callback(change.doc.data());
}
});
});
}

updateName(username){
this.username = username;
localStorage.setItem('username', username);
}
updateRoom(room){
this.room = room;
if(this.unsub){
this.unsub();
}
}

}

26 changes: 26 additions & 0 deletions 17. Realtime-Chatroom/scripts/ui.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
//render chat templates to the DOM
//clear the list of chats (when room changes)

class ChatUI {
constructor(list){
this.list = list;
}
clear()
{
this.list.innerHTML = '';
}
render(data){
const when = dateFns.distanceInWordsToNow(
data.created_at.toDate(),
{ addSuffix: true}
);
const html=`
<li class="list-group-item">
<span class="username">${data.username}</span>
<span class="message">${data.message}</span>
<div class="time">${when}</div>
</li>
`;
this.list.innerHTML+= html;
}
}
30 changes: 30 additions & 0 deletions 17. Realtime-Chatroom/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.container{
max-width: 600px;
}

.btn{
background: #43d9be;
color: white;
outline: none !important;
box-shadow: none !important;
}

.btn:focus{
outline: none !important;
}

.username{
font-weight: bold;

}


.time{
font-size: 0.7em;
color: #999;
}

.update-mssg{
text-align: center;
margin: 20px auto;
}

0 comments on commit ceb1d85

Please sign in to comment.