https://github.com/sysix/broadcast-single-worker
Create a single worker for multiple browser tabs
https://github.com/sysix/broadcast-single-worker
Last synced: 5 months ago
JSON representation
Create a single worker for multiple browser tabs
- Host: GitHub
- URL: https://github.com/sysix/broadcast-single-worker
- Owner: Sysix
- License: mit
- Created: 2024-06-15T21:47:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-17T20:21:32.000Z (about 2 years ago)
- Last Synced: 2025-12-01T06:53:39.510Z (7 months ago)
- Language: TypeScript
- Size: 104 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# broadcast-single-worker
[](https://www.npmjs.com/package/@sysix/broadcast-single-worker)
[](https://www.npmjs.com/package/@sysix/broadcast-single-worker)
## Setup
Install with npm:
`npm install @sysix/broadcast-single-worker`
Use it in your code:
```typescript
import BroadcastSingleWorker from '@sysix/broadcast-single-worker';
const worker = new BroadcastSingleWorker('channel_name');
worker.addListener('start-worker', () => {
// this code will only be executed for a single tab
});
worker.addListener('stop-worker', () => {
// maybe you need to reset some listeners or timeouts
});
// connect to worker to the channel, other browser tab will be notified
// this will trigger start-worker event for the current tab
// this will trigger stop-worker event for the other tab with has the main worker
worker.connect();
// when you no longer want to listen for other tabs
// this will also tell other tabs that maybe they need to be the main worker
worker.disconnect();
```
## Why?
One of my projects needs to poll from the server in a small interval.
When multiple tabs are connected to the server, then every tab starts a request after the interval is reached.
This library makes it possible to reduce server requests with this following example:
```typescript
import BroadcastSingleWorker from '@sysix/broadcast-single-worker';
const worker = new BroadcastSingleWorker('channel_name');
const UIChannel = new BroadcastChannel('channel_name_ui');
let intervalId: number | undefined;
const updateUi = (json: unknown) => {
document.body.innerText = JSON.stringify(json);
}
worker.addListener('start-worker', () => {
intervalId = window.setInterval(async () => {
const response = await window.fetch('https://host/poll-ui-changes');
const json = await response.json();
updateUi(json);
UIChannel.postMessage(json);
}, 30000);
});
worker.addListener('stop-worker', () => {
if (intervalId) {
window.clearInterval(intervalId);
}
});
UIChannel.onmessage = (message: MessageEvent) => {
updateUi(message.data);
}
worker.connect();
```