Building a User Online Status (Presence) system in WebApps using Firebase and vue.js 2021.
Here we are going to build a presence system for any group chat/personal chat WebApp using our favorites Firebase Realtime Database and vue.js.
Check out the Demo and Github Repository where I have implemented the same.
Contents
- What is a presence system?
- Requirements for our project
- Project Setup
- Presence System implementation
- Limitations & their Solutions
What presence system?
The presence system is the system that tracks & syncs the online status of a user. In simple words, it tells you whether other users are online or offline. This feature is very much needed in any chat application you build.
Requirements for our project
Project Setup
We are going to need an authentication system to build and presence system for that please refer to this blog or you can follow the steps in the readme of this repository for a quick start.
It is okay even if you don’t have an authentication system built.
Presence System implementation
Here we are using a firebase real-time database. It is always good practice to create a component of such a recurrent feature that you will use many times. Assuming your component name is StatusBar.vue, just paste the following code.
What does this code do?
If you have followed proper steps in the authentication blog. auth.currentUser.uid will contain the uid of the user logged in. Here we are using the mounted lifecycle hook of vue.js. This basically means that the code present in the mounted function runs after the app gets loaded/mounted. Firebase's real-time database is simply based on URLs. You just have to make a request to a database to read or write data. Here we are making a write request.
Here comes 2 cases.
What happens when you reload the page? — Before reload Date.now() (eg. 1616667208885) has already been pushed to status/{uid} of the database. As shown below. This happens because of this code const elRef = userStatusDatabaseRef.push(Date.now()); line of code.
As soon as you click the reload button this above entry in the database gets deleted. After reload, it again gets added to the database.
Whenever you open your app on multiple tabs? — Let's say you open your app on the laptop on multiple tabs, let's say 2 tabs. Now, 2 entries will be done under status/{uid} . If you close one tab, one entry gets deleted. Another entry is still remaining which means that the user is still online.
Both scenarios are handled by the above code. Now just we have to check for any user that status/uid exists or not. If it does then the user is online else offline. Check out the code below and always write this kind of function in the beforeUpdate lifecycle of vue.js.
uid is the user id of the user whose online status you have to check. Replace it in the code above.
The best use case is when you have a list of user UIDs put the above code in a loop and check the presence for each one.
One last thing remaining, users will also be offline after they logout. So here is the code for that. Just call the logout method from the template.
Limitations & their Solutions
As we are implementing this system for the web. There are some limitations or challenges that you have to face.
- Minimizing the app will still be recorded online for a user. — To overcome this problem partially you might use visibility API or mouse events to set user status to ideal.
- Whenever you logout a user, all the entries in the status get deleted. If that user is active on another device then he will have no status that means he will be offline unless he refreshes the browser. — You can restrict the user to use one tab/device at a time. Just like WhatsApp web (you can’t open the same account of WhatsApp web in multiple tabs).
That's all, Thank you for reading this blog and Happy Hacking.