Simplifying IT, Empowering Businesses

In this blog, we will learn about one-to-one chat, group creation, and users’ availability. 

To Initialize firebase into the application using below:

Config file code:

config = {
    apiKey: 'your api key',
    authDomain: 'ionicchat-6e260.firebaseapp.com',
    databaseURL: 'https://ionicchat-6e260.firebaseio.com',
    projectId: 'ionicchat-6e260',
    storageBucket: 'ionicchat-6e260.appspot.com',
  };

To get the rooms’ list, see the code snippet below that fetches all the rooms from chatUserList collection.

NODE_CHATS: String = "chats/"; 
NODE_CHAT_USER_LIST = "chatUserList/"; 
NODE_USERS = "users/"; 
NODE_GROUP = "group/" 
firebase.database().ref(this.NODE_CHAT_USER_LIST + id).onCchild_added., (childSnapShot) => { 
var childKey = childSnapShot.key; 
var childData = childSnapShot.val();
var data = childData as ChatUserListMessageModel 
if (data.id != undefined) {
 if (data.isGroup) {
	 data.username = data.groupName
 }
else { firebase.database().ref(this.NODE_USERS + data.id).once('value', (childSnapShot) => 
{ 
	if (7SON.stringify(childSnapShot) != null) 
	{ 
		var userData = childSnapShot.val() 
		data.username = data.isGroup ? data.groupName : userData.username 
		firebase.database().ref(this.NODE_USERS + data.id).off() 
	
	}
	});
}
}
});

The above code will yield the list as displayed below:

To get the message from the respective room, use the code snippet below that fetches all the notifications from the chat collection.

NODE_CHATS: String = "chats/"; 
NODE_CHAT_USER_LIST = "chatUserList/" 
NODE_USERS = "users/" 
NODE_GROUP = "group/" 
senderID="101" 
receiverlD="102" 
firebase.database().ref(this.NODE_USERS + receiverID).on('value', (snapshot) => { 
var childKey = snapShot.key;
 var childData = snapShot.val(); 

}) 

The above code will yield data as shown below:

To post a message in the chat room, use the code snippet below to add new messages.

NODE_CHATS: String = "chats/"; 
NODE_CHAT_USER_LIST = "chatUserList/"; 
NODE_USERS = "users/"; 
NODE_GROUP = "group/"; 
senderID="101";
receiverlD="102"; 
Ifirebase.database().ref(this.NODE_CHATS + senderlD + "/" + receiverlD).push(
	{ 
		time: firebase.database.ServerValue.TIMESTAMP,
		senderlD: senderlD, message: messageUser, 
		id: receiverlD, 
		isGroup: isGroup, 
		groupName: groupName, 
		islmage: islmage, 
		image: imageUrl, unReadCount: 0, 
}) 

To fetch the status of availability of the user below is the code snippet:

NODE_CHATS: String = "chats/";
NODE_CHAT_USER_LIST = "chatUserList/";
NODE_USERS = "users/";
NODE_GROUP = "group/";
senderID="101" receiverlD="102";
firebase.database().ref(this.NODE_CHATS + senderlD + "/" + receiverID).onCchild_added', (snapShot) => {})
firebase.database().ref(this.NODE_CHATS + senderlD + "/" + receiverID).onCchild_changed', (snapshot) => {})

The above code will fetch data from the table below:

To add group details in the group, use the snippet code below:

NODE_CHATS: String="chats/";
NODE_CHAT_USER_LIST="chatUserList/"
NODE_USERS="users/"
NODE_GROUP="group/"
senderID="101"
receiverlD="102"
CreateGroup(senderlD,userList: Array<any>){
  	let groupName="DevChat"
	let timestamp=firebase.database.ServerValue.TIMESTAMP
	let key=firebase.database().ref("group").push().key;
	for(leti=0;i<userList.length;i++)
	{
    		firebase.database().ref(this.NODE_CHAT_USER_LIST+userList[i]+"/"+senderlD).set(
		{
 			 id: receiverlD,
 			 time: timestamp,
 			 senderlD: senderlD,
 			 message: "Hi",
  			 groupName: groupName,
 			 isGroup: isGroup,
 			 isOnline: false,
 			 unReadCount: 0,
  			islmage: false,
 			 image: "",  
		})
			//Note: We also have to add same entry in NODE_CHATS as above 
			firebase.database().ref(this.NODE_GROUP+key).push(
				{
  					id: grouplist[i]
				}
			)
  		}
	}

Fetch messages from the chats collection by using the snippet below.

NODE_CHATS: String = "chats/";
NODE_CHAT_USER_LIST = "chatUserList/";
NODE_USERS = "users/";
NODE_GROUP = "group/";
senderID="101" receiverlD="102";
firebase.database().ref(this.NODE_CHATS + senderlD + "/" + receiverID).onCchild_added', (snapShot) => {})
firebase.database().ref(this.NODE_CHATS + senderlD + "/" + receiverID).onCchild_changed', (snapshot) => {})

Child_added: This will execute when a new entry is added in the table

Child changed: This will run when the existing entry is updated in the table

 There are many ways to implement chat messaging in ionic using Realtime Database. The above methodology is the simplest way to create a one-to-one group chat like other messaging applications. I hope you are now thorough with the Ionic Base implementation. In case of any further queries, get in touch with an expert at DEV IT here.