@kcuf/messenger

• 🧱 优雅且类型安全的 postMessage
• 😎 可以传递 Error 对象
• 🎯 可以转成 Promise
• 🪁 可以跨 Window 发送事件

兼容性

postMessage 的 兼容性 已经很好了，我们不做无谓判断。

INSTALL

pnpm add @kcuf/messenger

Usage

import messenger from '@kcuf/messenger';

messenger.emit<P>(type, payload); // 这里 P 是 `payload` 的类型定义
messenger.on<P>(type, payload => {
  // ...
});
messenger.once<P>(type, payload => {
  // ...
});

messenger.emitPromise<P>(type, payload);
messenger.onPromise<P>(type, payload => {
  // ...
});

APIs

• messenger.emit(type, payload?) 相当于 postMessage({ type, payload })
• messenger.emitPromise(type, payload?) 也是 postMessage，返回 Promise，必须要有 onPromise 来承接，否则此 Promise 将永远无法结束
• messenger.on(type, fn) 相当于 addEventListener('message' ... 并判断 e.data.type === type
• messenger.once(type, fn) 相当于 on，调用后自动解绑
• messenger.onPromise(type, fn) 相当于 on，调用后自动解绑

FAQ

如何向其他窗口（比如父 parent 或 top，甚至某个 iframe 的窗口）进行 postMessage？

给 emit / emitPromise 传第三个参数：

messenger.emit(type, payload, {
  targetWindow: 'parent' // 或 'top' 或其他 Window 对象
})

如何解绑？

之所以没有类似 off 之类的 API，是因为 on、once、onPromise 这几个方法的返回就是一个无参的解绑函数。

使用 hook 的例子

import {
  useEffect
} from 'react';

import messenger from '@kcuf/messenger';

function useEffectOnMessengerXx(): void {
  useEffect(() => messenger.on(_MESSAGE_TYPE_ENUM_, () => {
    // ... do sth
  }), []);
}

必须 @kcuf/messenger#emit 联合 @kcuf/messenger#on 使用吗？

并不是。

你还是可以用原生的 addEventListener('messenger', ...) 来监听，唯一的区别就是你要自己去判断 e.data.type 等。

同样的，@kcuf/messenger#on 也可以接收裸写的 postMessage({ type, data })。只不过，你裸写 postMessage 很可能漏掉 targetOrigin。

type 可否为空字符串？

不可。