# message-event-channel

> An event driven fault tolerant library for communicating between contexts using MessageChannel.

Latest version **1.2.0** (published 2025-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install message-event-channel
pnpm add message-event-channel
yarn add message-event-channel
bun add message-event-channel
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2025-08-06 |
| First published | 2019-11-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 1 |
| Unpacked size | 262.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 16 |
| Author | ccorbett |
| Maintainers | amplience-admin, petercoulton-human, easen-amp, ccorbett, gbrown-amp, nsmith-amp, amp-automation, srweeks, techiedarren, rs-amp, amp-adm-srv-npm, gnewso, labski42 |

## Links

- npm: https://www.npmjs.com/package/message-event-channel
- Repository: https://github.com/amplience/message-event-channel
- Homepage: https://github.com/amplience/message-event-channel#readme
- Issues: https://github.com/amplience/message-event-channel/issues
- npm.io page: https://npm.io/package/message-event-channel

## Dependencies (1)

- [url-polyfill](https://npm.io/package/url-polyfill.md) ^1.1.7

## Recent versions

- 1.2.0 (latest) — 2025-08-06
- 1.1.0 — 2020-05-07
- 1.0.2 — 2019-11-07
- 1.0.1 — 2019-11-06

## 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:

``` sh
npm install message-event-channel --save
```

Using cdn:

``` html
<script src="https://unpkg.com/message-event-channel/dist/message-event-channel.umd.js"></script>
```
# Including

```ts
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
```

or

```js
const mc = require('message-event-channel');
const connection = new mc.ClientConnection();
```

or
``` html
<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`

```ts
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`

```ts
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
connection.on('my-event', (payload)=>{
  // {hello: "world"}
  console.log(payload)
});
```

## Request

`/parent.html`

```ts
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`

```ts
import { ClientConnection } from 'message-event-channel';
const connection = new ClientConnection();
connection.on('some-data', (payload, resolve, reject)=>{
  resolve({hello: 'world'})
});
```

## Emit to all

`/parent.html`

```ts
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`

```js
import { ServerConnection } from 'message-event-channel';
const connection = new ServerConnection(frame);
connection.close();
```


# Options
```js
{
  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.
}
```

---
_Source: https://npm.io/package/message-event-channel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._