前言
前端开发中的需求多种多样，其中涉及到不同窗口之间通讯的需求也比较常见。而其中通过 postMessage 实现的通讯需求也十分普遍。然而若要实现两端窗口间的通讯，不仅需要注意消息格式的合法性，也需要考虑通讯的稳定性、性能等问题。而 npm 包 post-message-stream 便是一款专门为 postMessage 通信打造的工具类库，能够轻松解决通讯中遇到的很多问题，对于前端开发人员来说是一款十分实用的工具包。
使用环境 & 前置知识
- 熟悉 JavaScript 开发、postMessage 通讯机制
- 需要在 Web 端、前端开发环境中使用
安装
npm install post-message-stream
基本使用
- 引入
post-message-stream
import PostMessageStream from 'post-message-stream'
- 实例化
const stream = new PostMessageStream({
name: 'parentNameToChild',
target: window.frames.child === 'undefined' ? null : window.frames.child,
// 根据情况配置不传的属性，例如防止死循环、postMessage 的 origin 等
})- 发送信息
stream.write({
type: 'MESSAGE_TYPE',
data: {
// MESSAGE DATA
}
})- 接收信息
stream.on('data', (message) => {
// MESSAGE HANDLE
})API 详解
实例化
const stream = new PostMessageStream(options)
options 对象包含以下属性：
name: 【必填】当前post-message-stream的通道名称target: 【必填】指向post-message-stream的接收端窗口对象localWindow: 当前post-message-stream的获取 window 方法，默认() => window，若在 iframe 中发送则更改为() => window.parentremoteWindow: 获取远程 window 或者 target window 方法，默认() => this._targetWindoworigin:postMessage的 origin，默认为'*'，也可根据实际情况动态配置pingInterval: 心跳间隔时间，默认值为 10smaxHeartbeatSkip: 最大心跳间隔数，单位为pingInterval，默认值为 3pingData: 心跳数据，默认为{type: 'PING'}，也可自行配置
发送信息
stream.write(message)
message 对象包含以下属性：
type: 【必填】消息类型data: 根据需要设置的消息内容
接收信息
stream.on('data', callback)接收到新的消息时会触发回调函数 callback。而 callback 接收的参数为接收到的消息对象。
断开通讯
stream.end()
注意事项
使用
post-message-stream发送或接收的数据内容必须为支持JSON.stringify()的字段类型。若在 iframe 中使用，需使用
window.parent指向post-message-stream的接收端。若
post-message-stream两端互为接收和发送，需分别实例化两次，并指向对方相应的 window。反之仅需实例化一次。
综合示例
一个简单的实例，在 parent 窗口通过 iframe 引入 child 窗口页，并向该页发送消息。
-- -------------------- ---- ------- -- ----------- --------- ----- ------ ------ ----- ----------------- --------------------- ------- ------ ------ ----------- ------- ---------- ---------------------------- ------- --------------------------- ------- -------
-- -------------------- ---- ------- -- --------- ------ ----------------- ---- --------------------- ----- ------ - --- ------------------- ----- -------------------- ------- ------------------- --- ----------- - ---- - -------------------- -- ------------------- -------- ----------
-- -------------------- ---- ------- -- ---------- --------- ----- ------ ------ ----- ----------------- -------------------- ------- ------ ------ ---------- ------- -------------------------- ------- -------
-- -------------------- ---- ------- -- -------- ------ ----------------- ---- --------------------- ----- ------ - --- ------------------- ----- -------------------- ------- -------------- -- ----------------- --------- -- - -------------------- --
总结
post-message-stream 作为一个专门针对前端 postMessage 通讯机制而设计的 npm 包，能够很好地解决通讯时的稳定性、性能等问题，使得前端开发人员能够更加高效地应对通讯需求。使用起来也非常方便，有着良好的 API 设计。当然，在实际应用中，我们也要尽可能注意 postMessage 发送的安全问题，避免 XSS 攻击等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/95147