BroadcastChannel Polyfill

Version: v0.1.0
Author: Jacques Deguest
Published: 2025-01-18
Revised: 2025-01-18
License: MIT

This polyfill is based on the work by Dmitry Zlygin: JSmith01/broadcastchannel-polyfill.

Description

A polyfill for the BroadcastChannel API, enabling cross-window communication in environments where the native BroadcastChannel is not supported. It uses localStorage for inter-tab communication and MessageChannel for intra-tab efficiency.

Installation

npm install broadcastchannel-polyfill

Or include the script directly in your HTML:

<script src="path/to/BroadcastChannel-polyfill.js"></script>

Usage

To use the polyfill:

var channel = new BroadcastChannel('my_channel');

// Send a message
channel.postMessage('Hello from another tab!');

// Listen for messages
channel.onmessage = function(event) {
    console.log('Received:', event.data);
};

// Optionally, handle message errors
channel.messageerror = function(error) {
    console.error('Error:', error);
};

// When done
channel.close();

Methods

addToQueue(value, [ttlMs])

• Description: Adds a message to the queue for broadcasting.

• Parameters:

  • value {*}: The message to broadcast.

  • ttlMs {number} [Optional, default=5000]: Time to live in milliseconds for the message.

• Throws: {Error} If ttlMs is not an integer.

processQueue([queue])

• Description: Processes the queue of messages, broadcasting unread messages.

• Parameters:

  • queue {Array} [Optional]: If not provided, it fetches from localStorage.

BroadcastChannel(channel)

• Description: Creates a new BroadcastChannel for cross-window communication.

• Parameters:

  • channel {string}: The name of the channel to communicate on.

• Throws: {Error} If no channel name is provided.

postMessage(message)

• Description: Posts a message to the channel.

• Parameters:

  • message {*}: The message to post.

• Throws: {InvalidStateError} If the channel is closed.

close()

• Description: Closes the channel and removes it from the active channels list.

EventTarget API Methods

• onmessage - Gets or sets the event handler for when messages are received.

• messageerror - Gets or sets the event handler for when an error occurs upon sending a message.

• addEventListener(type, listener, [useCapture]) - Adds an event listener to the channel. See MDN EventTarget.addEventListener.

• removeEventListener(type, listener, [useCapture]) - Removes an event listener from the channel.

• dispatchEvent(event) - Dispatches an event to this channel.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

This polyfill is heavily inspired by the work of Dmitry Zlygin on the original broadcastchannel-polyfill.

Note: This README is manually curated based on the provided JavaScript code. Remember to adjust paths, package names, and other specifics according to your project setup.