Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Keep list (and count) of online users in a Firebase web app - by isolated rooms or globally

Gathering.js - Overview

Keep list (and count) of online users in a Firebase web app - by isolated rooms or globally.

Let's create a new gathering

firebase.initializeApp({...});
var gathering = new Gathering(firebase.database(), 'A Room Name');

Now you'll have the following functions and properties to work with -

  • gathering.join(uid, displayName) - Add me to gathering. Optionally can provide a unique id and displayName.
  • gathering.leave() - Leave (that means remove myself from) the gathering
  • gathering.over() - Remove gathering from database
  • gathering.onUpdated(callback) - That function will be called (with user count and hash of users as param) every time the user list changed
  • gathering.roomName - The gathering name
  • gathering.myName - Current users's name in gathering, if joined
  • gathering.room - Firebase Database reference to the gathering room. Can be listened for removal or anything.

To see the usages in more details, please check the firebase-online-user-count-example.md file

Gathering.js - How to use

Keep list (and count) of online users in a Firebase web app - by isolated rooms or globally.

Live Demo

Firebase Shared Checklist is a demo application that shows the number of users joined a checklist using gathering.js. Here is a 1 minute screencast of using this application. You may have a look at the source code to see example usages.

Initialization

firebase.initializeApp({...});

// default/global gathering
var onlineUsers = new Gathering(firebase.database());

// Create an isolated space
var chatroom = new Gathering(firebase.database(), 'Special Name');

Joining, Leaving and Ending (removing) a gathering

var gathering = new Gathering(firebase.database(), 'Gathering Name');

// Join Anonymously
gathering.join();

// Or Join with a unique id
// This will ensure distinct presense of a user, even if opened on multiple browser tab or device
gathering.join(firebase.auth().currentUser.uid);

// Also can set a display name (along with or without unique id)
gathering.join(null, 'Superman');
gathering.join(firebase.auth().currentUser.uid, 'Superman');


// When I am finished with the gathering, I may leave
// When browser is closed/refreshed, current user will automatically leave 
gathering.leave();

// When all user's have left, or the meetup is over, we can remove the gathering
gathering.over();

Let's do something with the user count and user name list

var gathering = new Gathering(firebase.database(), 'Gathering Name');

// 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
gathering.onUpdated(function(count, users) {
    console.log(gathering.roomName + ' have '+ count +' members.');
    console.log('Here is the updated users list -');
    for(var i in users) {
        console.log(users[i] + '(id: '+ i + ')');
    }
});
/**
* A Javascript module to keep list (and count) of online users in a Firebase web app - by isolated rooms or globally.
*
* Initial idea from - http://stackoverflow.com/a/15982583/228648
*
* @url : https://gist.github.com/ajaxray/17d6ec5107d2f816cc8a284ce4d7242e
* @auther : Anis Uddin Ahmad <anis.programmer@gmail.com>
*
* w:ajaxray.com | t:@ajaxray
*/
var Gathering = (function() {
var randomName = function () {
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
};
function Gathering(databaseReference, roomName) {
this.db = databaseReference;
this.roomName = roomName || 'globe';
this.room = this.db.ref("gatherings/" + encodeURIComponent(this.roomName));
this.myName = '';
this.user = null;
this.join = function(uid, displayName) {
if(this.user) {
console.error('Already joined.');
return false;
}
this.myName = displayName || 'Anonymous - '+ randomName();
this.user = uid ? this.room.child(uid) : this.room.push();
// Add user to presence list when online.
var self = this;
var presenceRef = this.db.ref(".info/connected");
presenceRef.on("value", function(snap) {
if (snap.val()) {
self.user.onDisconnect().remove();
self.user.set(self.myName);
}
});
return this.myName;
};
this.leave = function() {
this.user.remove();
this.myName = '';
};
this.over = function () {
this.room.remove();
};
this.onUpdated = function (callback) {
if('function' == typeof callback) {
this.room.on("value", function(snap) {
callback(snap.numChildren(), snap.val());
});
} else {
console.error('You have to pass a callback function to onUpdated(). That function will be called (with user count and hash of users as param) every time the user list changed.');
}
};
}
return Gathering;
})();

sir,i am planning to store user registration details in firebase,so can i use your code to find number of users registred
thankyou sir

Owner

ajaxray commented Nov 15, 2016

@jose2007kj you are welcome. Of course you can.

But, I guess, you do not need this module for just counting registered users. You can get the count just by numChildren() function on your user collection.

w1f7UBC commented Oct 20, 2017

Can anyone recommend a module or github page for the tracking of all users including ones that are not currently online? All users that have ever registered. I would like to get a count of all users or a list.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment