在前端开发中，我们经常需要实现不同组件之间的通信。而传统的跨组件通信方法如 Redux、Event Bus 等等，不仅需要引入多余的库，而且会增加程序的复杂度。本文将向你介绍使用 Custom Elements 和 Web Sockets 实现实时组件通信方法，不仅简单易懂，而且还能提高程序的响应速度。
Custom Elements
Custom Elements 是 Web Components 中的一种。Web Components 是提供一种组件化的方式，使得我们可以封装自定义元素，以便在 다른 프로그램이나 DOM 中使用。
Web Components 由 3 个不同的技术组成：custom elements、shadow DOM 和 HTML Templates。
Custom Elements 通过在 Document 中注册自定义元素，为我们提供了一种封装、重用和扩展 HTML 元素的方式。我们可以使用以下方法注册自定义元素：
var element = document.registerElement('my-element');
这样，我们就成功地创建了一个名为 my-element 的自定义元素。
接下来，我们需要定义这个自定义元素的规则，对于 Custom Elements，我们可以对其进行扩展，比如添加自定义属性、操作 dom，等等。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- - ------------------- - -------------- - ---------- ------------ - - ----------------------------------- -----------展开代码
上述代码中的 MyElement 就成为了一个自定义元素，并可以在 HTML 页面中以以下方式调用：
<my-element></my-element>这样就实现了一个极其简单的自定义元素。
Web Sockets
Web Sockets 是一种全双工通信协议，它是浏览器和服务器之间的长连接通信，用于在浏览器和服务器之间发送实时信息。Web Sockets 目前被广泛应用于网页即时通讯等场景，并逐渐成为前端开发领域的重要技术。
使用 Web Sockets 建立带有 Web Sockets 的服务器只需要几行代码。
-- -------------------- ---- ------- ----- --------- - -------------- ----- --- - --- ------------------ ----- ---- --- -------------------- -------- -------------- - ---------------------- -- ------------ ---------------- -------- ----------------- - ---------------------- ---- --------- --- -------------- ---------- - ---------------------- -- --------- --- ---展开代码
如上所述，我们打开了一个新的 WebSocket 服务器，并在 connection 上进行监听。一旦有新连接接入，我们就会收到 connection 事件。
当我们要传输消息时，我们可以使用以下代码 将消息发送到服务器。
ws.send('Hello, server!');
当 WebSocket 服务器的内部发生错误时，我们可以通过以下代码来处理。
wss.on('error', function(error) { console.log('An error occurred: %s', error); });
使用 Custom Elements 和 Web Sockets 进行实时组件通信
有了 Custom Elements 和 Web Sockets 的基础，我们就可以将它们结合起来，使不同的自定义元素可以实时通信。我们准备将所有自定义元素通信的过程封装到一个名为 WebSocketElement 的类中。
-- -------------------- ---- ------- ----- ---------------- ------- ----------- - ------------- - -------- --------------- - --- --------------------------------- ------------------------- - -------------------------- - ---------------- - ----- ---- - ----------------------- -- --------------- --- ---------------------------- - ------- - ----- ------- - --- ---------------------- - ------- ------------ -------- ---- --- ---------------------------- - ----------------- ------- - ----- ---- - - ----- ------- ---------- --------------------------- -- ----- ---- - --------------------- --------------------------- - ------------------- - ----------------------------------------------------------- -- -- - --------------------------- --- - - ----------------------------------- ------------------展开代码
上述代码中，我们使用 WebSocket 建立连接，并在 onMessage 中监听事件的到达。我们使用以下格式将消息接收到目标自定义元素中：
{ "type": "eventType", "detail": { // 自定义数据 }, "component": "componentName" }
其中，componentName 是发送事件的自定义元素的标签名称。
在自定义元素中，我们如下使用 WebSocketElement。
-- -------------------- ---- ------- ----- ----------------- ------- ----------- - ------------- - -------- ------------------------------- ------------------------ - ------------- - -- ----- - ------------------- - -------------- - - ------- ---------------------------------- -- - - ------------------------------------------- -------------------展开代码
通过以上代码，我们定义了一个 UpdateableElement，它对 update 事件进行监听，并实现了 update 方法。每当用 WebSocket 发送消息，目标自定义元素接收到消息并触发对应事件时，我们就可以在 UpdateableElement 中处理数据了。
示例代码
以上就是使用 Custom Elements 和 Web Sockets 实现实时组件通信的方法，我们通过 WebSocket 的长连接及自定义元素的灵活性，实现了简便易行的跨组件通信方案。
示例代码可以从我们的 Github 仓库中获得：
https://github.com/frontendweekly/front-end-article/tree/main/real-time-component-communication
希望这篇文章对你有所帮助，感谢你的阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c257b4314edc2684b825a6
