How to use broadcast-channel - 10 common examples

To help you get started, we’ve selected a few broadcast-channel examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pubkey / rxdb / dist / es / rx-database.js View on Github external
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);
  }));
}
github expo / snack-web / src / client / components / App.tsx View on Github external
}

    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;
github expo / snack-web / src / client / components / App.tsx View on Github external
}

    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;
github pubkey / rxdb / src / rx-database.ts View on Github external
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 => {
github philips-software / react-cross-client-router / example / src / index.js View on Github external
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(
  <BrowserRouter basename={relativePath}>
    <ClientRouterProvider
      channel={new BroadcastChannel('react-cross-tab-router')}
      storage={window.sessionStorage}
      basename={relativePath}
    >
      <App />
    </ClientRouterProvider>
  </BrowserRouter>,
  document.getElementById('root')
);
github tdlib / td / example / web / tdweb / src / index.js View on Github external
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();
github avkonst / hookstate / examples / src / examples / plugin-persistence2.tsx View on Github external
function subscribeBroadcastChannel<T>(
    topic: string,
    onMessage: (m: T) => void,
    onLeader: () => void): BroadcastChannelHandle<T> {
    const channel = new BroadcastChannel<T>(topic);
    channel.onmessage = (m) => onMessage(m);
    const elector = LeaderElection.create(channel);
    elector.awaitLeadership().then(() => onLeader())
    return {
        topic,
        channel,
        elector,
        onMessage,
        onLeader
    }
}
function unsubscribeBroadcastChannel<T>(handle: BroadcastChannelHandle<T>) {
github avkonst / hookstate / examples / src / examples / plugin-persistence2.tsx View on Github external
function subscribeBroadcastChannel<T>(
    topic: string,
    onMessage: (m: T) => void,
    onLeader: () => void): BroadcastChannelHandle<T> {
    const channel = new BroadcastChannel<T>(topic);
    channel.onmessage = (m) => onMessage(m);
    const elector = LeaderElection.create(channel);
    elector.awaitLeadership().then(() => onLeader())
    return {
        topic,
        channel,
        elector,
        onMessage,
        onLeader
    }
}
function unsubscribeBroadcastChannel<T>(handle: BroadcastChannelHandle<T>) {
github pubkey / rxdb / dist / es / plugins / leader-election.js View on Github external
function LeaderElector(database) {
    this.destroyed = false;
    this.isLeader = false;
    this.isDead = false;
    this.database = database;
    this.elector = createLeaderElection(database.broadcastChannel);
  }

broadcast-channel

A BroadcastChannel that works in New Browsers, Old Browsers, WebWorkers and NodeJs

MIT
Latest version published 1 month ago

Package Health Score

83 / 100
Full package analysis