Guide to Implementing Ionic Firebase Chat
In this blog, we will learn about one-to-one chat, group creation, and users’ availability.
To Initialize firebase into the application using below:
|
1 2 3 4 5 6 7 8 9 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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.
|
1 2 3 4 5 6 7 |
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.
Shailesh Rohit
Latest posts by Shailesh Rohit (see all)
- How to Build Firebase Chat Using Ionic - May 27, 2021
- Guide to Implementing Ionic Firebase Chat - May 27, 2021
- Kotlin vs Java. What to choose? - December 28, 2017