postmessage-client-server
v1.0.0
Published
A simple promise-based client and server to communicate between pages and iframes with postmessage.
Downloads
29
Maintainers
Readme
postmessage-client-server
A simple promise-based client and server to communicate between pages and iframes with postmessage.
All data passed will be serialized with JSON.
Installation
In your project dir:
npm install --save postmessage-client-server
Server
In your page the iframe will load on your server:
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';
}
});
Client
On your client webpage:
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);
});
});
});
Output
The console output from the above example would be:
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
Remember that the calls are asynchronous, so the order may vary.
Module submitted by Erik Rasmussen @erikras