js-broadcast-channel

A lightweight TypeScript library for cross-tab communication using the BroadcastChannel API. This package provides a simple interface for sending and receiving messages between different browser tabs or windows.

Installation

npm install js-broadcast-channel

Features

🚀 Simple and intuitive API
📦 TypeScript support out of the box
🔄 Cross-tab communication
🎯 Message-specific callbacks
⚡ Lightweight with zero dependencies
🎭 Built-in message handlers and lifecycle hooks

Usage

Basic Usage

import { BroadcastJS } from 'js-broadcast-channel';
// Initialize BroadcastJS with a channel name
const broadcast = new BroadcastJS('my-channel');
// Send a message
broadcast.postMessage({
message: 'update-count',
data: { count: 42 }
});
// Listen for messages
broadcast.onMessage('update-count', (message) => {
console.log('Received count:', message.data.count);
});

API Reference

Constructor

new BroadcastJS(name: string, handlers?: BroadcastHandlers)

Handlers (Optional)

onBeforeSendMessage: Called before a message is sent
onAfterSendMessage: Called after a message is sent
onBeforePostMessage: Called before posting a message
onAfterPostMessage: Called after posting a message
onBeforeClose: Called before closing the channel
onAfterClose: Called after closing the channel
onError: Called when an error occurs

Methods

`postMessage(message: Message)`

Sends a message to all other tabs/windows listening on the same channel.

interface Message<T = unknown> {
message: string;
data: T;
}

`onMessage<T>(messageName: string, callback: (message: Message<T>) => void)`

Registers a callback for a specific message type.

`close()`

Closes the broadcast channel and cleans up resources.

`hasListeners(messageName: string)`

Checks if there are any listeners for a specific message.

`canBrowserSupportBroadcastJS()`

Checks if the browser supports the BroadcastChannel API.

`removeMessage(messageName: string)`

Removes a message listener.

Example with Handlers

const broadcast = new BroadcastJS('my-channel', {
onBeforeSendMessage: (message) => {
console.log('About to send:', message);
},
onAfterSendMessage: (message) => {
console.log('Message sent:', message);
},
onError: (message) => {
console.error('Error processing message:', message);
}
});

Browser Support

This package requires browser support for the BroadcastChannel API. Check Can I Use for browser compatibility.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC

Author

Alireza Valipour

Package detail