With this client technology, you can exchange messages between browser tabs. This is a bus network among browser tabs, inter-process communication mechanism between browser tabs. This technology allows to create a chat between browser tabs. It allows create features to optimize the performance of high-demand applications, decrease amount of http requests or socket connections. It also allows synchronize changes in different browser tabs.

This technology supports two transport type connections. The messages can be transferred through a storage or through a JavaScript worker. Transport technology can be chosen automatically.

npm install @lopatnov/browser-tab-ipc

Browser

<script src="https://lopatnov.github.io/browser-tab-ipc/dist/library.min.js"></script>

<!-- Example: how to use in browser -->
<script>
  //...
  var BrowserTabIPC = browserTabIpc.BrowserTabIPC;
  ipc = new BrowserTabIPC();
  ipc.message(function (message) {
    console.log(message);
  });
  ipc
    .connect({
      sharedWorkerUri: '//lopatnov.github.io/browser-tab-ipc/dist/ipc-worker.js', // Please copy this file `dist/ipc-worker.js` to your project and replace this url
    })
    .then(function (state) {
      console.log(state);
    });
  var id = Math.trunc(Math.random() * 10000);
  setInterval(() => {
    ipc.postMessage('Hello browser Tab! I am page with ID: ' + id);
  }, 200);
  //...
</script>

Copy ~/node_modules/@lopatnov/browser-tab-ipc/dist/ipc-worker.js file to your project to use Worker transport technology and avoid CORS issues. Provide the path to this file for Worker transport connection.

import {BrowserTabIPC, TransportType, ConnectionState} from '@lopatnov/browser-tab-ipc';

var library = require('@lopatnov/browser-tab-ipc');
var BrowserTabIPC = library.BrowserTabIPC;
var TransportType = library.TransportType;
var ConnectionState = library.ConnectionState;

Provides methods to connect/disconnect ipc technology using one of some possible transports and send a message through it.

This class extends from EventEmitter class and can use EventConnected, EventConnectionError, EventDisconnected, EventMessage events, however it's not obligatory.

import {EventConnected, EventConnectionError, EventDisconnected, EventMessage} from '@lopatnov/browser-tab-ipc';

ipc.on(EventConnected, (state) => {
  console.log('connected', state);
});

Creates an instance of BrowserTabIPC class.

• options?: IpcOptions Optional parameter options provides options to create a new instance.
  • transportTypes?: TransportType | TransportType[]; An enum value or array of enum TransportType. That's possible transports that IPC technology can use.

const ipc = new BrowserTabIPC({
  transportTypes: [TransportType.sharedWorker, TransportType.sessionStorage],
});

Connects BrowserTabIPC instance to a bus network among browser tabs using one of possible transport provided in constructor.

• options?: ConnectionOptions Optional parameter options provides connection options to IPC instance.
  • sharedWorkerUri?: string; Worker transport option. A link to IPC worker.
  • storageKey?: string; Storage transport option. A key, that IPC technology uses in local storage to identify IPC messages
  • storageExpiredTime?: number; Storage transport option. Timeout constant that technology uses to remove old messages

returns Promise<ConnectionState> a state of connection.

• type: TransportType | null; Used transport type
• connected: boolean; Is connected?
• error?: any; An error

BrowserTabIPC also have defaultWorkerUri static variable, that uses when sharedWorkerUri option wasn't provided.

const state = await ipc.connect({
  sharedWorkerUri: '//lopatnov.github.io/browser-tab-ipc/dist/ipc-worker.js',
  storageKey: 'ipc',
  storageExpiredTime: 30000,
});

Disconnects BrowserTabIPC instance.

returns Promise<ConnectionState> a state of connection.

ipc.disconnect();

Sends a message of any serializable type.

ipc.postMessage('Hello browser Tab!');

Adds a callback to EventConnected event.

ipc.connected(function (connectionState) {
  console.log('Connected. Current connection state is ', connectionState);
});

Adds a callback to EventConnectionError event.

ipc.connectionError(function (connectionState) {
  console.log('Connection error. Current connection state is ', connectionState);
});

Adds a callback to EventDisconnected event.

ipc.disconnected(function (connectionState) {
  console.log('Disconnected. Current connection state is ', connectionState);
});

Adds a callback to EventMessage event.

ipc.message(function (message) {
  console.log('Received a message: ', message);
});

I am Computer Software Engineer, individual entrepreneur. I develop software of various complexity for the web, desktop, mobile and embedded devices. I have expertise in web development using .NET, Angular and React frameworks, Microsoft and Google technologies, working with the North American and European markets through reseller companies by B2B business model. I was a part of development teams and worked independently with enterprise projects, digital technologies, fintech projects, real estate, barcode software and petroleum industry. I would like to note that I have not bad analytical skills. I'm improving my skills continuously and I have recommendations.

Open source software is just a hobby. I am making it just for fun. A small amount of help will be more significant for charitable foundations. I propose to pay attention to the various local funds in my country. I hope this will make someone's life better.

License Apache-2.0

Copyright 2022 Oleksandr Lopatnov