Package Exports

@mixer/postmessage-rpc

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mixer/postmessage-rpc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@mixer/postmessage-rpc

This is a library for making RPC calls (asynchronous method calls) between browser windows or iframes. It builds upon the browser postMessage API, which lacks some features that complex applications may depend upon:

The ability to have transactional request/response calls between windows
Easy scoping between multiple applications; postMessage events are global on the window, so multiple postMessage targets must be disambiguated.
postMessage does not guarantee ordering, which can lead to surprising and difficult to diagnose bugs.

This RPC layer resolves those issues.

Example Usage

The RPC class is symmetrical and should be created on both windows you want to talk between. Say you want to embed iframe.html inside the parent.html, and have the parent provide a function that adds things the child gives it. That might look like:

parent.js

import { RPC } from '@mixer/postmessage-rpc';

const rpc = new RPC({
  // The window you want to talk to:
  target: myIframe.contentWindow,
  // This should be unique for each of your producer<->consumer pairs:
  service: 'my-awesome-service',

  // Optionally, allowlist the origin you want to talk to:
  // origin: 'example.com',
});

rpc.expose('add', (data) => data.a + data.b);

iframe.js

import { RPC } from '@mixer/postmessage-rpc';

const rpc = new RPC({
  target: window.parent,
  service: 'my-awesome-service',
});

rpc.call('add', { a: 3, b: 5 }).then(result => console.log('3 + 5 is', result));