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

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

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 <[email protected]>
 * 
 * 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;
})();

I don't know if I will get an answer to this but let me ask hoping that I do

Thank you for this awesome library, I am faced with an issue of the online users duplicating after a page refresh.

When a user logs in, the count is accurate and online users too are accurate but when one of the users logs out or closes his/her browser, the users that are still logged in can see the count reduce by 1 but the logged out user name still appears.

Let assume, I have the following list as online users;
User1
User2
User3

After User1 closes the tab, this is what I would have;
User1
User2
User3
User2
User3

Any help would be appreciated, I tried modifying the code to something like this;
let unique_users = array_unique(users);
for(var i in unique_users)
but I am still getting the same results.

but I still get the same result.

Sir, is there a cdn link to this library to connect from client-side???