broadcast-channel

BroadcastChannel

A BroadcastChannel that works in old browsers, new browsers, WebWorkers and NodeJs

---

A BroadcastChannel allows simple communication between browsing contexts with the same origin or different NodeJs processes.

This implementation works with old browsers, new browsers, WebWorkers and NodeJs. You can use it to send messages between multiple browser-tabs, iframes, WebWorkers and NodeJs-processes.

This behaves similar to the BroadcastChannel-API which is currently not featured in all browsers.

Methods:

Depending in which environment this is used, a proper method is automatically selected to ensure it always works.

Method	Used in	Description
Native	Modern Browsers	If the browser supports the BroadcastChannel-API, this method will be used because it is the fastest
IndexedDB	Browsers with WebWorkers	If there is no native BroadcastChannel support, the IndexedDB method is used because it supports messaging between browser-tabs, iframes and WebWorkers
LocalStorage	Older Browsers	In older browsers that do not support IndexedDb, a localstorage-method is used
Sockets	NodeJs	In NodeJs the communication is handled by sockets that send each other messages

Usage

This API behaves similar to the javascript-standard.

npm install --save broadcast-channel

Create a channel in one tab/process and send a message.

const BroadcastChannel = require('broadcast-channel');
const channel = new BroadcastChannel('foobar');
channel.postMessage('I am not alone');

Create a channel with the same name in another tab/process and recieve messages.

const BroadcastChannel = require('broadcast-channel');
const channel = new BroadcastChannel('foobar');
channel.onmessage = msg => console.dir(msg);
// > 'I am not alone'

Close the channel if you do not need it anymore.

channel.close();

Set options when creating a channel (optional):

const options = {
    type: 'localstorage', // (optional) enforce a type, oneOf['native', 'idb', 'localstorage', 'node']
    webWorkerSupport: true; // (optional) set this to false if you know that your channel will never be used in a WebWorker (increases performance)
};
const channel = new BroadcastChannel('foobar', options);

Create a typed channel in typescript:

import BroadcastChannel from 'broadcast-channel';
declare type Message = {
  foo: string;
};
const channel: BroadcastChannel<Message> = new BroadcastChannel('foobar');
channel.postMessage({
  foo: 'bar'
});

What this is

This module is optimised for:

• low latency: When you postMessage on one channel, it should take as low as possible time until other channels recieve the message.
• lossless: When you send a message, it should be impossible that the message is lost before other channels recieved it
• low idle workload: During the time when no messages are send, there should be a low processor footprint.

What this is not

• This is not a polyfill. Do not set this module to window.BroadcastChannel. This implementation behaves similiar to the BroadcastChannel-Standard with these limitations:
  • You can only send data that can be JSON.stringify-ed.
  • While the offical API emits onmessage-events, this module directly emitts the data which was posted
• This is not a replacement for a message queue. If you use this in NodeJs and want send more than 50 messages per second, you should use proper IPC-Tooling

Browser Support

I have tested this in all browsers that I could find. For ie8 and ie9 you must transpile the code before you can use this. If you want to know if this works with your browser, open the demo page.

Thanks

Thanks to Hemanth.HM for the module name.