Grouping users into n size groups using angularfire - angularjs

Question

I am writing an Angular/Firebase application where users who visit a waiting room page are assigned a group and once that group has n users a new group is formed. Using transactions seems like the write path, but am stuck.
In the example below I have a Config service that returns an $firebaseObject
This object contains the group size or playerLimit.
angular.module('floodStudyApp')
.controller('WaitingroomCtrl', function ( $scope, $routeParams, Ref, $location, Config) {
Config.getConfig($routeParams.floodstudy).$loaded(function (config) {
$scope.floodstudyConfig = config;
var NUM_PLAYERS = config.playerLimit;
Ref.child('floodStudy/'+ config.name+ '/group' + $scope.floodstudyConfig.groups + '/players').transaction(function(playerList) {
if (playerList === null) {
playerList = {};
}
if(playerList.hasOwnProperty($routeParams.player)){
console.log("you already are here dude!");
return;
}
if(Object.keys(playerList).length % NUM_PLAYERS === 0) {
$scope.floodstudyConfig.groups++;
$scope.floodstudyConfig.$save();
}
playerList[$routeParams.player] = {
name: $routeParams.player,
startTime: Firebase.ServerValue.TIMESTAMP,
playerIndex: Object.keys(playerList).length+1
};
return playerList;
//}
}, function(error, committed, snapshot){
if(!error, committed){
$scope.$apply(function () {
$location.path('floodstudy/' + $routeParams.floodstudy+ '/group' + $scope.floodstudyConfig.groups + '/' + $routeParams.player);
});
}
});//end transaction
});// end get config
});
Assuming a surge of users, I need each group to have exactly n users. The code above handles a trickle of users, but not a surge. When hammered upon the groups contain 2-6 users each. Any suggestions on how to accomplish this would be greatly appreciated.
Here is a sample output after a surge: https://gist.github.com/shawnzam/041f4e26bc98a3f89a7b

Answer 1

Rather than attempting to do this with arrays, given all the reasons sequential, numeric ids fall over in distributed data, I'd instead recommend that you use a counter, simplify, and have great justice from every Zig.
Suggested data structure:
/rooms/$roomid/counter
/members/$counter_value/$memberid
Function to update the counter:
angular.factory('updateRoomCounter', function($q, Ref) {
return function(roomId) {
return $q(function(resolve, reject) {
Ref.child('rooms/'+roomId+'/counter').transaction(function(currentValue) {
if( currentValue >= <NUM_PLAYERS> ) { return; }
return (currentValue||0)+1;
}, function(err, committed, snap) {
if( err || !committed ) {
reject(err || 'Too Many Players');
}
else {
resolve(snap.val());
}
});
});
}
});
Using the counter update:
angular.controller(..., function(updateRoomCounter, Ref) {
function addAPlayer(roomId, userId) {
updateRoomCounter(roomId).then(function(myIndex) {
Ref.child('members/'+roomId+'/'+myIndex).set(userId, <doneFunction>, <errorFunction>);
}, function() {
// failed: try the next room?
})
}
});
Security rules to enforce structure:
{
"rules": {
"rooms": {
"$room_id": {
"counter": {
".write": "newData.exists()",
".validate": "newData.isNumber() && (newData.val() == data.val() + 1 || !data.exists() && newData.val() == 1)"
}
}
},
"members": {
"$room_id": {
"$counter_value": {
".write": "newData.val() === auth.uid && !data.exists() && newData.exists() && $counter_value <= root.child('rooms/'+$room_id+'/counter').val()"
}
}
}
}
}

Answer 2

Kato's answer is a good approach to implement your use-case. I want to chime in on why you are having this problem to begin with.
Firebase transactions work on a mixed client-and-server model. The code that you write for a transaction() runs on the client. It gets the current value as input and returns the new value (or nothing if no change is needed). This entire "current value + new value" package is then sent to the Firebase servers. The Firebase server then does a compare-and-set. If the stored value is the same as what you started the transaction with, your new value will be used. If the current value has changed in the meantime, your new value is rejected and your transaction handler is run again.
In your transaction handler, you don't just update the current value. You also have this snippet:
if(Object.keys(playerList).length % NUM_PLAYERS === NUM_PLAYERS) {
$scope.floodstudyConfig.groups++;
$scope.floodstudyConfig.$save();
}
Since this modifies data outside of the current/return value, it is not part of the transaction. So even if the new value that you return from the transaction on the server is rejected, you will already have updated the group.

Answer 3

I believe I have a solution. Instead of counting just the players per group I also count the current group. I do this in a single object of form {currentPlayers: 0, groups: 0}.
Function to update the counter object:
angular.module('floodStudyApp')
.factory('updateGroupCounter', function($q, Ref) {
return function(floodstudy, NUM_PLAYERS) {
return $q(function(resolve, reject) {
Ref.child('floodStudyConfig/'+floodstudy+'/currentPlayers').transaction(function(currentValue) {
if(currentValue.currentPlayers >= NUM_PLAYERS ) { return {currentPlayers: 1, groups: currentValue.groups +1}; }
return ({currentPlayers: currentValue.currentPlayers+1, groups: currentValue.groups});
}, function(err, committed, snap) {
if( err || !committed ) {
reject(err || 'Too Many Players');
}
else {
resolve(snap.val());
}
});
});
}
});
Function to update the counter object:
angular.module('floodStudyApp')
.controller('WaitingroomCtrl', function ( $scope, $routeParams, Ref, $location, Config, updateGroupCounter) {
function addAPlayer(roomId, userId, NUM_Player) {
updateGroupCounter(roomId, NUM_Player).then(function(currentConfig) {
Ref.child('floodstudy/' + roomId + '/group' + currentConfig.groups+ '/players/' + currentConfig.currentPlayers).set({
user: userId,
playerIndex: currentConfig.currentPlayers,
})
}, function() {
console.log("full");
})
}
Config.getConfig($routeParams.floodstudy).$loaded(function (config) {
$scope.floodstudyConfig = config;
var NUM_PLAYERS = config.playerLimit;
addAPlayer($routeParams.floodstudy, $routeParams.player, NUM_PLAYERS);
});// end get config
});