easy-messenger

easy to use MessageChannel

Install

// npm
npm install @easy-messenger/server-connection -S
npm install @easy-messenger/client-connection -S
// yarn
yarn add @easy-messenger/server-connection -S 
yarn add @easy-messenger/client-connection -S

Usage

//parent.html

import { ServerConnection } from '@easy-messenger/server-connection';
const frame = document.querySelector('iframe');
const connection = new ServerConnection(frame);
connection.emit('test', {code: 'xxxxxx'});
frame.src = "./frame.html";

//frame.html

import { ClientConnection } from '@easy-messenger/client-connection';
const connection = new ClientConnection();
connection.on('test', (payload)=>{ 
  console.log(payload)  // {code: 'xxxxxx'} 
});

Request

//parent.html

import { ServerConnection } from '@easy-messenger/serve-connection';
const connection = new ServerConnection(frame); 
connection.request('some-data')
  .then(payload => { 
    // {hello: "world"}
    console.log(payload)
  })
// close connection
connection.close();

//frame.html

import { ClientConnection } from '@easy-messenger/client-connection';
const connection = new ClientConnection();
connection.on('some-data', (payload, resolve, reject)=>{
  resolve({hello: 'world'})
});

Options

{
  targetOrigin: '*' 
  onload: true, 
  timeout: 2000, 
  debug: false,  
  connectionTimeout: 2000
  clientInitiates: false 
}