How to use broadcast-channel - 10 common examples

function _prepareBroadcastChannel(rxDatabase) {
  // broadcastChannel
  rxDatabase.broadcastChannel = new BroadcastChannel('RxDB:' + rxDatabase.name + ':' + 'socket');
  rxDatabase.broadcastChannel$ = new Subject();

  rxDatabase.broadcastChannel.onmessage = function (msg) {
    if (msg.st !== rxDatabase.storageToken) return; // not same storage-state

    if (msg.db === rxDatabase.token) return; // same db

    var changeEvent = changeEventfromJSON(msg.d);
    rxDatabase.broadcastChannel$.next(changeEvent);
  }; // TODO only subscribe when sth is listening to the event-chain


  rxDatabase._subs.push(rxDatabase.broadcastChannel$.subscribe(function (cE) {
    rxDatabase.$emit(cE);
  }));
}

}

    if (this.state.wasUpgraded) {
      Segment.getInstance().logEvent('LOADED_UNSUPPORTED_VERSION', {
        requestedVersion: this.state.initialSdkVersion,
        snackId: this.props.match.params.id,
      });
    }

    // @ts-ignore
    this._snackSessionWorker = new Worker('../workers/snack-session.worker', { type: 'module' });
    this._snack = create(this._snackSessionWorker);

    this._initializeSnackSession();

    this._broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME, {
      webWorkerSupport: false,
    });

    // Let other tabs know that a new tab is opened
    this._broadcastChannel.postMessage({
      type: 'NEW_TAB',
      id: this.state.params.id,
    });

    // Listen to messages from other tabs
    this._broadcastChannel.addEventListener('message', e => {
      const { id } = this.state.params;

      // Only respond to messages which have the same snack
      if (e.id !== id || !e.id) {
        return;

}

    if (this.state.wasUpgraded) {
      Segment.getInstance().logEvent('LOADED_UNSUPPORTED_VERSION', {
        requestedVersion: this.state.initialSdkVersion,
        snackId: this.props.match.params.id,
      });
    }

    // @ts-ignore
    this._snackSessionWorker = new Worker('../workers/snack-session.worker', { type: 'module' });
    this._snack = create(this._snackSessionWorker);

    this._initializeSnackSession();

    this._broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME, {
      webWorkerSupport: false,
    });

    // Let other tabs know that a new tab is opened
    this._broadcastChannel.postMessage({
      type: 'NEW_TAB',
      id: this.state.params.id,
    });

    // Listen to messages from other tabs
    this._broadcastChannel.addEventListener('message', e => {
      const { id } = this.state.params;

      // Only respond to messages which have the same snack
      if (e.id !== id || !e.id) {
        return;

function _prepareBroadcastChannel(rxDatabase: RxDatabase) {
    // broadcastChannel
    rxDatabase.broadcastChannel = new BroadcastChannel(
        'RxDB:' +
        rxDatabase.name + ':' +
        'socket'
    );
    rxDatabase.broadcastChannel$ = new Subject();
    rxDatabase.broadcastChannel.onmessage = msg => {
        if (msg.st !== rxDatabase.storageToken) return; // not same storage-state
        if (msg.db === rxDatabase.token) return; // same db
        const changeEvent = changeEventfromJSON(msg.d);
        (rxDatabase.broadcastChannel$ as any).next(changeEvent);
    };


    // TODO only subscribe when sth is listening to the event-chain
    rxDatabase._subs.push(
        rxDatabase.broadcastChannel$.subscribe(cE => {

import { BrowserRouter } from 'react-router-dom';
import { ClientRouterProvider } from 'react-cross-client-router'

import './index.css';
import App from './App';

let relativePath = '';
if (process.env.PUBLIC_URL) {
  const publicUrl = new URL(process.env.PUBLIC_URL);
  relativePath = publicUrl.pathname;
}

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

async closeOtherClients(options) {
    this.uid = uuid4();
    this.state = 'start';
    this.isBackground = !!options.isBackground;
    this.timestamp = Date.now();
    this.waitSet = new Set();

    log.info('close other clients');
    this.channel = new BroadcastChannel(options.instanceName, {
      webWorkerSupport: false
    });

    this.postState();

    this.channel.onmessage = message => {
      this.onBroadcastMessage(message);
    };

    await sleep(300);
    if (this.waitSet.size !== 0) {
      await new Promise(resolve => {
        this.onWaitSetEmpty = resolve;
      });
    }
    this.sendStart();

function subscribeBroadcastChannel(
    topic: string,
    onMessage: (m: T) => void,
    onLeader: () => void): BroadcastChannelHandle {
    const channel = new BroadcastChannel(topic);
    channel.onmessage = (m) => onMessage(m);
    const elector = LeaderElection.create(channel);
    elector.awaitLeadership().then(() => onLeader())
    return {
        topic,
        channel,
        elector,
        onMessage,
        onLeader
    }
}
function unsubscribeBroadcastChannel(handle: BroadcastChannelHandle) {

function subscribeBroadcastChannel(
    topic: string,
    onMessage: (m: T) => void,
    onLeader: () => void): BroadcastChannelHandle {
    const channel = new BroadcastChannel(topic);
    channel.onmessage = (m) => onMessage(m);
    const elector = LeaderElection.create(channel);
    elector.awaitLeadership().then(() => onLeader())
    return {
        topic,
        channel,
        elector,
        onMessage,
        onLeader
    }
}
function unsubscribeBroadcastChannel(handle: BroadcastChannelHandle) {

function LeaderElector(database) {
    this.destroyed = false;
    this.isLeader = false;
    this.isDead = false;
    this.database = database;
    this.elector = createLeaderElection(database.broadcastChannel);
  }