ajaxray/firebase-online-user-count-example.md

## readme.md

      
    Raw
  

              readme.md
            
          
    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

  
## firebase-online-user-count-example.md

      
    Raw
  

              firebase-online-user-count-example.md
            
          
    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 + ')');
    }
});

  
## gathering.js
/**
 * 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;
})();
	/**
	* 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;
	})();