前言
在前端开发中，更新数据是非常常见的需求。而传统的 Ajax 方式通常需要客户端不断轮询或请求服务器数据，这可能会导致不必要的轮询和服务器负担，同时也不太友好。而 Server-Sent Events 技术则可以解决这个问题。
Server-Sent Events 是一种向客户端推送一个数据流的技术。它允许浏览器与服务器建立一种先进的长连接，并通过这个连接不断地将数据推送到浏览器。这种推送模式可以减少不必要的数据请求和服务器负荷，更加友好地更新数据。
本文将介绍 Server-Sent Events 技术的基本原理和使用方法，并提供一个完整的示例代码以供参考。
基本原理
Server-Sent Events 基于 HTTP 协议，并与 WebSocket 类似，采用长连接进行数据传输。相比 WebSocket，Server-Sent Events 更加轻量级，并且不需要像 WebSocket 那样复杂的协议处理。
在 Server-Sent Events 中，客户端通过创建一个 EventSource 实例建立连接，然后注册一个回调函数来处理从服务器推送过来的数据。服务器则通过发送一段特定格式的数据流（text/event-stream）来与客户端通信。客户端接收到数据后，即可根据数据内容更新页面上的内容。
下面是一个典型的 Server-Sent Events 数据流的格式：
event: event_name\n data: event_data\n\n
其中，event_name 表示事件名称，可以为空；event_data 表示此事件携带的数据。每行数据以 \n 结尾，数据结尾需要添加一个空白行（\n\n），这是规定的格式。
客户端使用 EventSource 接口来建立长连接并获取数据，代码如下：
const eventSource = new EventSource(url);
eventSource.addEventListener('event_name', (event) => {
const data = event.data;
// 处理数据
});eventSource 是 EventSource 实例，url 是服务器端推送数据的 URL 地址。当服务器发送一条数据流时，会触发一个包含数据信息的事件，这里的 event_name 与服务器端的数据流中的 event_name 相对应。这样客户端就可根据 event_name 处理不同的数据。
示例代码
下面我们提供一个示例代码，以便读者更好地理解 Server-Sent Events 的基本用法。
服务器端代码
-- -------------------- ---- -------
----- ---- - ----------------
----- -- - --------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
----- ------------ - -- -- ------------------------ - -----
-------------- -- -
----- ---- - ------- -------- ----- -----------------------
----------------
-- ------
- ---- -
------------------ - --------------- ----------- ---
----- ---- - ------------------------------- --------
--------------
-
---
------------------- -- -- -
------------------- ------- -- ------------------------
---这是一个简单的 Node.js HTTP 服务器，它提供了一个名为 /event-stream 的 URL，用于发送 Server-Sent Events 数据流。在这个例子中，服务器每隔 1 秒钟向客户端发送一条随机数数据，客户端可以根据这些数据更新页面上的内容。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ----------
-------
------
---- -------------------------
-------
--------
----- ----------- - --- -----------------------------
-------------------------------------- ------- -- -
----- ---- - -----------
----- ------------ - -----------------------------------------
---------------------- - -----
---
---------
-------这是一个简单的 HTML 页面，它引用了一个名为 /event-stream 的 Server-Sent Events URL，并监听 random 事件。当事件发生时，客户端会将页面上 id 为 random-number 的元素的数据更新为服务器推送的最新数据。
总结
在本文中，我们简要介绍了 Server-Sent Events 技术，并提供了一个基本的示例代码。Server-Sent Events 可以解决传统 Ajax 方式的长轮询和服务器负载问题，可以更加友好地更新数据，也更加轻量级和易于实现。
当然，Server-Sent Events 也有其局限性，例如无法支持双向通信、不同浏览器的实现有所差异等。但总的来说，它是一种非常实用的技术，值得前端工程师了解和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650028d195b1f8cacde5af91