前言
在开发前端应用程序时，我们常常需要在不同的窗口之间进行通信和数据传递。HTML5 标准提供了一个强大的 API：MessageChannel，允许我们在不同的窗口之间进行双向通信。但是，使用 MessageChannel API 并不是很方便，因为它需要我们手动处理一些复杂的逻辑，比如序列化和反序列化消息，处理错误和超时等等。
这时，我们可以使用一个方便的 npm 包：message-channel-promise，它简化了 MessageChannel API 的使用，并允许我们使用 Promise 风格的 API 来处理消息传递，从而提高了开发效率和代码可读性。
在本文中，我们将介绍如何使用 message-channel-promise 来实现不同窗口之间的双向通信，包括如何发送和接收消息，如何处理错误和超时，以及一些常见的示例。
安装和初始化
首先，我们需要在项目中安装 message-channel-promise，可以使用 npm 或 yarn 命令来安装：
npm install --save message-channel-promise yarn add message-channel-promise
然后，我们需要在页面中创建两个不同的 MessageChannel 对象，并在不同的窗口之间进行共享。这通常可以通过 window.postMessage() 方法来实现，例如：
// 在主窗口中创建 MessageChannel 对象
const channel = new MessageChannel();
// 在子窗口中创建 MessageChannel 对象，并通过 window.postMessage() 共享
window.opener.postMessage({ type: 'init', port: channel.port2 }, '*');
channel.port1.onmessage = handleMessage;其中，第一个窗口是主窗口，第二个窗口是子窗口。主窗口中的 channel 变量包含了一个 MessageChannel 对象，它的 port2 属性用于在两个窗口之间共享，而子窗口中的 onmessage 事件处理函数 handleMessage 则用于接收从主窗口发送过来的消息。
发送和接收消息
有了初始化工作之后，我们就可以使用 message-channel-promise 来发送和接收消息了。首先，我们需要在主窗口或子窗口中，创建一个 MessageChannelPromise 对象，例如：
// 在主窗口中创建 MessageChannelPromise 对象
const channelPromise = new MessageChannelPromise({ port: channel.port1 });
// 在子窗口中创建 MessageChannelPromise 对象
const channelPromise = new MessageChannelPromise({ targetOrigin: '*', protocol: 'https:' });在创建 MessageChannelPromise 对象时，我们需要传递不同的参数：
- 在主窗口中，我们需要传递一个包含 port 属性的对象，表示我们要使用哪个 MessagePort 进行通信。
- 在子窗口中，我们需要传递一个包含 targetOrigin 和 protocol 属性的对象，表示我们要向哪个窗口发送消息，以及使用哪个协议。
然后，我们可以使用 channelPromise 对象的 send() 方法来发送消息，例如：
// 发送一个消息到子窗口，并等待子窗口回复
await channelPromise.send({ type: 'hello' });这里的 send() 方法返回一个 Promise 对象，表示发送消息的结果，我们可以使用 await 关键字来等待结果返回。如果子窗口成功接收到消息并回复，那么我们可以在 send() 方法的 then() 回调函数中获取到回复的消息，例如：
// 发送一个消息到子窗口，并等待子窗口回复
await channelPromise.send({ type: 'hello' })
.then(response => {
console.log('received:', response);
});如果子窗口接收消息时发生了错误，那么我们可以在 send() 方法的 catch() 回调函数中获取到错误信息，例如：
// 发送一个消息到子窗口，并等待子窗口回复
await channelPromise.send({ type: 'hello' })
.then(response => {
console.log('received:', response);
})
.catch(error => {
console.error('error:', error);
});注意，使用 message-channel-promise 发送和接收消息时，我们不需要手动进行任何的序列化和反序列化操作，它会自动处理这些复杂的逻辑。
处理错误和超时
除了发送和接收消息之外，我们还需要处理一些常见的错误和超时情况，以保证应用程序的稳定性和可靠性。在 message-channel-promise 中，我们可以使用 try...catch...finally 语句以及 Promise.race() 方法来处理这些情况。
例如，如果子窗口没有成功接收到主窗口发送的消息，那么我们可以使用 try...catch...finally 语句来处理这个错误，例如：
-- -------------------- ---- -------
--- -
-- -------------------
----- -------- - ----- --------------------- ----- ------- ---
------------------------ ----------
- ----- ------- -
----------------------- -------
- ------- -
--------------------
-这里的 try...catch...finally 语句表示，我们首先尝试发送一个消息到子窗口，如果发送失败，那么捕获错误并输出错误信息，否则输出回复的消息。无论发送是否成功，都会执行 finally 代码块中的代码。
另外，如果发送消息时发生了超时，那么我们可以使用 Promise.race() 方法来解决这个问题，例如：
-- -------------------- ---- -------
----- -------------- - --- ----------------- ------- -- -
------------- -- -
---------- ------------------
-- ------
---
----- ------------------ - --------------------- ----- ------- ---
----------------------------- --------------------
-------------- -- -
------------------------ ----------
--
------------ -- -
----------------------- -------
---这里的 Promise.race() 方法表示，我们同时发起两个 Promise 对象：一个是 sendMessagePromise，表示发送消息的 Promise 对象；另一个是 timeoutPromise，表示超时的 Promise 对象。如果 sendMessagePromise 在 5 秒钟之内没有返回结果，那么就会超时，同时 timeoutPromise 会触发一个错误并抛出。
示例代码
最后，让我们来看一下如何使用 message-channel-promise 来实现一个基本的例子：主窗口向子窗口发送一个消息，子窗口接收到消息并回复，主窗口接收回复消息。
主窗口代码
-- -------------------- ---- -------
-- ------- -------------- --
----- ------- - --- -----------------
----- -------------- - --- ----------------------- ----- ------------- ---
-- ------- -------------- ------ -------------------- --
--------------------------
---------------------------------- ----- -- -
-- ----------- -- --------------- --- ------- -
----- -------------- - --- ----------------------- ----- --------------- ---
----------------------------
-
---
----- -------- --------------------------- -
-------------------- -------------
--- -
----- -------- - ----- --------------------- ----- ------- ---
--------------------- ----------- ----------
- ----- ------- -
----------------------- -------
- ------- -
--------------------
-
-子窗口代码
-- -------------------- ---- -------
-- ------- -------------- ------ -------------------- --
---------------------------------- ----- -- -
-- ----------- -- --------------- --- ------- -
----- -------------- - --- ----------------------- ----- --------------- ---
----------------------------------------
-
---
-------- ---------------------- -
--------------------- ---------- ---------
----- -------- - - ----- ------- --
------------------------------
-以上代码示例中，主窗口会创建一个 MessageChannel 对象和一个 MessageChannelPromise 对象，并通过 window.postMessage() 方法向子窗口发送一个包含 port 属性的消息，以共享 MessageChannel 对象。然后，主窗口会调用 sendMessage() 函数，使用 channelPromise 对象发送一个 hello 消息到子窗口，并等待子窗口的回复。
子窗口则使用 window.addEventListener() 方法监听主窗口发送的消息，创建一个 MessageChannelPromise 对象，并通过 channelPromise.onMessage() 方法来监听消息。然后，它接收到主窗口发送的 hello 消息后，回复一个 world 消息到主窗口。
通过以上代码示例，我们可以清楚地了解到如何使用 message-channel-promise 来实现不同窗口之间的双向通信，并通过 Promise 风格的 API 来处理消息传递，从而提高了开发效率和代码可读性。
结论
本文介绍了如何使用 message-channel-promise 来实现不同窗口之间的双向通信，包括如何发送和接收消息，如何处理错误和超时，以及一些常见的示例。通过学习本文，你可以了解到如何使用 message-channel-promise 来简化 MessageChannel API 的使用，并提高开发效率和代码可读性。希望本文能对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b55