#publish-subscribe

If the below code blocks do not show up properly due to a recent Tumblr change. View them directly at https://obscurejavascript.tumblr.com/

This is useful when using a Publisher/Subscriber pattern or similar. Which is useful for making 2 parts of code communicate when one is loaded before another (e.g. they are both loaded asynchronously). Additionally, those 2 parts of code only need to know about the central element and not each other making it easier to modify one without affecting the other. Firstly, here is a very simple example:

class Mailbox { subscriber = null; register(subscriber) { this.subscriber = subscriber; } publish(message) { if (typeof this.subscriber === 'function') { this.subscriber(message); } } } const mailbox = new Mailbox(); // Keep on publishing messages let number = 1; setInterval(() => { number += 1; mailbox.publish(`Test Message: ${number}`); }, 500) mailbox.register((message) => { console.log('message:', message); }); // message: Test Message: 2 // message: Test Message: 3 // message: Test Message: 4 // and so on...

Notice how the first message was not printed ("Test Message: 1") since the subscriber was not yet available. Which is to simulate when a publisher starts before a subscriber. To handle this a specific function call check needs to be made for subscriber existence. Instead, the original subscriber value could be set to a function. But then it would be hard to determine when a subscriber was set externally to the Mailbox.

Anyways, if optional chaining is supported in your environment, the call can be simplified:

publish(message) { this.subscriber?.(message); }

Optional chaining is currently supported in Chrome, Firefox and a few other environments but not Node.js. Since this is becoming part of the JavaScript standard, it should be in all environments relatively soon.

The Publish/Subscribe pattern is one of the most used patterns in software, especially in User Interfaces with JavaScript. It is used whenever 2 pieces of a system need to communicate, but cannot or should not communicate directly. For example, a system receives data from a server at regular intervals that a bunch of components can use (which are added while the system runs):

var Publisher = function() { var self = { subscribers: [] }; self.subscribe = function(callback) { self.subscribers.push(callback); }; self.publish = function(data) { self.subscribers.forEach(function(callback) { callback(data); }); }; return self; } var publisher = Publisher(); // Simulate a set of data being returned over time var serverStream = function(callback) { Array.apply(null, { length: 5 }).forEach(function(unused, index) { var ms = index * 500 setTimeout(function() { callback('data-piece: ' + ms + ' ms'); }, ms); }); }; serverStream(publisher.publish); // Simulate components being registered over time. publisher.subscribe(function(data) { console.info('subscribe from part 1', data); }); setTimeout(function() { publisher.subscribe(function(data) { console.info('subscribe from part 2', data); }); }, 1000) // subscribe from part 1 data-piece: 0 ms // subscribe from part 1 data-piece: 500 ms // subscribe from part 1 data-piece: 1000 ms // subscribe from part 1 data-piece: 1500 ms // subscribe from part 2 data-piece: 1500 ms // subscribe from part 1 data-piece: 2000 ms // subscribe from part 2 data-piece: 2000 ms

The problem is that same pattern with almost identical code will be written over and over again in the same project. So instead of creating a publisher and subscriber with multiple message types each time this pattern needs to be used, it is simpler to just use new instances of the publisher object each time:

var messageSet1 = function(callback) { Array.apply(null, { length: 3 }).forEach(function(unused, index) { setTimeout(function() { callback('Hello ' + index); }, index * 500); }); }; var messageSet2 = function(callback) { Array.apply(null, { length: 3 }).forEach(function(unused, index) { setTimeout(function() { callback('World ' + index); }, index * 500); }); }; var MessageBox = function() { var self = { publishers: [] }; self.streams = function(streams) { self.publishers = []; streams.forEach(function(stream, index) { self.publishers.push(Publisher()); stream(self.publishers[index].publish); }); }; self.subscribeTo = function(index, callback) { return self.publishers[index].subscribe(callback); } return self; }; var messageBox = MessageBox(); // Use a trivial example to preserve clarity messageBox.streams([messageSet1, messageSet2]); messageBox.subscribeTo(0, function(data) { console.info('subscribe from part 1B', data); }); messageBox.subscribeTo(1, function(data) { console.info('subscribe from part 2B', data); }); // subscribe from part 1B Hello 0 // subscribe from part 2B World 0 // subscribe from part 1B Hello 1 // subscribe from part 2B World 1 // subscribe from part 1B Hello 2 // subscribe from part 2B World 2

A non-index based naming scheme could be introduced by passing more data into the streams call, but I wanted to keep the example as minimal as possible.

NATS by Apcera.

Unlike traditional enterprise messaging systems, NATS has an always-on dial tone that does whatever it takes to remain available. This forms a great base for building modern, reliable, and scalable cloud and distributed systems.

Fixed Watch multiple $scope attributes #dev #it #asnwer

Watch multiple $scope attributes

Is there a way to subscribe to events on multiple objects using $watch

E.g.

$scope.$watch('item1, item2', function () { });

Answer: Watch multiple $scope attributes

Starting from AngularJS 1.3 there’s a new method called $watchGroup for observing a set of expressions.

$scope.foo = 'foo'; $scope.bar = 'bar'; $scope.$watchGroup(['foo', 'bar'], function(newValues,…

How to: Watch multiple $scope attributes

Watch multiple $scope attributes

Is there a way to subscribe to events on multiple objects using $watch

E.g.

$scope.$watch('item1, item2', function () { });

Answer: Watch multiple $scope attributes

$watch first parameter can also be a function.

$scope.$watch(function watchBothItems() { return itemsCombinedValue(); }, function whenItemsChange() { //stuff });

If your two combined values are…