在现代的前端应用程序中，实时更新的功能已经成为标配。使用 Server-sent Events（SSE）技术，我们可以从服务器实现实时更新，而不需要使用 WebSocket 或其他第三方库。本文将详细介绍如何使用 SSE 技术来支持多个数据源的实时更新功能，并提供示例代码。
什么是 Server-sent Events？
Server-sent Events 是一种 Web API，它允许浏览器从服务器获取实时更新。该 API 遵循简单的“请求-响应”模型，其中浏览器仅发送一个 HTTP 请求，而服务器可以不间断地向浏览器发送消息。
SSE 是不需要第三方库的纯浏览器技术，它比传统的轮询技术更加高效，因为它具有以下优势：
- 节省带宽
- 提高响应速度
- 在服务器和浏览器之间保持连接
多数据源的实时更新功能
现代的前端应用程序通常需要从多个数据源获取实时更新，这可能包括来自多个 API 端点的更新，数据库更新等。SSE 技术可以方便地处理这种情况，并且可以从多个数据源发送更新。
前端实现
在前端，我们可以通过创建多个 EventSource 实例来监听多个数据源并接收实时更新。我们可以使用以下 JavaScript 代码实现多个 EventSource 实例：
-- -------------------- ---- ------- ----- --------- - --- ------------------------------ ----- --------- - --- ------------------------------ ------------------- - ------- -- - --------------------- ------ ---- ------------ ------------ - ------------------- - ------- -- - --------------------- ------ ---- ------------ ------------ -
上述代码创建了两个 EventSource 实例，并通过两个不同的 API 端点监听实时更新。每当浏览器从服务器接收到更新时，它会触发 onmessage 事件，并在控制台中打印更新消息。
后端实现
在服务器端，我们需要在多个端点上配置 SSE 以便从多个数据源发送实时更新。下面是一个使用 Node.js/Express 框架编写的简单的 SSE 端点示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----------------
------------------------- ----- ---- -- -
---------
---------------- -----------
--------------- -------------------
---
-------------------
-------------- -- -
----- --------- - ------------------------ - -----
---------------- ---------------------------------
-- ------
---
------------------------- ----- ---- -- -
---------
---------------- -----------
--------------- -------------------
---
-------------------
-------------- -- -
----- --------- - ------------------------ - -----
---------------- ---------------------------------
-- ------
---
---------------- -- -- ------------------- -----------上述代码在两个不同的端点 /api/endpoint1 和 /api/endpoint2 上向客户端发送实时更新。在每个端点上，我们都设置了一个 setInterval() 定时器，它会定期向客户端发送随机数作为更新消息。
需要注意的是，我们在每个端点的响应头中设置了 Cache-Control: no-cache，这是为了确保客户端不会缓存 SSE 响应。
总结
Server-sent Events 技术为前端应用程序提供了一种简单并且高效的实现多个数据源的实时更新功能。通过使用 SSE，我们可以从服务端获取来自多个数据源的实时更新消息，而不需要使用其他第三方库。
在这篇文章中，我们提供了一个简单的 SSE 端点示例，并展示了如何从多个数据源接收实时更新消息。如果你正在构建实时更新的应用程序，SSE 技术是不错的选择之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ec40b48841e9894b4b2d2