前言
在 Web 应用时代，前后端分离是前端开发变得更加重要的一个趋势。服务器推送技术也得到了快速发展，其中 Server-Sent Events (SSE) 技术被越来越广泛地应用在前端的开发中。
通过 SSE，服务器可以向前端的客户端推送实时数据，而无需客户端做出轮询请求。这使得 SSE 成为开发实时通信、动态监控、实时更新等应用的首选解决方案。
但是，在某些情况下，我们需要同时从多个数据源获取数据。那么如何才能在前端中优雅地处理来自多个数据源的 SSE 数据呢？下面，本文将介绍多种处理 SSE 多数据源的方法。
SSE 概述
Server-Sent Events (SSE) 是一种允许服务器向客户端推送实时数据的技术。这种技术通过 HTML5 的 EventSource API 直接让浏览器与服务器之间建立一个持久化的连接，推送消息时直接在这个连接上发送数据。
SSE 的推送数据格式是由上报事件名称和数据字段组成的，示例代码如下：
data: {"event":"update", "data": {"username":"Lily", "age":26}}
其中，data 表示 SSE 的数据字段，可以是字符串、JSON、XML 等格式，且必须以冒号开头、换行符结尾。event 表示 SSE 上报事件名称，可以自定义。
多数据源处理方法
方法一：使用多个 EventSource 对象
SSE 技术允许同时与多个 SSE 服务器建立连接，当然我们也可以为每个 SSE 数据源都分别创建一个 EventSource 对象。每个 SSE 数据源更新时，都将推送数据到相应的 EventSource 对象。
示例代码如下：
-- -------------------- ---- ------- ----- ------- - --- --------------------- ----- ------- - --- --------------------- ----------------- - --------------- - -- --------- --- -- ------------------------ - ----------------- - --------------- - -- --------- --- -- ------------------------ -
使用多个 EventSource 对象的方法比较简单，但是随着 SSE 数据源的增加，也会创建越来越多的 EventSource 对象，造成代码冗长和复杂度提高。
方法二：使用 event.data.origin 判断 SSE 数据源
SSE 推送的数据包含一个 event.data.origin 字段，用于标识 SSE 数据的来源，我们可以通过该字段判断 SSE 数据源。
示例代码如下：
-- -------------------- ---- -------
----- ------ - --- --------------------
---------------- - --------------- -
-- ------------------ --- ------------------ -
-- ---- --- --- - - --- --
------------------------
- ---- -- ------------------ --- ------------------ -
-- ---- --- --- - - --- --
------------------------
-
-
使用 event.data.origin 字段可以较为简单地判断 SSE 数据源，但需要在 SSE 数据源中定义不同的 origin 字段，否则会失去效果。
方法三：使用 SSE 代理
SSE 代理是在服务器端建立与所有 SSE 数据源之间的连接，然后将所有 SSE 数据推送到客户端的一种方式。这种方式可以避免客户端与多个 SSE 服务器解耦，只需要与 SSE 代理建立一个连接就可以接收所有 SSE 数据。
示例代码如下：
const source = new EventSource('/sse-proxy');
source.onmessage = function(event) {
// 处理 SSE 数据
console.log(event.data);
}
在这个示例中，我们只需要与 SSE 代理建立一个连接，然后就可以接收所有 SSE 数据源的数据。但是，需要在服务器端实现 SSE 代理，并对 SSE 数据进行分类。
总结
在前端应用中，SSE 技术可以帮助我们在不断更新的数据场景中构建实时通信、动态监控和实时更新功能。SSE 数据源的处理方法也有多种，主要包括使用多个 EventSource 对象、使用 event.data.origin 判断 SSE 数据源和使用 SSE 代理。这些方法都有不同的优点和缺点，根据实际场景选择合适的方法可以使代码更加简洁、高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e038a2f6b2d6eab3b4c406