在前端 Web 应用开发中，随着技术的不断发展和更新，我们经常会面临一些复杂的通讯场景。为了解决这些问题，我们可以使用 npm 上的很多开源库进行辅助开发。其中，simple-message-channels 是一个非常实用的 npm 包，它提供了一种简单而且高效的消息传递机制，易于使用且功能强大。
安装
在 terminal 输入以下命令即可安装 simple-message-channels 包：
npm install simple-message-channels --save
使用场景
simple-message-channels 可以应用于任何需要在 Web 页面中进行通讯的场景，例如：多个浏览器 Tab 之间通讯、Web 应用程序不同页面之间通讯、跨域窗口通讯、与 iframe 內嵌网页通讯等。
使用方法
创建通道对象
在你的 JavaScript 文件中，首先需要实例化一个通道对象。你可以将通道对象简单地看作是一个用于接收和发送消息的容器。
import { createChannel } from ‘simple-message-channels’;
const channel = createChannel(‘channel_name’);createChannel 函数创建了一个新的通道对象，并且给该通道对象指定了名字为 'channel_name'。在使用这个通道对象之前，我们需要先给它添加消息监听器和发送消息的方法。
监听消息
以下代码演示了如何在通道对象上添加一个名为 'message' 的事件监听器，并且在接收到该事件后输出消息的内容。
channel.on('message', (data) => {
console.log('收到的消息内容是', data);
});发送消息
以下代码演示了如何使用 send 方法将消息发送到 'channel_name' 通道中。
channel.send('message', 'Hello World');在这段代码中，'message' 是指你发送消息的类型，'Hello World' 是你要发送到 'message' 类型的消息内容。
移除消息监听器
如果你不想再接收某种类型的消息了，你可以使用 off 方法将相应的事件监听器从通道对象中移除。
以下代码演示了如何移除 'message' 类型的事件监听器：
const listener = channel.on('message', (data) => {
console.log('收到的消息内容是', data);
});
channel.off(listener);销毁通道对象
最后，如果你不再需要某个通道对象，你可以使用 destroy 方法进行销毁。
以下是如何销毁 'channel_name' 通道的示例代码：
channel.destroy();
完整示例
以下是一个完整的示例代码，该代码演示了我们如何在不同的 Web 页面中使用简单消息通道。
首页（index.html）
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
-------
------
--------- ---------
------- ----------------------- ------- -- ----- -------------
------- --------------------------- ------- -- ----- ------------
------- ------------------------
-------
-------index.js
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-- ------ --------- -----
----- ------- - -------------------------
-- ----- --------- -- --------- -----
--------------------- ------ -- -
----------------------- ------
---
-- -- ---------- ----
------------------------------------------------------------------ -- -- -
--------------------------- ----------
---
-- -- ------ ----- ---- ----
---------------------------------------------------------------------- -- -- -
----------------------- ------ --------
---child.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------
-------
------
--------- ---------
------- ------------------------ ------- -- ------ -------------
------- ------------------------
-------
-------child.js
-- -------------------- ---- -------
------ - ------------- - ---- --------------------------
-- ------ --------- -----
----- ------- - -------------------------
-- ----- --------- -- --------- -----
--------------------- ------ -- -
----------------------- ------
---
-- -- ---------- ----
------------------------------------------------------------------- -- -- -
----------------------- ------ --------
---总结
通过使用简单消息通道，我们能够实现不同 Web 页面之间的通讯。simple-message-channels 的使用也非常简单，只需要几行代码就能轻松地创建通道对象、添加事件监听器以及发送消息。希望这篇文章能够帮助你更好地理解和应用 simple-message-channels 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaba3b5cbfe1ea06107ff