Throttling PubNub requests in AngluarJS - angularjs

Question

I came across this article by Brian Ford which talks about throttling Socket.io requests to help with digests in a large app - http://briantford.com/blog/huuuuuge-angular-apps.html
I recently built a Factory to support PUBNUB's JS API and am having difficulties implementing a throttle in JS to prevent an apply/digest from hapenning every time a message is received. Here is a working Plunkr of the Factory in action - http://plnkr.co/edit/0w6dWQ4lcqTtdxbOa1EL?p=preview
I think the main issue i'm having is understanding how Brian's example does it with regards to Socket.io's syntax, and how that can apply to the way PubNub handles message callbacks.
Thanks!

Answer 1

PubNub Rate Limiting vs. Throttling Messages in AngularJS
Before diving into the solution, we'd want to talk about to variations of potential desirable characteristics or behavior of rate limiting and throttling. To start you may need to limit the rate the frequency at which the UI is updated, or when a function() is invoked.
If you want to skip to the plunker source code: http://plnkr.co/edit/Kv698u?p=preview
The behavior of rate limiting will demonstrate a max Message Per Second with an evenly distributed delay between each event triggered by the rate at which messages arrive. Rather than triggering all events by the rate messages arrive in the pipe, you can rate limit your recognition of the message and evenly spread the event triggering over X milliseconds.
However the behavior of throttling is different from rate limiting where intentional dropping of messages occurs only using the most recent message received instead. Throttling is one step further from the rate limiting method and altogether excludes messages that are recognized by tossing each message away and leaving only the most recent available to be processed at a set interval.
There is also the concept of capping which, over a timespan, would only allow x messages to arrive and then pause events until timespan complete. Capping is not the same as rate limiting or throttling where the rate at which messages receive is the same rate at which they are processed rather than evenly distributing each event over an interval. All messages are recognized (dropping after quota exceeded is optional).
Plunker JavaScript Source Editor for AngularJS
http://plnkr.co/edit/Kv698u?p=preview - Code View with AngularJS bindings.
Use Plunker to preview a working example!
PubNub Rate Limiting in AngularJS
This process requires a queue to receive and store all the messages until they are processed in a slow steady fashion. This method will not drop any messages, but instead slowly chew through each message at a set rate until all are processed regardless of the network receive rate.
//
// Listen for messages and process all messages at steady rate limit.
//
pubnub.subscribe({
channel : "hello_world",
message : limit( function(message) {
// process your messages at set interval here.
}, 500 /* milliseconds */ )
});
//
// Rate Limit Function
//
function limit( fun, rate ) {
var queue = [];
setInterval( function() {
var msg = queue.shift();
msg && fun(msg);
}, rate );
return function(message) { queue.push(message) };
}
Notice the function of interest is limit() and how it is used in the message response callback of the subscribe call.
PubNub Throttling in AngularJS
This is a process which only keeps the most recent message to be processed at a regular interval while purposefully dropping all older messages that are received in a certain window of time.
//
// Listen for events and process last message each 500ms.
//
pubnub.subscribe({
channel : "hello_world",
message : throttle( function(message) {
// process your last message here each 500ms.
}, 500 /* milliseconds */ )
});
//
// Throttle Function
//
function throttle( fun, rate ) {
var last;
setInterval( function() {
last !== null && fun(last);
last = null;
}, rate );
return function(message) { last = message };
}
The throttle() function will drop messages received in a certain window while processing always the last received message at a set interval.
Or Combine Both
//
// Listen for events and process last message each 500ms.
//
pubnub.subscribe({
channel : "hello_world",
message : thrimit( function( last_message, all_messages ) {
// process your last message here each 500ms.
}, 500 /* milliseconds */ )
});
//
// Throttle + Limit Function
//
function thrimit( fun, rate ) {
var last;
var queue = [];
setInterval( function() {
last !== null && fun( last, queue );
last = null;
queue = []
}, rate );
return function(message) {
last = message;
queue.push(message);
};
}