Server-Sent Events 是一种 Web 技术，它允许服务器向客户端发送实时事件。这些事件通常用于实时更新 Web 应用程序中的数据，例如聊天信息、股票价格、谷歌地图等。本文将介绍如何使用 JavaScript 处理多个 Server-Sent Events，并提供示例代码。
初始化 SSE
在处理 Server-Sent Events 前，我们需要初始化它。下面是一个基本的初始化代码：
const source = new EventSource('/events');
source.onmessage = function(event) {
console.log(event.data);
};这段代码创建了一个与服务器 '/events' 端点连接的 EventSource 对象。当服务器发送事件时，onmessage 回调会被触发，我们可以在该回调中处理事件。
处理多个事件
要处理多个事件，我们可以使用 event.type 属性，该属性包含服务器发送的事件名称。下面是一个示例代码：
-- -------------------- ---- ------- ----- ------ - --- ----------------------- ------------------------------- --------------- - ----------------------- ----------- --------- --- ---------------------------------- --------------- - ----------------------- ------------ --- -------------------------------- --------------- - ----------------------- ------------------ ---
该示例代码添加了三个事件监听器，分别监听 open、message 和 error 事件。当服务器连接成功时，open 事件被触发，并在控制台中输出连接成功信息。当服务器发送消息时，message 事件被触发，并输出服务器发送的消息。当连接出现错误时，error 事件被触发，并输出错误信息。
优化多个事件处理
上述代码可用，但在处理多个事件时会很混乱。我们可以将事件处理器移动到函数中，并根据事件名称调用相应函数。下面是优化后的代码：
-- -------------------- ---- -------
----- ------ - --- -----------------------
----- -------- - -
----- -- -- ----------------------- ---------
-------- ------ -- ------------------
------ ------------ -- -
----------------------- ------ -- ------------
---------------
-
--
--- ------ ----- -- --------- -
------------------------------ ------------- -
----- ------- - ----------------
--------------------
---
-该代码使用对象 handlers 表示每个事件的处理方法。使用 for...in 循环，通过 addEventListener 方法将每个事件的处理方法绑定到相应的事件上。
结论
通过上述代码，我们可以处理多个 Server-Sent Events，并保持代码简洁和可读性。当处理多个事件时，我们应该遵循最佳实践，将代码和逻辑结构化，以便于维护和扩展。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ea16fe884a3e30f28af9b