fallback broadcast channel

config/karma.conf.js

@@ -2,6 +2,7 @@ const configuration = {
     basePath: '',
     frameworks: [
         'mocha',
+        'sinon',
         'browserify',
         'detectBrowsers'
     ],
@@ -38,6 +39,7 @@ const configuration = {
     // Karma plugins loaded
     plugins: [
         'karma-mocha',
+        'karma-sinon',
         'karma-browserify',
         'karma-chrome-launcher',
         'karma-edge-launcher',

package.json

@@ -121,12 +121,14 @@
         "karma-mocha": "2.0.1",
         "karma-opera-launcher": "1.0.0",
         "karma-safari-launcher": "1.0.0",
+        "karma-sinon": "^1.0.5",
         "mocha": "10.4.0",
         "pre-commit": "1.2.2",
         "random-int": "3.0.0",
         "random-token": "0.0.8",
         "rimraf": "^5.0.7",
         "rollup": "4.18.0",
+        "sinon": "^19.0.2",
         "testcafe": "3.6.1",
         "ts-node": "10.9.2",
         "typescript": "5.4.5",

src/broadcast-channel.js

@@ -86,13 +86,13 @@ BroadcastChannel.prototype = {
         if (this.closed) {
             throw new Error(
                 'BroadcastChannel.postMessage(): ' +
-                    'Cannot post message after channel has closed ' +
-                    /**
-                     * In the past when this error appeared, it was realy hard to debug.
-                     * So now we log the msg together with the error so it at least
-                     * gives some clue about where in your application this happens.
-                     */
-                    JSON.stringify(msg)
+                'Cannot post message after channel has closed ' +
+                /**
+                 * In the past when this error appeared, it was realy hard to debug.
+                 * So now we log the msg together with the error so it at least
+                 * gives some clue about where in your application this happens.
+                 */
+                JSON.stringify(msg)
             );
         }
         return _post(this, 'message', msg);

src/index-umd.js

@@ -1,9 +1,11 @@
 import { BroadcastChannel } from './broadcast-channel';
+import { RedundantAdaptiveBroadcastChannel } from './redundant-adaptive-broadcast-channel';
 import { encode, decode, toBase64, fromBase64, toBuffer } from 'base64url';
 
 if (typeof window !== 'undefined') {
     window.broadcastChannelLib = {};
     window.broadcastChannelLib.BroadcastChannel = BroadcastChannel;
+    window.broadcastChannelLib.RedundantAdaptiveBroadcastChannel = RedundantAdaptiveBroadcastChannel;
     window.base64urlLib = {};
     window.base64urlLib.encode = encode;
     window.base64urlLib.decode = decode;

src/index.js

@@ -5,4 +5,5 @@ import * as ServerMethod from './methods/server';
 
 export { BroadcastChannel, enforceOptions, OPEN_BROADCAST_CHANNELS } from './broadcast-channel';
 export * from './method-chooser';
+export { RedundantAdaptiveBroadcastChannel } from './redundant-adaptive-broadcast-channel';
 export { NativeMethod, IndexedDbMethod, LocalstorageMethod, ServerMethod };

src/redundant-adaptive-broadcast-channel.js

@@ -0,0 +1,150 @@
+import { BroadcastChannel } from './broadcast-channel';
+import * as NativeMethod from './methods/native.js';
+import * as IndexedDbMethod from './methods/indexed-db.js';
+import * as LocalstorageMethod from './methods/localstorage.js';
+import * as ServerMethod from './methods/server.js';
+import * as SimulateMethod from './methods/simulate.js';
+
+
+/**
+ * The RedundantAdaptiveBroadcastChannel class is designed to add fallback to during channel post message and synchronization issues between senders and receivers in a broadcast communication scenario. It achieves this by:
+ * Creating a separate channel for each communication method, allowing all methods to listen simultaneously.
+ * Implementing redundant message delivery by attempting to send messages through multiple channels when the primary channel fails.
+ * Ensuring message delivery by using multiple communication methods simultaneously while preventing duplicate message processing.
+ */
+export class RedundantAdaptiveBroadcastChannel {
+    constructor(name, options = {}) {
+        this.name = name;
+        this.options = options;
+        this.closed = false;
+        this.onML = null;
+        // order from fastest to slowest
+        this.methodPriority = [NativeMethod.type, IndexedDbMethod.type, LocalstorageMethod.type, ServerMethod.type];
+        this.channels = new Map();
+        this.listeners = new Set();
+        this.processedNonces = new Set();
+        this.nonce = 0;
+        this.initChannels();
+    }
+
+    initChannels() {
+        // only use simulate if type simulate ( for testing )
+        if (this.options.type === SimulateMethod.type) {
+            this.methodPriority = [SimulateMethod.type];
+        }
+
+        // iterates through the methodPriority array, attempting to create a new BroadcastChannel for each method
+        this.methodPriority.forEach(method => {
+            try {
+                const channel = new BroadcastChannel(this.name, {
+                    ...this.options,
+                    type: method
+                });
+                this.channels.set(method, channel);
+                // listening on every method
+                channel.onmessage = (event) => this.handleMessage(event, method);
+            } catch (error) {
+                console.warn(`Failed to initialize ${method} method: ${error.message}`);
+            }
+        });
+
+        if (this.channels.size === 0) {
+            throw new Error('Failed to initialize any communication method');
+        }
+    }
+
+    handleMessage(event) {
+        if (event && event.nonce) {
+            if (this.processedNonces.has(event.nonce)) {
+                // console.log(`Duplicate message received via ${method}, nonce: ${event.nonce}`);
+                return;
+            }
+            this.processedNonces.add(event.nonce);
+
+            // Cleanup old nonces (keeping last 1000 to prevent memory issues)
+            if (this.processedNonces.size > 1000) {
+                const oldestNonce = Math.min(...this.processedNonces);
+                this.processedNonces.delete(oldestNonce);
+            }
+
+            this.listeners.forEach(listener => listener(event.message));
+        }
+    }
+
+    async postMessage(message) {
+        if (this.closed) {
+            throw new Error(
+                'AdaptiveBroadcastChannel.postMessage(): ' +
+                'Cannot post message after channel has closed ' +
+                /**
+                 * In the past when this error appeared, it was realy hard to debug.
+                 * So now we log the msg together with the error so it at least
+                 * gives some clue about where in your application this happens.
+                 */
+                JSON.stringify(message)
+            );
+        }
+
+        const nonce = this.generateNonce();
+        const wrappedMessage = { nonce, message };
+
+        const postPromises = Array.from(this.channels.entries()).map(([method, channel]) =>
+            channel.postMessage(wrappedMessage).catch(error => {
+                console.warn(`Failed to send via ${method}: ${error.message}`);
+                throw error;
+            })
+        );
+
+        const result = await Promise.allSettled(postPromises);
+
+        // Check if at least one promise resolved successfully
+        const anySuccessful = result.some(p => p.status === 'fulfilled');
+        if (!anySuccessful) {
+            throw new Error('Failed to send message through any method');
+        }
+    }
+
+    generateNonce() {
+        return `${Date.now()}-${this.nonce++}`;
+    }
+
+    set onmessage(fn) {
+        this.removeEventListener('message', this.onML);
+        if (fn && typeof fn === 'function') {
+            this.onML = fn;
+            this.addEventListener('message', fn);
+        } else {
+            this.onML = null;
+        }
+    }
+
+    addEventListener(type, listener) {
+        // type params is not being used, it's there to keep same interface as BroadcastChannel
+        this.listeners.add(listener);
+    }
+
+    removeEventListener(type, listener) {
+        // type params is not being used, it's there to keep same interface as BroadcastChannel
+        this.listeners.delete(listener);
+    }
+
+    async close() {
+        if (this.closed) {
+            return;
+        }
+
+        this.onML = null;
+
+        // use for loop instead of channels.values().map because of bug in safari Map
+        const promises = [];
+        for (const c of this.channels.values()) {
+            promises.push(c.close());
+        }
+        await Promise.all(promises);
+
+        this.channels.clear();
+        this.listeners.clear();
+
+        this.closed = true;
+    }
+}