msgio

If you are familiar with socket.io, you already know how to use this package.

socket.io is based on WebSocket.

msgio is based on postMessage.

Install

npm

npm install --save @ee-fe/ee-msgio

<script>

<script src="http://<path to ee-msgio>/umd/ee-msgio.min.js"></script>
<script>
  console.log(window.EEMsgIO); // IframeHost, Guest
  // For detail usage, see below...
</script>

Usage

Iframe

In your Main App

import {IframeHost} from 'msgio';

const iframe = document.getElementById('my-iframe');

const onLoad = e => {
    const io = new IframeHost(e.target);

    io.on('connect', socket => {
        // listening some events from the guest
        socket.on('my_custom_event', data => {
            // data: {x: 1, y: 2}
            // any code
        });

        // emit events to the guest
        socket.emit('greeting', 'hello world!');

        // expose functions to the guest
        socket.function('my_sync_fn', (a1, a2, ...rest) => {
            // a1: 1
            // a2: 2
            // rest: 3, 4, 5
            // any code
            // you can throw as usual!
        });

        // you can expose aysnc functions too.
        socket.function('my_async_fn', (a1, a2, ...rest) => {
            // a1: 'a'
            // a2: 'b'
            // rest: 'c', 'd', 'e'
            return new Promise((resolve, reject) => {
                // any code
            });
        });

        // call some functions the guest provides.
        socket.call('hi', 'guest', '!')
            .then(result => {
                // as you call the 'hi' function with args 'guest' and '!'
                // the resule may be 'hello host!', who knows!
                // any code
            })
            .catch(error => {
                // the guest may throw error to you
            });
    });
};

iframe.addEventListener('load', onLoad);

In your Iframe

import {Guest} from 'msgio';

// You must provide the host's origin. It's all.
const io = new Guest({host: 'http://localhost:8080'});

// Like in your main app
io.on('connect', socket => {
    // the host will use this to set the <iframe>'s width and height.
    io.resize({width: 400, height: 600});

    // listening some events from the host
    socket.on('greeting', data => {
        // data: 'hello world!'
        // any code
    });

    // emit events to the guest
    socket.emit('my_custom_event', {x: 1, y: 2});

    // call functions from the host.
    socket.call('my_sync_fn', 1, 2, 3, 4, 5)
        .then(result => {
            // any code
        })
        .catch(error => {
            // catch the error
        });

    socket.call('my_async_fn', 'a', 'b', 'c', 'd', 'e')
        .then(result => {
            // any code
        })
        .catch(error => {
            // catch the error
        });

    socket.function('hi', (a1, a2, a3) => {
        // a1: 'guest'
        // a2: '!'
        // a3: undefined
        // any code
        // return 'hello host!'
    });
});

Tab

Not implemented yet!

Web Worker

Not implemented yet!

API

new Iframe(dom: HTMLElement) => Host

The dom provied must be a iframe node.

new Guest(options: Object) => Guest

options:

host: string

Provides the origin. eg: http://example.com:8080

Host API

on: ('connect', callback: Function) => void

callback: (socket: Socket) => void

Guest API

on: ('connect', callback: Function) => void

callback: (socket: Socket) => void

resize: (size: {width: number, height: number}) => void;

Socket API

on: (event: string, callback: Function) => void

calback: (payload: string | number | boolean | Array | Object) => void

emit: (event: string, payload: string | number | boolean | Array | Object) => void

function: (functionName: string, callback: Function) => void

calback: (payload: string | number | boolean | Array | Object) => void

call: (functionName: string, ...args: string | number | boolean | Array | Object) => Promise