# message-sender

> speed use postMessage

Latest version **0.1.7** (published 2023-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install message-sender
pnpm add message-sender
yarn add message-sender
bun add message-sender
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2023-12-07 |
| First published | 2023-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 72.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | chen fei |
| Maintainers | icozeta |
| Keywords | postMessage, iframe, browser |

## Links

- npm: https://www.npmjs.com/package/message-sender
- npm.io page: https://npm.io/package/message-sender

## Dependencies (2)

- [debug](https://npm.io/package/debug.md) ^4.3.4
- [@types/debug](https://npm.io/package/@types/debug.md) ^4.1.7

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2023-12-07
- 0.1.6 — 2023-10-28
- 0.1.5 — 2023-10-28
- 0.1.4 — 2023-10-28
- 0.1.3 — 2023-09-21
- 0.1.2 — 2023-09-18
- 0.1.1 — 2023-09-18
- 0.1.0 — 2023-09-18
- 0.0.16 — 2023-09-15
- 0.0.15 — 2023-09-14
- 0.0.14 — 2023-08-28
- 0.0.13 — 2023-08-28
- 0.0.12 — 2023-08-28
- 0.0.11 — 2023-08-28
- 0.0.10 — 2023-08-28
- … 9 more at https://npm.io/package/message-sender/versions

## README

# Message Sender
用于支持多个iframe的通信方案   

## Install
```javascript
npm install --save message-sender
```

## 释义
- 通信对象    
    - T - 顶层消息窗口，唯一
    - A - 应用消息窗口，多个

## Usage

T, A都需要进行挂载，T的挂载时肯定比A快的，T、A的挂载请置于程序入口处。

- 第一步：设置T的挂载
```javascript
import messageSender from 'message-sender'

// T, T的id默认CORE_APP
messageSender.mount({
  debug: true,
  listen: {
    answer(result) {
      console.log(result.data)

      return 'Yes, I am Core App!'
    },
  }
})

// 和listen相同，用于异步处理，同一个事件只能注册一次
messageSender.on('answer2', () => {
  console.log(result.data)

  return 'Yes, I am Core App! This is answer2'
})
```

- 第二步: 设置A的挂载
```javascript
import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.a',
  // 依赖注入
  inject: {
    vueStore: { log() { console.log('test...') } },
  },
  listen: {
    answer(result) {
      console.log(result.data)

      return 'Get out here!'
    },
  }
})

messageSender.vueStore.log() // 结果为"test..."
```

## 常规通信方式

### 1、顶层 <-> 应用（消息窗口与顶层窗口相互通信）
T -> A, T给A发送消息，A应答并消息结果返回给T     
A -> T, A给T发送消息，T应答并消息结果返回给A   


- T的代码   
T发送数据的时候会检查应用是否被挂载，未被挂载则重试。
```javascript
import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  retrySendMaxTimes: 2, // 最大重试次数
  retrySendInterval: 5001, // 每次重试间隔
  listen: {
    orderKFC(result) {
      console.log(result.data)

      return '好的，一份原神异世寻味礼，您稍等~'
    },
  }
})

// 超过重试次数，则会进入catch流程，不再重试
messageSender.send('app.a', 'answer', 'Hello a, I am Core App!').then(result => {
  console.log(result.data)
})
```

- A的代码
```javascript
import messageSender from 'message-sender'

// 这里可以看到A的代码是10秒后延迟挂载的
setTimeout(() => {
  messageSender.mount({
    debug: true,
    id: 'app.a',
    listen: {
      answer(result) {
        console.log(result.data)

        return 'Hi， I am a'
      },
    }
  })

  messageSender.sendTop('orderKFC', '异世相遇，尽享美味').then(result => {
    console.log(result.data) // 结果为“好的，一份原神异世寻味礼，您稍等~”
  })
}, 10000)
```

### 2、应用 <-> 应用（消息窗口与消息窗口的通信）

- A的代码 - app.b
```javascript
import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.b'
})

messageSender.send('app.c', 'answer', 'Hello，c!， I am b').then(result => {
  console.log(result.data) // 响应结果为“欢迎收听中文广播电台17301”
})
```

- A的代码 - app.c
```javascript
messageSender.mount({
  debug: true,
  id: 'app.c',
  listen: {
    answer(result) {
      console.log(result.data) // 响应结果为“Hello，c!， I am b”

      return '欢迎收听中文广播电台17301'
    },
  }
})
```

### 3、顶层/应用 <-> 多个应用 （广播，支持消息窗口进行广播）
broadcast方法支持SendOption设置

- T/A的代码
```javascript
import messageSender from 'message-sender'

// 只能广播给已挂载的窗口
messageSender.broadcast('_(:з」∠)_， 我是广播君！！！！！').then((result) => {
  console.log(result.data) // 结果为 {app.b: {…}, app.c: {…}}， 所有窗口的返回消息，key为id
})

// 广播对应的行为
messageSender.broadcast('_(:з」∠)_， 我是广播君！！！！！', 'answer').then((result) => {
  console.log(result.data) // 结果为 {app.b: {…}, app.c: {…}}， 所有窗口的返回消息，key为id
})
```

- A的代码 - app.c
```javascript
import messageSender from 'message-sender'

messageSender.mount({
  debug: true,
  id: 'app.c',
  listen: {
    // msEventBroadcast是messageSender默认广播接收方法
    msEventBroadcast(result) {
      console.log('common: ', result)

      return '感谢您的广播来电，请问需要咨询什么情感问题？'
    },
  }
})
```

## 订阅与发布
通信事件有且只能注册一个，这里通过订阅发布来处理窗口消息发布，以及响应窗口的，该模式是建立在通信广播的逻辑上。

- A的代码 - app.b
```javascript
// 订阅app.c的消息
const appCSubscribe = messageSender.subscribe('app.c')

// 订阅行为
appCSubscribe.on('fileChange', result => {
  console.log(result)
})

// 和on方法不同，可以多次订阅相同行为
appCSubscribe.on('fileChange', result => {
  console.log(result)
})
```

- A的代码 - app.c
```javascript
// 推送app.c的消息
messageSender.publish('fileChange', { filePath: '/xxxxx/xxxxx/xxxx/happy.avi' })
```

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