在前端开发中，往往需要在不同的窗口或者 iframe 之间进行消息传递。而 postMessage 能够满足这一需求。但是，在实际开发中，我们往往会遇到一些 postMessage 的局限，如使用不便等问题。这时，npm 包 @jurca/post-message-p2p 就能够很好的解决这一问题。
介绍
@jurca/post-message-p2p 是一个基于 postMessage 实现的双向通信 npm 包，它能够让不同窗口或 iframe 之间进行双向通信变得非常方便，而且它的使用也十分简单。它的主要功能如下：
- 发送和接收 JSON 消息
- 可以安全地发送到同一窗口或不同窗口或 iframe
- 可建立不同类型的通道（例如加密或非加密）
- 简单易用
安装
你可以通过 npm 安装该包，命令如下：
--- ------- -----------------------
使用
下面我们将介绍该包的使用。首先，我们需要在要进行消息传递的窗口或 iframe 中分别引入该包。
------ - ------- - ---- --------------------------
然后，我们需要在各个窗口或 iframe 中创建通道。
----- ------- - --- --------- -- -------------------------- -- -------------------- ----- ------------ -- ---- ----------- -- -------------- ------ -- --------------------------------------- -------------- ------------------ -- ------------------- ---- ---------------- ------ -- ----------------- ---- -------------- ------ ---
上述代码创建了一个通道，并将其命名为 'myChannel'。如果在不同的窗口或 iframe 中，我们使用相同的名称创建通道，并且在它们之间建立了连接，这些连接将成为共享通道。我们还可以选择是否使用 AES-256-CBC 加密传输，并且如果在不同的窗口或 iframe 中共享了密钥，则还可以使用 encryptionKey 选项。
然后，我们可以使用 onMessage 方法在通道上监听消息。
--------------------------- -- - --------------------- ---------- --------- ---
最后，我们可以使用 sendMessage 方法将消息发送到通道中。
--------------------- ----- ------ ---- -- ---
这样，我们就完成了一个简单的消息传递示例。在实际开发中，我们可以在不同的窗口或 iframe 中，通过使用相同名称的通道进行消息传递，并且也可以选择使用加密或非加密方式传输消息。
示例代码
-- -- - ------ - ------- - ---- -------------------------- ----- ------- - --- --------- ----- ----------- --- --------------------------- -- - --------------------- ------- ---- ---- --------- --- --------------------- ----- -------- ---- -- ---
-- -- - ------ - ------- - ---- -------------------------- ----- ------- - --- --------- ----- ----------- --- --------------------------- -- - --------------------- ------- ---- ---- --------- --- --------------------- ----- ------- ---- -- ---
这两个窗口之间，将会不断地交换消息。您可以在浏览器的控制台中查看日志来确认这一点。
总结
@jurca/post-message-p2p 是一个强大而简单易用的 npm 包，它能够方便地解决窗口或 iframe 之间的双向通信问题，并提供非常易用的 API 接口。如果您需要在前端开发中进行窗口或 iframe 之间的消息传递，那么该包将是您不可缺少的利器。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/105285