subpub.html
<html>
<head>
<meta charset="UTF-8">
<title>pubsub</title>
</head>
<body>
<script>
var pubsub = {};
(function(myObject) {
// Storage for topics that can be broadcast
// or listened to
var topics = {};
// An topic identifier
var subUid = -1;
// Publish or broadcast events of interest
// with a specific topic name and arguments
// such as the data to pass along
myObject.publish = function(topic, args) {
if (!topics[topic]) {
return false;
}
var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;
while (len--) {
subscribers[len].func(topic, args);
}
return this;
};
// Subscribe to events of interest
// with a specific topic name and a
// callback function, to be executed
// when the topic/event is observed
myObject.subscribe = function(topic, func) {
if (!topics[topic]) {
topics[topic] = [];
}
var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
};
// Unsubscribe from a specific
// topic, based on a tokenized reference
// to the subscription
myObject.unsubscribe = function(token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token === token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
};
}(pubsub));
</script>
<div id="container">
</div>
<script>
// usage:
var container = document.getElementById("container");
function log(msg) {
var p = document.createElement("p");
p.innerHTML = msg;
container.append(p);
}
pubsub.subscribe('login', function() {
log('reporting login event');
});
pubsub.subscribe('login', function() {
log('Sending welcome message');
});
log('Login handlers registered!');
setTimeout(function() {
pubsub.publish('login');
}, 1000);
log("Trigger login event in 1s");
</script>
</body>
</html>
