message-event-channel
v1.1.0
Published
An event driven fault tolerant library for communicating between contexts using MessageChannel.
Downloads
30,544
Maintainers
Keywords
Readme
message-event-channel
An event driven fault tolerant library for communicating between contexts using MessageChannel.
Features
- Subscribe to and broadcast events
- Send and receive JSON
- Make requests that return a promise
Installation
Using npm:
npm install message-event-channel --save
Using cdn:
<script src="https://unpkg.com/message-event-channel/dist/message-event-channel.umd.js"></script>
Including
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
or
const mc = require('message-event-channel');
const connection = new mc.ClientConnection();
or
<script src="https://unpkg.com/message-event-channel/dist/message-event-channel.umd.js"></script>
<script>
const connection = new mc.ClientConnection();
</script>
Usage
Events
/parent.html
import { ServerConnection } from 'message-event-channel';
const frame = document.querySelector('iframe');
const connection = new ServerConnection(frame);
connection.emit('my-event', {hello: 'world'});
frame.src = "./frame.html";
/frame.html
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
connection.on('my-event', (payload)=>{
// {hello: "world"}
console.log(payload)
});
Request
/parent.html
import { ServerConnection } from 'message-event-channel';
const connection = new ServerConnection(frame);
connection.request('some-data')
.then(payload => {
// {hello: "world"}
console.log(payload)
})
frame.src = "./frame.html";
/frame.html
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
connection.on('some-payload', (payload, resolve, reject)=>{
resolve({hello: 'world'})
});
Emit to all
/parent.html
import { Operator } from 'message-event-channel';
const operator = new Operator();
const connection1 = operator.connect(frame1);
const connection2 = operator.connect(frame2);
const connection3 = operator.connect(frame3);
operator.emit('send-to-all');
Close connection
/parent.html
import { ServerConnection } from 'message-event-channel';
const connection = new ServerConnection(frame);
connection.close();
Options
{
targetOrigin: '*' // limit the connection to a particular origin (reccomended)
onload: true, // if the connection should be initialised by an onload event or manually using init()
timeout: 2000, // default time it takes for requests to timeout
debug: false, // used to enable useful behind-the-scenes info
connectionTimeout: 2000 // will trigger the CONNECTION_TIMEOUT event if a connection hasn't been established by this time, can be set to false.
clientInitiates: false // Server setting - waits for a init() trigger from the child frame before initiating.
}