Simple event bus for your JavaScript application without any dependencies and with a low size footprint.
npm install --save eventing-bus
npm install --save-dev eventing-bus
Check out the lastest release. There you have three options:
event_bus.standalone-<version>.js
- I don't want to useEventStream
to create more than one bus. Global event bus is good enough. The most straightforward way. Use it if you're unsure what to choose.event_bus-<version>.js
- I want to use a globalEventBus
instance, but I want to includeEventStream
too.event_stream-<version>.js
- I want to use onlyEventStream
to create my own buses.
Possible configurations:
<script src="event_bus-<version>.standalone.js"></script>
<!-- Global Event Bus available in window.EventBus -->
<script src="event_bus-<version>.js"></script>
<script src="event_stream-<version>.js"></script>
<!-- Global Event Bus available in window.EventBus -->
<!-- EventStream factory method available in window.EventStream -->
<script src="event_stream-<version>.js"></script>
<!-- EventStream factory method available in window.EventStream -->
There are also minified versions with .min.js
at the end.
import EventBus from 'eventing-bus'
var callback = function(name) { console.log("Hello, " + name + "!"); };
EventBus.on("exampleEventName", callback);
import EventBus from 'eventing-bus';
EventBus.publish("exampleEventName", "Watson");
/* After registering the subscription and publishing an event you should see
"Hello, Watson!" printed in your console. */
By default you have only one, singleton event bus instance which holds subscriptions from all parts of your application. But nothing stands on your way to create your own, private instances (for example, for each logically distinct part of your complex app):
import EventStream from 'eventing-bus/lib/event_stream';
/* You can use EventStream both as a constructor and as a factory function. */
var privateBus = EventStream();
var newPrivateBus = new EventStream();
Those streams created by you won't share any subscriptions, nor events.
If your front-end produces few independent environments (e.g. we have 3
independent bundled JS files on our website), they won't share eventing-bus
with each other by default. However you can use eventing-bus
placed in
browser's window
by default.
import EventBus from 'eventing-bus/lib/window_event_stream';
// Now each time you import the `EventBus` like that, it will look for
// its instance in browser's `window`
Warning! It will throw error if window
is not reachable.
If you need to unregister a subscription (a typical case would be inside the React.js component), it is as easy as calling a return value of the #on
method as a function:
import EventBus from "eventing-bus";
var subscription = EventBus.on('event', function() {
// ...
});
// This will unregister this (and only this) subscription.
subscription();
Since by default EventBus
is a singleton instance of the bus, there may be occasions where you need to unregister all subscriptions (most notably - during testing as a afterEach
step). It can be done by calling unregisterAllCallbacks
method of an event bus:
import EventBus from "eventing-bus";
EventBus.unregisterAllCallbacks();
If you want to use this library on legacy browsers (IE <= 8 etc.), you need to
provide polyfills for Array.forEach
and Array.filter
functions. Check out e.g.
es5-shim to read more.
Feel free to report any issue or idea on the GitHub page of this project. We can't do open source so we can't grasp the typical fork process of doing things. If you report an issue, please try to provide reproducing steps or any piece of code that can reproduce the issue.
Oh, and you can ask us anything by writing an e-mail to us.