import {server} from 'postmessage-client-server';
 
server({
  // Include any methods you wish to call from the client
  bark(thing) {
    console.log('SERVER: Bark at', thing);
    return 'Barked at ' + thing;
  },
  sniff() {
    console.log('SERVER: Sniffing...');
    return ['grass', 'ball'];
  },
  beBad() {
    console.log('SERVER: About to misbehave...');
    throw 'Eating shoe';
  }
});

import {client} from 'postmessage-client-server';
 
const urlToServerPage = 'http://mycorp.com/serverFrame.html';
 
client(urlToServerPage) // adds an iframe to the given url in your page
  .then(send => {
    // now we have our send function: send(method, args)
    send('sniff')
      .then(stuffSmelt => {
        console.log('CLIENT: We smelt:', stuffSmelt);
        stuffSmelt.forEach(item => {
          send('bark', item)
            .then(result => {
              console.log('CLIENT: Bark result:', result);
            });
        });
        send('beBad')
          .then(() => {
            console.log('CLIENT: Not punished');  // won't happen
          }, reason => {
            console.log('CLIENT: Got punished for', reason);
          });
      });
  });

SERVER: Sniffing...
CLIENT: We smelt: ["grass", "ball"]
SERVER: Bark at grass
SERVER: Bark at ball
SERVER: About to misbehave...
CLIENT: Got punished for Eating shoe
CLIENT: Bark result: Barked at grass
CLIENT: Bark result: Barked at ball