https://github.com/michaeljier/easy-messenger

easy to use MessageChannel
https://github.com/michaeljier/easy-messenger

messagechannel

Last synced: about 1 month ago
JSON representation

easy to use MessageChannel

• Host: GitHub
• URL: https://github.com/michaeljier/easy-messenger
• Owner: MIchaelJier
• License: mit
• Created: 2021-06-09T08:41:47.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-06T03:22:19.000Z (over 3 years ago)
• Last Synced: 2024-11-07T07:38:42.741Z (about 2 months ago)
• Topics: messagechannel
• Language: TypeScript
• Homepage: https://www.npmjs.com/search?q=%40easy-messenger
• Size: 143 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `easy-messenger`

> easy to use MessageChannel 

## Install

``` js

// 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

#### 

```js

//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";

```

```js

//frame.html

import { ClientConnection } from '@easy-messenger/client-connection';

const connection = new ClientConnection();

connection.on('test', (payload)=>{ 

  console.log(payload)  // {code: 'xxxxxx'} 

});

```

#### Request

```js

//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();

```

```js

//frame.html

import { ClientConnection } from '@easy-messenger/client-connection';

const connection = new ClientConnection();

connection.on('some-data', (payload, resolve, reject)=>{

  resolve({hello: 'world'})

});

```

#### Options

```json

{

  targetOrigin: '*' 

  onload: true, 

  timeout: 2000, 

  debug: false,  

  connectionTimeout: 2000

  clientInitiates: false 

}

```