mwc-browser

mwc-browser

Manager-Workers communication between browser tabs.

Features

✅ No dependencies

✅ Browser support

✅ Manager-Workers communication

✅ Can be used also for just messaging between tabs

Demo

Demo page

Installation

npm i mwc-browser

Usage

Create channel connection with mwcBrowser.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name');

Create channel connection with Channel constructor.

import { Channel } from 'mwc-browser';

const channelConnection = new Channel<string>('my-channel-name');

You can also pass optional options.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name', {
  pingTimer: 500, // The iterable time to make ping.
  zombiesTimer: 500, // The iterable time to search for zombie channel connections.
  managerTimer: 1000, // The iterable time to look for channel connection to be manager if possible.
  maxLife: 3000, // The max life time to decide if channel connection is zombie if not responded.
  isEmitMessageToSelf: false, // If you want to get the message you sent to your self from onMessage event.
});

Channel connection properties.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name');

channelConnection.id; // Channel connection UUID.
channelConnection.isManager; // If Channel connection is Manager.
channelConnection.numberOfConnections; // The number of current channel connections that connected to the same channel.

Send message to other channel connections or to your self.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name');

channelConnection.emitMessage('hi all :)');

Listen to channel connection events.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name');

channelConnection.onManager = (isManager: boolean): void => {
  // Do something by if you are manager or not...
};

channelConnection.onMessage = (message: string): void => {
  // Do something with the message...
};

Remove the channel connection if you don't need it anymore.

import { mwcBrowser } from 'mwc-browser';

const channelConnection = mwcBrowser<string>('my-channel-name');

// ...

channelConnection.destroy(); // Will cancel intervals, event listeners, etc.

License

MIT