Skip to content

Instantly share code, notes, and snippets.

@learncodeacademy
Created July 29, 2015 02:54
Show Gist options
  • Save learncodeacademy/777349747d8382bfb722 to your computer and use it in GitHub Desktop.
Save learncodeacademy/777349747d8382bfb722 to your computer and use it in GitHub Desktop.
Basic Javascript PubSub Pattern
//events - a super-basic Javascript (publish subscribe) pattern
var events = {
events: {},
on: function (eventName, fn) {
this.events[eventName] = this.events[eventName] || [];
this.events[eventName].push(fn);
},
off: function(eventName, fn) {
if (this.events[eventName]) {
for (var i = 0; i < this.events[eventName].length; i++) {
if (this.events[eventName][i] === fn) {
this.events[eventName].splice(i, 1);
break;
}
};
}
},
emit: function (eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(function(fn) {
fn(data);
});
}
}
};
@akmur
Copy link

akmur commented Aug 29, 2015

Hello, what does exactly this bit do?

this.events[eventName] = this.events[eventName] || [];

If what it's doing is to check if the event already exist, why are we then pushing the function? What if it already exists? Thanks

@MrJadaml
Copy link

@alemur an event can have multiple listeners, and those listeners may run different functions when that event occurs. If the event already exists it's corresponding function will be added to the array of that list, otherwise it will create a new item in the events object. He is storing all of the functions to be run when that event occurs in an array. Then on emit when that event is triggered it will iterate though that array and run all of the functions belonging to that event.

Copy link

ghost commented Oct 6, 2015

This looks great! The only change I would make is removing the unnecessary semicolon at the end of the for loop (line 16).

@giladv
Copy link

giladv commented Jan 13, 2016

es2015 'yfied

//events - a super-basic Javascript (publish subscribe) pattern

class Event{

    constructor(){
        this.events = {};
    }

    on(eventName, fn) {

        this.events[eventName] = this.events[eventName] || [];
        this.events[eventName].push(fn);
    }

    off(eventName, fn) {

        if (this.events[eventName]) {
            for (var i = 0; i < this.events[eventName].length; i++) {
                if (this.events[eventName][i] === fn) {
                    this.events[eventName].splice(i, 1);
                    break;
                }
            };
        }
    }

    trigger(eventName, data) {

        if (this.events[eventName]) {
            this.events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

}

@asifhk78
Copy link

var events = (function() {

    var events = {};

    function on(eventName, fn) {
        events[eventName] = events[eventName] || [];
        events[eventName].push(fn);
    }

    function off(eventName, fn) {
        if (events[eventName]) {
            for (var i = 0; i < events[eventName].length; i++) {
                if( events[eventName][i] === fn ) {
                    events[eventName].splice(i, 1);
                    break;
                }
            }
        }
    }

    function emit(eventName, data) {
        if (events[eventName]) {
            events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

    return {
        on: on,
        off: off,
        emit: emit
    };

})();

@Skhmt
Copy link

Skhmt commented Jul 7, 2016

This fails if you have an event named 'toString' or 'hasOwnProperty' or 'valueOf' or other Object.prototype methods.

@eddiedane
Copy link

@akmur its kind of a shorter version to this

this.events[eventName] = (this.events[eventName] === undefined) ? [] : this.events[eventName]/* || []*/

@frufin
Copy link

frufin commented May 19, 2017

Pub/sub is a great pattern, but we often have to create publishers/listeners in opposite directions as we may expect replies.
Starting from another implementation, i added bidirectionalilty with silent, temporary reverse pub/sub, to avoid useless hard-coding :
https://github.com/frufin/js-bidirectional-pubsub

@golopot
Copy link

golopot commented May 26, 2017

This gist is exactly the same as event programming. What's the difference between publisher-subscriber and event programming?

@camilacanhete
Copy link

camilacanhete commented Jun 13, 2017

It's not good to compare functions on javascript. My callbacks were not being unsubscribed
A more safe way is to pass the caller object. Code below:

var events = {
                events: {},
		subscribe: function (eventName, object, callback) {
			this.events[eventName] = this.events[eventName] || [];
			this.events[eventName].push({object: object, callback: callback});
		},
		unsubscribe: function(eventName, object, callback) {
			if (this.events[eventName]) {
				for (var i = 0; i < this.events[eventName].length; i++) {
					if (this.events[eventName][i].object === object) {
					  this.events[eventName].splice(i, 1);
					  break;
					}
				};
			}
		},
		publish: function (eventName, data) {
			if (this.events[eventName]) {
				this.events[eventName].forEach(function(instance) {
					instance.callback(data);
				});
			}
		}
};

@robinpokorny
Copy link

Some time ago I was playing with pubsub, too. In the end, I used Set and Map from ES6 to avoid many pitfalls with objects and arrays.

For example, the code above allows multiple insertions of the same function but then only removes one instance. Set takes care of it, plus adding/removing is faster.

The problems with toString et al. can be avoided with Map.

Here is just the pubsub part (no named events):

// pubsub.js
module.exports = () => {
  const subscribers = new Set()

  const sub = (fn) => {
    subscribers.add(fn)

    return () => subscribers.delete(fn)
  }

  const pub = (data) => subscribers.forEach((fn) => fn(data))

  return Object.freeze({ pub, sub })
}

If you are interested, the code can be found here: https://github.com/robinpokorny/dead-simple

@DaniGithub
Copy link

My take on the pubsub pattern

// PubSub Pattern

let pubSub = {
  subscribers: new Map(),
  subscribe(name, fn) {
    if(typeof fn !== "function") 
      throw new Error("Second parameter must be a function");
    if(typeof name !== "string") 
      throw new Error("First parameter must be a string");
    
    if (!this.subscribers.has(name)) {
      this.subscribers.set(name, new Map());
    }
    if(fn.name === '') {
      throw new Error('Function cannot be annonymous')
    } else {
      this.subscribers.get(name).set(fn.name, fn)
    }
  },
  unsubscribe(name, fnName) {
    if(this.subscribers.has(name)) {
      if(this.subscribers.get(name).get(fnName)) {
        this.subscribers.get(name).delete(fnName);
        this.subscribers.get(name).size === 0 ? this.subscribers.delete(name) : null;
      } else {
        throw new Error(`Subscriber "${fnName}" not found`);
      }
    } else {
      throw new Error(`Publisher "${name}" not found`)
    }
  },
  publish(name) {
    if(this.subscribers.has(name)) {
      this.subscribers.get(name).forEach(fn => fn());
    } else {
      throw new Error(`Publisher "${name}" not found`)
    }
  }
};

pubSub.subscribe('activate', sayHi = () => {console.log('hi')});
pubSub.subscribe('activate', sayWorld = () => {console.log('world')});
pubSub.subscribe('activate', sayHeizenberg = () => {console.log('Heizenberg')});

pubSub.publish('activate')

@iskandarovBakshi
Copy link

Skhmt try events: Object.create( null )

@aki-anz
Copy link

aki-anz commented Oct 2, 2020

var events = (function() {

    var events = {};

    function on(eventName, fn) {
        events[eventName] = events[eventName] || [];
        events[eventName].push(fn);
    }

    function off(eventName, fn) {
        if (events[eventName]) {
            for (var i = 0; i < events[eventName].length; i++) {
                if( events[eventName][i] === fn ) {
                    events[eventName].splice(i, 1);
                    break;
                }
            }
        }
    }

    function emit(eventName, data) {
        if (events[eventName]) {
            events[eventName].forEach(function(fn) {
                fn(data);
            });
        }
    }

    return {
        on: on,
        off: off,
        emit: emit
    };

})();

That’s iife

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment