@ee-fe/msgio v0.1.0

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