Related
I'm using a factory service to fetch some data using the $http service. The problem here, I dont want to make a http request each time, I want to save this data somewhere and get a local copy of it when needed. To that end I thought creating an array inside that factory and assign the loaded data to it on the first call, and then just return it when required, instead of loading it again from the server. In my case, it the http service is fired every time. How can I fix this? I read here but that does not answer my question.
This is my factory:
angular.module("app").factory("getDataService", ['$http', function ($http) {
var usersArray = [];
if (usersArray.length === 0) {
return {
getJsonData: function () {
return $http.get('https://api.myjson.com/bins/eznv3')
.success(function (data, status, headers, config) {
usersArray = data;
return data;
})
.error(function (error, status, headers, config) {
});
}
}
}else{
return usersArray;
}
}]);
And this is the controller that uses this service:
angular.module("app").controller("ctrl", ["$scope", "getDataService", function ($scope, getDataService) {
angular.element(document).ready(function () {
getDataService.getJsonData().then(function (data) {
$scope.users = data.data;
});
});
}]);
You do not need to cache the response of $http.get manually, angularJS itself provides a way to cache the response. Try below code in your getJsonData function of your factory:
getJsonData: function () {
return $http.get('https://api.myjson.com/bins/eznv3', {cache: true})
.success(function (data, status, headers, config) {
return data;
})
.error(function (error, status, headers, config) {
});
}
Source: https://docs.angularjs.org/api/ng/service/$http#get
Read the above document. You will find configurations from there.
You can use Local Storage for it, one of the best and easiest ways.
LocalStorage.setItem('usersArray',data); sets the data in the local storage.
LocalStorage.getItem('usersArray'); retrieves the data from local storage.
Here is the change of your factory,
angular.module("app").factory("getDataService", ['$http', function ($http) {
var usersArray = LocalStorage.getItem('usersArray');
if (usersArray.length === 0) {
return {
getJsonData: function () {
return $http.get('https://api.myjson.com/bins/eznv3', {cache: true})
.success(function (data, status, headers, config) {
usersArray = data;
LocalStorage.setItem('usersArray',data);
return data;
})
.error(function (error, status, headers, config) {
});
}
}
}else{
return LocalStorage.getItem('usersArray');
}
}]);
Your controller,
angular.module("app").controller("ctrl", ["$scope", "getDataService", function ($scope, getDataService) {
var x = [];
angular.element(document).ready(function () {
if (x.length == 0) {
getDataService.getJsonData().then(function (data) {
x = data.data;
$scope.users = x;
});
}else{
console.log("local copy of data exists");
}
});
}]);
Advantages of localstorage:
With local storage, web applications can store data locally within the user's browser.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
Few days back, i got same kind of requirement and following is code of module i had created for same...
'use strict';
(function() {
angular.module('httpService', []).service("api", ["$http", "dbService", function($http, dbService) {
/**
* <Pankaj Badukale>
* ()
* request.url => Url to request
* request.method => request method
* request.data => request data
* request.mask => This is custom object for out use
*
* #return ()
*/
return function (request) {
var url = (request != undefined && request.url != undefined) ? request.url : "./";
var method = (request != undefined && request.method != undefined) ? request.method : "GET";
var rData = (request != undefined && request.data != undefined) ? request.data : {};
/**
* mask is CUSTOME object we add to request object
* Which is useful for keep track of each request as well interceptor execute
*
* IT HAS
* {
* save : true, //tell that save request response in session
* fetch : true, //check local data first,
* fetchSource : tell about perticular source of data DEFAULT WILL BE sessionStorage
* OPTIONS are session and local
* } strucutre FOR NOW may be it will better or enhance in future
*
* message property to set message in alert
* doExecute tell wheather you want to execute maskMan code for this request
*
* while saving and fetching data from local it uses URL of request as key
* maskMan is a factory which iterate your error response object and we can add different behaviours for maskMan
*/
var mask = {};
if(request != undefined && request.mask != undefined) {
mask = request.mask;
}
return dbService.http(request).then(function(data) {
console.log("Data fetched from local "+ request.url);
return data;
}, function(err) {
return $http({
url: url,
method: method,
data: rData,
mask: mask,
header:{
'content-type':'application/json'
}
}).then(function(response) {
return response.data;
},function(error) {
return error;
});
});
};
}]).service('customHttpInterceptor', ["$q", "maskMan", function($q, maskMan) {
return {
//before send request to server
request: function(config) {
return config;
},
//if any found in request object
requestError: function(rejection) {
return $q.reject(rejection);
},
//on response come to web app
response: function(response) {
maskMan.responseIterator(response);
//you to return any thing as response from here
return response;
},
//if there is error in response`
responseError: function(rejection) {
maskMan.statusIterator(rejection);
return $q.reject(rejection);
}
};
}]).factory("maskMan", ["dbService", function(dbService) {
return {
/**
* statusIterator
* Iterate response object on error comes
*/
statusIterator: function(rejection) {
if( rejection.config.mask.doExecute == true) {
switch(rejection.status) {
case 404: this.notFound(rejection);
break;
default: this.dontKnow(rejection);
}
}
},
/**
* notFound
* Function to defined logic for 404 error code scenario's
* Here we can defined generic as well specific request object conditions also
*/
notFound: function(rejection) {
var errMsg = rejection.config.mask.message || "Something wrong";
alert(errMsg);
rejection.stopExecute = true;//stop further execute of code flag
},
/**
* dontKnow
* For every error response this method goingt to envoke by default
*/
dontKnow: function(maskObject) {
console.log("Don't know what to do for "+maskObject.config.url);
},
/**
* responseIterator
* Define logic to do after response come to browser
*
* #params JSON resp
*/
responseIterator: function(resp) {
//Logic to save data of response in session storage with mask command save
if( resp.config.mask !== undefined && resp.config.mask.save === true ) {
var sdata = JSON.stringify(resp.data);
var skey = resp.config.url;
dbService.sinsert(skey, sdata);
}//END
}
};
}]).service("dbService", ["$q", function($q) {
/**
* http
* Custom mirror promise to handle local storage options with http
*
* #params JSON request
*/
this.http = function(request) {
var self = this;
return $q(function(resolve, reject) {
if( request.mask != undefined && request.mask.fetch === true ) {
var data = null;
if( request.mask.fetchSource == undefined || request.mask.fetchSource == "session") {//go for default sessionStorage
data = JSON.parse(self.sget(request.url));
} else if( request.mask.fetchSource == "local" ) {
data = JSON.parse(self.get(request.url));
} else {
reject( "Fetch source is not defined." );
}
if( data != undefined && data != null ) {
resolve(data);
} else {
reject("Data not saved in local "+request.url);
}
} else {
reject("Data not saved in local "+request.url);
}
});
}
/**
* Add/Override data to local storage
*
* #params String key
* #params Array/Json data
* #params Function callback
*
* #return Boolean/Function
*/
this.insert = function(key, data, callback) {
localStorage.setItem(key, data);
if( callback != undefined ) {
callback();
} else {
return true;
}
}
/**
* Update data of local storage
* This function generally used to data which is already exist and need to update
*
* #params String key
* #params Array/Json data
* #params Function callback
*
* #return Boolean/Function
*/
this.update = function(key, data, callback) {
var self = this;
self.view(key, function(localData) {//callback function
if( localData != undefined && localData != null ) {
//already some data exist on this key So need to update it
data = localData.push(data);
}
//just handover to insert
if( callback !== undefined ) {
self.insert(key, data, callback);
} else {
return self.insert(key, data);
}
});
}
/**
* Remove data from local storage on basis of key
*
* #params String key
* #return Boolean
*/
this.remove = function(key, callback) {
localStorage.removeItem(key);
if( callback !== undefined ) {
callback();
} else {
return true;
}
}
/**
* Get key data of local storage
* #param String key
*
* #return Array data WHEN all data OR
* #return String data WHEN key value
*/
this.get = function(key, callback) {
var key = key || "";
var data = [];
if( key == "" ) {
//get all data
for(var i in localStorage) {
data.push(JSON.parse(localStorage[i]));
}
} else {
//get one key data
data = localStorage.getItem(key);
}
if(callback != undefined) {
callback(data);
} else {
return data;
}
}
/**
* sinsert
* Add/Override data to session storage
*
* #params String key
* #params Array/Json data
* #params Function callback
*
* #return Boolean/Function
*/
this.sinsert = function(key, data, callback) {
var key = this.encode(key);
sessionStorage.setItem(key, data);
if( callback != undefined ) {
callback();
} else {
return true;
}
}
/**
* supdate
* Update data of session storage
* This function generally used to data which is already exist and need to update
*
* #params String key
* #params Array/Json data
* #params Function callback
*
* #return Boolean/Function
*/
this.supdate = function(key, data, callback) {
var self = this;
self.view(key, function(localData) {//callback function
if( localData != undefined && localData != null ) {
//already some data exist on this key So need to update it
data = localData.push(data);
}
//just handover to insert
if( callback !== undefined ) {
self.insert(key, data, callback);
} else {
return self.insert(key, data);
}
});
}
/**
* sremove
* Remove data from session storage on basis of key
*
* #params String key
* #return Boolean
*/
this.sremove = function(key, callback) {
var key = this.encode(key);
sessionStorage.removeItem(key);
if( callback !== undefined ) {
callback();
} else {
return true;
}
}
/**
* get
* Get key data of session storage
* #param String key
*
* #return Array data WHEN all data OR
* #return String data WHEN key value
*/
this.sget = function(key, callback) {
var key = key || "";
var data = [];
if( key == "" ) {
//get all data
for(var i in sessionStorage) {
data.push(JSON.parse(sessionStorage[i]));
}
} else {
//get one key data
key = this.encode(key);
data = sessionStorage.getItem(key);
}
if(callback != undefined) {
callback(data);
} else {
return data;
}
}
/**
* encode
* encode give string using javascript
*
* #param String str
* #return String
*/
this.encode = function(str) {
return btoa(str);
}
/**
* decode
* decode give string using javascript
*
* #param String str
* #return String
*/
this.decode = function(str) {
return atob(str);
}
return this;
}]).config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('customHttpInterceptor');
}]);
})();
How to use it::
Include this module in you project....
Then use "httpService" always for http requests all for API calls...
We need to pass config object to this service tell about API call and what should do with it....You can find details about config in code itself...
So how to use in controller..
module.controller('nameofController', ['httpService', function(httpService) {
httpService({
url: 'Your API url',
method: 'GET',
mask: {
save : true, //tell that save request response in session
fetch : true, //check local data first before next fetch,
fetchSource : tell about perticular source of data DEFAULT WILL BE sessionStorage OPTIONS are session and local
}
}).then(function(data) {
// promise is all same as $http
console.log(data);
});
}]);
Hope this will help... You can go with very simple solution as well to just mark
{cache: true}
...
But this solution is completely customized and under all controls
Original code which has used in production is at gist
My application currently uses webpack,angular js, and a service worker.
Using sw-precache plugin to create my service worker.
https://www.npmjs.com/package/sw-precache-webpack-plugin
The service worker caching is going well and I can see my static resources being fetched from serviceworker.js from chrome dev tools.
Now when I run the lighthouse report I am getting the following error still :
URL responds with a 200 when offline
https://github.com/GoogleChrome/lighthouse
In Dev tools when I switch on offline, I can actually see my page load. Some errors in console for some 3rd party scripts failing. Is this the reason for not getting url response 200 because I have some console errors from 3rd party i.e. sample error :
GET https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700 net::ERR_INTERNET_DISCONNECTED
What exactly is this audit looking for, and how can I achieve it ?
Edit : I added a picture of my network tab when I turn on offline, as I said the page loads fine. I notice my sw.js get's loaded from disk cache which I don't notice on other sites so could be something there.
Also here is sw.js content
'use strict';
var precacheConfig = [["/css/app.styles.77e2a0c3e7ac001193566741984a07f0.css","77e2a0c3e7ac001193566741984a07f0"],["/css/vendor.styles.582e79ead0684a8fb648ce9e543ad810.css","582e79ead0684a8fb648ce9e543ad810"],["/favicon.ico","70ef569d9a12f6873e86ed57d575cf13"],["/fonts/MaterialIcons-Regular.eot","e79bfd88537def476913f3ed52f4f4b3"],["/fonts/MaterialIcons-Regular.svg","a1adea65594c502f9d9428f13ae210e1"],["/fonts/MaterialIcons-Regular.ttf","a37b0c01c0baf1888ca812cc0508f6e2"],["/fonts/MaterialIcons-Regular.woff","012cf6a10129e2275d79d6adac7f3b02"],["/fonts/MaterialIcons-Regular.woff2","570eb83859dc23dd0eec423a49e147fe"],["/icons/launcher-icon-2x.png","91896b953c39df7c40b4772100971220"],["/icons/launcher-icon-3x.png","0aee2add7f56559aeae9555e495c3881"],["/icons/launcher-icon-4x.png","b164109dd7640b14aaf076d55a0a637b"],["/images/aa_logo_only.png","b5b46a8c2ead9846df1f1d3035634310"],["/images/developer.png","e8df747b292fe6f5eb2403c7180c31da"],["/images/facebook.png","8ab42157d0974099a72e151c23073022"],["/images/home-bg.jpeg","0a0f7da8574b037463af2f1205801e56"],["/images/logo.png","e8712312e08ca427d79a9bf34aedd6fc"],["/images/map.png","af3443ef4ab2890cae371c7a3de437ed"],["/images/pattern.png","114d593511446b9a4c6e340f7fef5c84"],["/images/twitter.png","99da44949cd33e16d2d551d42559eaf2"],["/index.html","1e9b5c4b3abba7e13d8d28c98cfb3bb5"],["/js/app.d9ada27616bf469d794d.js","8e2fc74de7d5c122ab8f0aca7e31b075"],["/js/vendor.d9ada27616bf469d794d.js","3bbba4569b6f3b88881b0533260905fe"],["/manifest.json","4bea29155995b63a9f2855637c0fe74c"]];
var cacheName = 'sw-precache-v2-45-' + (self.registration ? self.registration.scope : '');
var ignoreUrlParametersMatching = [/^utm_/];
var addDirectoryIndex = function (originalUrl, index) {
var url = new URL(originalUrl);
if (url.pathname.slice(-1) === '/') {
url.pathname += index;
}
return url.toString();
};
var createCacheKey = function (originalUrl, paramName, paramValue,
dontCacheBustUrlsMatching) {
// Create a new URL object to avoid modifying originalUrl.
var url = new URL(originalUrl);
// If dontCacheBustUrlsMatching is not set, or if we don't have a match,
// then add in the extra cache-busting URL parameter.
if (!dontCacheBustUrlsMatching ||
!(url.toString().match(dontCacheBustUrlsMatching))) {
url.search += (url.search ? '&' : '') +
encodeURIComponent(paramName) + '=' + encodeURIComponent(paramValue);
}
return url.toString();
};
var isPathWhitelisted = function (whitelist, absoluteUrlString) {
// If the whitelist is empty, then consider all URLs to be whitelisted.
if (whitelist.length === 0) {
return true;
}
// Otherwise compare each path regex to the path of the URL passed in.
var path = (new URL(absoluteUrlString)).pathname;
return whitelist.some(function(whitelistedPathRegex) {
return path.match(whitelistedPathRegex);
});
};
var stripIgnoredUrlParameters = function (originalUrl,
ignoreUrlParametersMatching) {
var url = new URL(originalUrl);
url.search = url.search.slice(1) // Exclude initial '?'
.split('&') // Split into an array of 'key=value' strings
.map(function(kv) {
return kv.split('='); // Split each 'key=value' string into a [key, value] array
})
.filter(function(kv) {
return ignoreUrlParametersMatching.every(function(ignoredRegex) {
return !ignoredRegex.test(kv[0]); // Return true iff the key doesn't match any of the regexes.
});
})
.map(function(kv) {
return kv.join('='); // Join each [key, value] array into a 'key=value' string
})
.join('&'); // Join the array of 'key=value' strings into a string with '&' in between each
return url.toString();
};
var hashParamName = '_sw-precache';
var urlsToCacheKeys = new Map(
precacheConfig.map(function(item) {
var relativeUrl = item[0];
var hash = item[1];
var absoluteUrl = new URL(relativeUrl, self.location);
var cacheKey = createCacheKey(absoluteUrl, hashParamName, hash, false);
return [absoluteUrl.toString(), cacheKey];
})
);
function setOfCachedUrls(cache) {
return cache.keys().then(function(requests) {
return requests.map(function(request) {
return request.url;
});
}).then(function(urls) {
return new Set(urls);
});
}
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return setOfCachedUrls(cache).then(function(cachedUrls) {
return Promise.all(
Array.from(urlsToCacheKeys.values()).map(function(cacheKey) {
// If we don't have a key matching url in the cache already, add it.
if (!cachedUrls.has(cacheKey)) {
return cache.add(new Request(cacheKey, {credentials: 'same-origin'}));
}
})
);
});
}).then(function() {
// Force the SW to transition from installing -> active state
return self.skipWaiting();
})
);
});
self.addEventListener('activate', function(event) {
var setOfExpectedUrls = new Set(urlsToCacheKeys.values());
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.keys().then(function(existingRequests) {
return Promise.all(
existingRequests.map(function(existingRequest) {
if (!setOfExpectedUrls.has(existingRequest.url)) {
return cache.delete(existingRequest);
}
})
);
});
}).then(function() {
return self.clients.claim();
})
);
});
self.addEventListener('fetch', function(event) {
if (event.request.method === 'GET') {
// Should we call event.respondWith() inside this fetch event handler?
// This needs to be determined synchronously, which will give other fetch
// handlers a chance to handle the request if need be.
var shouldRespond;
// First, remove all the ignored parameter and see if we have that URL
// in our cache. If so, great! shouldRespond will be true.
var url = stripIgnoredUrlParameters(event.request.url, ignoreUrlParametersMatching);
shouldRespond = urlsToCacheKeys.has(url);
// If shouldRespond is false, check again, this time with 'index.html'
// (or whatever the directoryIndex option is set to) at the end.
var directoryIndex = 'index.html';
if (!shouldRespond && directoryIndex) {
url = addDirectoryIndex(url, directoryIndex);
shouldRespond = urlsToCacheKeys.has(url);
}
// If shouldRespond is still false, check to see if this is a navigation
// request, and if so, whether the URL matches navigateFallbackWhitelist.
var navigateFallback = '';
if (!shouldRespond &&
navigateFallback &&
(event.request.mode === 'navigate') &&
isPathWhitelisted([], event.request.url)) {
url = new URL(navigateFallback, self.location).toString();
shouldRespond = urlsToCacheKeys.has(url);
}
// If shouldRespond was set to true at any point, then call
// event.respondWith(), using the appropriate cache key.
if (shouldRespond) {
event.respondWith(
caches.open(cacheName).then(function(cache) {
return cache.match(urlsToCacheKeys.get(url)).then(function(response) {
if (response) {
return response;
}
throw Error('The cached response that was expected is missing.');
});
}).catch(function(e) {
// Fall back to just fetch()ing the request if some unexpected error
// prevented the cached response from being valid.
console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e);
return fetch(event.request);
})
);
}
}
});
Some data like
https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700
does not support offline mode download these file manually and add them with local path again.
I have the following function in my Angular-app
$scope.retrieveProjectData = function() {
$scope.projectNumberNoChange = false;
// Only retrieve Data if the ProjectNumber changed
if (currentlySelectedProjectNumber != $scope.feedback.projectNumber.content) {
currentlySelectedProjectNumber = $scope.feedback.projectNumber.content;
// Go to database-reference based on the projectNumber
var projectsRef = firebaseDatabaseRef.child("projects");
var currentChild = projectsRef.child(currentlySelectedProjectNumber);
// retrieve data once and fill $scope.feedback
currentChild.once("value",
// If the project is found
function (dataSnapshot) {
// Fill selectedProject and hand over to writeDataFromSelectedProject()
var selectedProject = dataSnapshot.val();
// Fill $scope.feedback
writeDataFromSelectedProject(selectedProject);
},
// If no data is found
function () {
console.log("No data found");
});
}
// If the projectNumber didn't change, the projectNumberNoChangeMessage will be shown
else {
$scope.projectNumberNoChange = true;
}
};
The user has the possibility to load some data regarding his project-number (for instance: Name, email, tel) to make it faster for the user to fill a form.
In the part:
currentChild.once("value",
// If the project is found
function (dataSnapshot) {
// Fill selectedProject and hand over to writeDataFromSelectedProject()
var selectedProject = dataSnapshot.val();
// Fill $scope.feedback
writeDataFromSelectedProject(selectedProject);
},
// If no data is found
function () {
console.log("No data found");
});
only the first Callback-function is called, even if the projectNumber was not found. How can I use the "failureCallbackOrContext" as described in the docs?
Thanks for taking the time!
The problem was solved. I just checked the dataSnapshot.val() for beeing an object or null!
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
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()"
}
}
}
}
}
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.
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
});
Ok, so I'm working with AngularJS and Firebase and trying to create a simple exchange between two users. Right now my data structure is set up under "users/uId/" and then their email, date they joined, and gold.
Under gold (users/uId/gold) I have "sent" which captures the amount, time and to whom (email). This is the code snippet below. It also updates their total gold.
Now I'm stuck updating the person they're sending the gold to. I capture the email address, but everything under scope relates to the current logged in user. How would I update the new users users/uId/gold/received with the amount, time and email who it was from, along with updating their total gold?
I feel like I might be going about this the wrong way, any help would be appreciated, thanks!
ledger.controller('TransferController', function (
$scope, $firebase, $routeParams, $location, $rootScope, FIREBASE_URL) {
$scope.whichuser = $routeParams.uId;
$scope.goldsends = goldsendList;
var ref = new Firebase(FIREBASE_URL + '/users/' + $scope.whichuser + '/gold/' + '/sent/');
var hopperRef = new Firebase(FIREBASE_URL + '/users/' + $scope.whichuser + '/gold/');
var usersRef = ref.child("users");
var goldsendList = $firebase(ref).$asArray();
$scope.sendGold = function () {
var sendgoldObj = $firebase(ref); //this var has to match the sendgoldObj.$push var down below, and that's it
var myData = {
amount: $scope.user.amount,
email: $scope.user.email,
date: Firebase.ServerValue.TIMESTAMP
};
sendgoldObj.$push(myData).then(function () {
// $location.path('/myledger/'); //page redirect
}); //data sent to firebase.
if ($scope.currentUser.gold.total - Math.abs($scope.user.amount) > 0) { //
var hopperRefff = hopperRef.child("gold");
hopperRef.update({
"total": $scope.currentUser.gold.total - $scope.user.amount
}); //update total gold
var receive = new Firebase(FIREBASE_URL);
ref.child('users').orderByChild('email').equalTo(emailAddress).once('value', function (snap) {
console.log(snap.name() + (snap.val() === null ? ' DOES NOT' : ' does') + ' exist');
}); //trying to find user to send gold to
} //if user has enough gold statement
else {
return {
scope: {
errormessage: 'You don\'t have enough money',
}
};
console.log("not enough money!");
} //else note enough gold statement
} //sendgold
}); //TransferController
You could store the users by email where the # is replaced by _ and a . is replaced with -
So you have a JSON structure like this in Firebase
users: {
"bob_hoskins-com": {
email: "bob#hoskins.com",
date: "09-09-1999",
gold: {
...
}
}
}
However, I don't think this is a great approach for this problem.
I would create a node service that is observing a requests Firebase location on each user for added children. The node service will then do the calculations and write the data to the correct paths, then can delete the request once processed.
So you would have rules on your Firebase like this
{
"rules": {
"$userId": {
"requests": {
".read": "auth != null && $userId == auth.id",
".write": "auth != null && $userId == auth.id"
},
"responses": {
".read": "auth != null && $userId == auth.id",
".write": "auth != null && $userId == auth.id"
}
}
}
Here is some request code
var Firebase = require('firebase');
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
function guid() {
return s4() + s4() + s4() + s4();
}
var _ref = new Firebase('https://YOUR_FIREBASE.firebaseio.com/');
//Log me in
var guid = guid();
var FirebaseTokenGenerator = require("firebase-token-generator");
var tokenGenerator = new FirebaseTokenGenerator("YOUR_TOKEN");
var TOKEN = tokenGenerator.createToken({uid: guid, user: "node server"},{admin: true});
_ref.authWithCustomToken(TOKEN, function (error) {
if(error) {
console.log("Login Failed!", error);
} else {
console.log("Login Succeeded!", guid);
}
});
_ref.on('child_added', function (user) {
var requests = user.ref().child('requests');
requests.on('child_added', function(req) {
handleRequest(req);
});
});
var handleRequest = function (request) {
// Process the request
// Write stuff back to Firebase
// Delete the request
request.ref().remove();
};
Setting a value to the user is just a variation of checking if that user exists. Once you have a snapshot, you can get back to a ref by calling ref
ref.child('users').orderByChild('email').equalTo(emailAddress).once('value', function (snap) {
snap.ref().update({ "total": snap.val().total + amount });
});
Not that this is just a sample, so you'll probably have to update it for your actual data structure.
Update
The above will get you the value of the users node.
You either need to capture the once('child_added' or forEach over the on('value'. I'll give an example of both.
Listening to child_added:
ref.child('users').orderByChild('email').equalTo(emailAddress).once('child_added', function (snap) {
snap.ref().update({ "total": snap.val().total + amount });
});
An example of looping over the value:
ref.child('users').orderByChild('email').equalTo(emailAddress).once('value', function (snap) {
snap.forEach(function(childsnap) {
childsnap.ref().update({ "total": snap.val().total + amount });
});
Here's a jsbin with both samples: http://jsbin.com/fenavu/1/edit?js,console. Note that the code here writes out the ref.toString(), which gives you the full URL of the node (since every piece of data in Firebase has its own unique URL). That can be a handy way to figure out what URL your node maps to.