Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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

This comment has been minimized.

Copy link

MrJadaml commented Aug 31, 2015

@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.

@ghost

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

asifhk78 commented Apr 26, 2016

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

eddiedane commented Dec 11, 2016

@akmur its kind of a shorter version to this

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

@frufin

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

robinpokorny commented Nov 14, 2017

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

This comment has been minimized.

Copy link

DaniGithub commented Dec 21, 2017

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

This comment has been minimized.

Copy link

iskandarovBakshi commented Apr 9, 2018

Skhmt try events: Object.create( null )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.