@lopatnov/browser-tab-ipc

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.

Install

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>

Post Install

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 package to the project

TypeScript

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

JavaScript

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

API

class BrowserTabIPC

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);
});

constructor(options?: ConnectionOptions)

Creates an instance of BrowserTabIPC class.

• options?: ConnectionOptions Optional parameter options provides connection options to create a new instance.

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

connect(options?: ConnectionOptions): Promise<ConnectionState>

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

• options?: ConnectionOptions Optional parameter options extends connection options to IPC instance.
  • transportTypes?: TransportType | TransportType[]; An enum value or array of enum TransportType. That's possible transports that IPC technology can use.
  • 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,
});

disconnect(): Promise<ConnectionState>

Disconnects BrowserTabIPC instance.

returns Promise<ConnectionState> a state of connection.

ipc.disconnect();

postMessage(message: any): Promise<void>

Sends a message of any serializable type.

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

connected(callback: Action1<ConnectionState>)

Adds a callback to EventConnected event.

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

connectionError(callback: Action1<ConnectionState>)

Adds a callback to EventConnectionError event.

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

disconnected(callback: Action1<ConnectionState>)

Adds a callback to EventDisconnected event.

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

message(callback: Action1<any>)

Adds a callback to EventMessage event.

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

Troubleshooting

Module '"events"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

Edit tsconfig.json, set "allowSyntheticDefaultImports": true,

Donate

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 or to the volunteers in my country. I hope this will make someone's life better.

Rights and Agreements

Contact me in LinkedIn, I will consider profitable business offers. 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.

License Apache-2.0

Copyright 2022 Oleksandr Lopatnov