Track or count online users in Firebase webapp

It’s a pretty common need to track online users of an web application. Sometimes for counting total online users, sometimes by isolated space, e.g., by chatroom or shared list. So, instead of doing similar things every time, I’ve written a javascript module to use in Firebase web applications – Gathering.js.

In this post, I’ll show how it can be used for various type of tracking needs with small code snippets.

BTW, if you are thinking what Firebase is, it’s a Google acquired app development platform for mobile and web. For web application, it’s providing ready made infrastructure with super fast realtime database, flexible Authentication, cross platform Cloud Messaging, static hosting, CDN… (almost) everything you need to develop an app (or a feature) quickly with robustness. You should give it a try.

Installation

Go to the gist and copy the gathering.js file. Save it to whatever is you directory convention and include in your page. Thats all.

How to use it – snippets for a few use cases.

Let’s start case by case. In every example below, we’ll assume that we have initialized the firebase application (using SDK version 3.0.5 or later).

firebase.initializeApp({...});

Case 1: I just need a count or list of total online users – the basic

// default/global gathering
var onlineUsers = new Gathering(firebase.database());
 
// Join myself Anonymously (a random generated name)
onlineUsers.join();
// Or join with a beautiful name
onlineUsers.join(null, "Umar Ibn Khattab");
 
// Attach a callback function to track updates
// That function will be called (with the user count and array of users) every time user list updated
onlineUsers.onUpdated(function(count, users) {
    console.log('We have '+ count +' members online right now.');
    console.log('Here is the updated users list -');
    for(var i in users) {
        console.log(users[i] + '(id: '+ i + ')');
    }
});

Case 2: I need the list and count of online users by chatroom / group / specific item viewers

This time, we will need to provide a name/identifier while initiating the Gathering object. Everything else will remain same as Case 1. For example –

// Create isolated gatherings per meeting
var meeting = new Gathering(firebase.database(), 'Unique-Meeting-ID');
 
// Show meeting attendee list
meeting.onUpdated(function(count, users) {
    $('span#member-count').text(count + ' members in meeting');
    $('ul#member-list').empty();
    for(var i in users) {
        $('ul#member-list').append('<li id="'+ i +'">'+ users[i] +'</li>');
    }
});
 
// If I want to join this meeting
meeting.join(null, "Umar Ibn Khattab");
 
// When I am done with this meeting, let's leave
meeting.leave();
 
// When all users have left or authorised person ended the meeting, clear the room
meeting.over();

Case 3: I need to be sure that a user is being counted once, even if logged in from multiple tab/device

To confirm distinct presence of users, we need to pass a unique id of user when joining a gathering. Then, even if the user is logged in from multiple device or join() is called multiple times, he will be counted only once. For example, if we need to confirm distinct presence in Case 2, we need to change only join() parameters.

// If using firebase Auth and user is logged in
meeting.join(firebase.auth().currentUser.uid, firebase.auth().currentUser.displayName);
// Otherwise 
meeting.join('Users-Email-Or-Unique-ID', "User's Name");

Here you’ll find some general usages instructions. If you can think of any other practical case that was not covered in these examples, please feel free to ask me.