Skip to content

Latest commit

 

History

History
105 lines (69 loc) · 3.23 KB

README.md

File metadata and controls

105 lines (69 loc) · 3.23 KB
Raw

tab-emitter

Emit events between browser tabs! (Same-origin only.)

Build Status

tab-emitter is a client-side javascript module that allows you to send events between browser tabs/windows. The sending/recieving web pages must have the same origin. You can not emit events between browsers, only between the same browser.

tab-emitter is written to work with browserify. It should work with Rollup and Webpack too.

Demo

demo site

Example

client1.js

var TabEmitter = require('tab-emitter')
var emitter = TabEmitter()

setTimeout(() => {
	let data = { x: 'world' }
	emitter.emit('hello', data)
}, 5000)

emitter.on('hello', data => {
	console.log(data.x) // 'world'
})

client2.js

var TabEmitter = require('tab-emitter')
var emitter = TabEmitter()

emitter.on('hello', data => {
	console.log(data.x) // 'world'
})

Don't use browserify?

If you just want to use this module in the browser without dealing with browserify, here's how you can:

<script src="https://bundle.run/[email protected]"></script>
<script>
    var emitter = window.tabEmitter()
    
    emitter.on('event', () => {
        console.log('event just happened')
    })
    
    setTimeout(() => {
        emitter.emit('event')
    }, 5000)
</script>

API

var TabEmitter = require('tab-emitter')

var emitter = TabEmitter([key])

  • key is a key to uniquely identify an emitter across tabs. If the same key is used in multiple tabs, they can communicate with each other.
  • Returns emitter, which is an EventEmitter instance.

emitter.emit(eventName, [...args])

Emits an event to its own browser tab, as well as to other browser tabs of the same-origin.

  • eventName is a string. emitter.on will watch for this string.
  • You can have any number of args. They must be JSON serializable.

emitter.on(eventName, handler)

Watches for events on other browser tabs of the same-origin, as well as its own browser tab.

  • eventName is a string of the event name to watch for.
  • handler(...args) is a function that will be called every time the event with the given name is emitted.
    • ...args are the arguments passed to emitter.emit(eventName, ...args). The eventName is not included.

emitter.once, emitter.removeAllListeners, emitter.off, etc.

For more extended documentation, please look at the official EventEmitter documentation. Technically, EventEmitter is getting polyfilled by your choice of bundler. Likely with this module. But the API should be identical.

Install

With npm do:

npm install tab-emitter

License

MIT