Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular 7 + Firebase Support Chat Snippets
import { Component, OnInit } from '@angular/core';
import { ChatService } from './chat.service';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.scss']
})
export class ChatComponent implements OnInit {
messagesList: any;
searchableList = [];
users: any;
usersList = [];
selectedUser: any;
chatItem: any;
agent: any;
newChatComment: any;
constructor(
private chatService: ChatService,
) {
this.agent = JSON.parse(localStorage.getItem('user'));
}
ngOnInit() {
this.getMessage().then(users => {
this.showChat(this.usersList[0]);
});
}
getMessage() {
return new Promise((res, rej) => {
this.loaderService.show();
this.chatService.getMessagesList().subscribe(messagesList => {
this.messagesList = messagesList;
console.log('the message list: ', this.messagesList);
this.usersList = Object.keys(this.messagesList).map(val => {
return val;
});
this.chatService.getUsersList(this.usersList).subscribe(usr => {
this.users = usr['data'];
this.searchableList = usr['data'];
});
this.getChat(this.usersList[0]);
res(this.usersList);
});
});
}
getLatestMessage(msg) {
const indx = Object.keys(msg.messages)[Object.keys(msg.messages).length - 1];
const lastMsg = msg.messages[indx];
if (lastMsg.card) {
return lastMsg.card.tourTitle;
} else {
return lastMsg.messageBody;
}
}
getLatestMessageTime(msg) {
const indx = Object.keys(msg.messages)[Object.keys(msg.messages).length - 1];
const lastMsg = msg.messages[indx];
return lastMsg.timeStamp;
}
showChat(user) {
this.loaderService.show();
this.chatService.getMessages(user).subscribe(messages => {
this.chatItem = messages;
Object.keys(this.chatItem).map(key => {});
this.loaderService.hide();
});
setTimeout(() => {
document.querySelector('.message-fixed-section').scroll(0, 99999);
}, 100);
}
getChat(user) {
this.selectedUser = user;
this.loaderService.show();
this.chatService.getMessagesId(user).subscribe(messages => {
if (messages) {
Object.keys(messages).map(key => {});
// this.showChat(user);
this.loaderService.hide();
}
});
}
filterItems(event) {
const input = event.target.value;
this.searchableList = this.users.filter(item => {
if (item.name.toLowerCase().includes(input.toLowerCase())) {
return item;
}
});
}
postMessage(commentForm) {
const message = commentForm.value.chatComment;
const user = {
id: this.agent._id,
name: this.agent.name
};
console.log(message, user, this.agent);
this.chatService.sendMessage(user, message, this.selectedUser);
commentForm.reset();
}
endConversation() {
this.chatService.endConversation(this.selectedUser);
}
}
// This also may contain some unused stuff in here for the chat - that is for Twilio Call.
import { Injectable, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from '@angular/fire/database';
import { HttpService } from 'src/app/service/http.service';
@Injectable({
providedIn: 'root'
})
export class ChatService implements OnInit {
constructor(private db: AngularFireDatabase, private http: HttpService) {}
ngOnInit() {}
getMessagesList() {
return this.db.object('Chat').valueChanges();
}
getMessages(user) {
return this.db
.list('Chat/' + user + '/messages', ref => {
return ref.orderByChild('timeStamp');
})
.valueChanges();
}
getMessagesId(userID) {
return this.db.object('Chat/' + userID + '/messages').valueChanges();
}
getUsersList(firebaseIds) {
return this.http.apiPost('/users/search', { firebaseIds });
}
sendMessage(user, message, chatID) {
const messageData = {
senderID: user.id,
messageBody: message,
senderName: user.name,
timeStamp: new Date().getTime()
};
const agentMeta = {
name: user.name,
new: true
};
const userMeta = {
new: false
};
this.db.list(`Chat/${chatID}/messages`).push(messageData);
this.db.database.ref(`Chat/${chatID}/meta-data/agent`).update(agentMeta);
this.db.database.ref(`Chat/${chatID}/meta-data/user`).update(userMeta);
}
endConversation(chatID) {
const agentMeta = {
name: '',
new: false
};
const userMeta = {
new: false
};
this.db.database.ref(`Chat/${chatID}/meta-data/agent`).update(agentMeta);
this.db.database.ref(`Chat/${chatID}/meta-data/user`).update(userMeta);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment