Create a gist now

Instantly share code, notes, and snippets.

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.

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 ser 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;
})();
@jose2007kj

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

@ajaxray
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.

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