前端开发中，数据的实时同步更新是非常常见的需求，例如在聊天室、股票行情等应用场景中，需要展示实时的数据变化。本文将介绍如何使用 Server-Sent Events 技术实现数据的实时同步更新，并提供示例代码供大家参考。
什么是 Server-Sent Events
Server-Sent Events（以下简称 SSE）是一种基于 HTTP 协议的服务器推送技术，能够实现服务器向客户端持续地发送数据流，并通过 JavaScript 的 EventSource 接口监听接收到的数据。SSE 工作在长连接上，也就是说客户端与服务器建立一次连接，可以持续接收服务器端不断推送的数据。相较于 WebSocket，SSE 更加方便实现单向数据流的推送。
SSE 的实现
下面我们将会介绍如何使用 SSE 实现数据的实时同步更新。在服务端需要设置以下响应头：
Content-Type：text/event-stream Cache-Control：no-cache
其中，Content-Type 告诉浏览器返回的内容是 text/event-stream 类型的，Cache-Control 表示不缓存响应结果。然后，在服务端通过间隔的时间推送数据，例如：
data: {"name":"Tom","age":12}
id: 1
event: user-info上面是一个 SSE 的数据格式，其中，data 表示数据体，可以是任何合法的 JSON 字符串；id 表示当前 SSE 的序号；event 表示数据流的事件类型。在服务端通过推送相应的 SSE 数据，来实现数据的实时同步更新。在客户端通过 JavaScript 监听 EventSource 的 message 事件，并解析接收到的数据，即可实现数据的实时更新。例如：
const eventSource = new EventSource('/api/user');
eventSource.addEventListener('user-info', (event) => {
const data = JSON.parse(event.data);
// 更新数据...
});上面代码中，我们通过 EventSource 接口向 /api/user 的 SSE 接口建立连接并监听 user-info 类型的事件，当接收到消息时，我们将消息体通过 JSON.parse 解析为 JSON 对象，并进行数据的实时更新操作。
示例代码
前面我们已经了解了 SSE 的使用方式，下面我们来看一个完整的示例代码，使用 SSE 实现了一个简单的聊天室应用。服务端使用 Express 框架实现。
服务端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
-------------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
----------------
----- ----- - -------------- -- -
----- ---- - --- -------
----- ------- - ------------------------------------------------------------- ----- ------
----- -- - --- -----------------
----- ----- - ---------------
-------------- ----------
----------------- -------------
---------------- ---------------------------------
-- ------
--------------- -- -- -
---------------------
----------
---
---
---------------- -- -- -
------------------- -- ------- -- ------------------------
---我们通过 /api/chat 接口，返回 SSE 的数据流。当客户端连接到该接口时，服务端会开始定时发送 SSE 数据。当客户端关闭连接时，服务端也会停止 SSE 数据传输。
客户端代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- ---- ------------
-------
------
--- -----------------------
----- ------------------
------ ----------- ------------------ --
------- ---------------------------
-------
--------
----- ----------- - ----------------------------------------
----- ----------- - ----------------------------------------
----- ------------ - -----------------------------------------
----- ----------- - --- -------------------------
-------------------------------------------- ------- -- -
----- ---- - -----------------------
----- ------- - -----------------------------
------------------- - -----
----------------------------
---
-------------------------------------- ------- -- -
-----------------------
----- --- - --- -----------------
---------------- -----------------
------------------------------------ --------------------
----- ------- - ----------------
----- -------------------
----- --- ----------------
---
------------------
------------------ - ---
---
---------
-------
-------在客户端代码中，我们创建了一个聊天室的页面，其中包含一个消息列表和一个发送消息的表单。在载入页面时，我们通过 EventSource 接收 /api/chat 接口返回的 SSE 数据，并将接收到的消息添加到消息列表中。当用户发送消息时，我们通过 XMLHttpRequest 将消息发送到服务端，然后清空输入框中的文本。
总结
本文介绍了 SSE 技术的使用方法，并提供了一个简单的聊天室应用示例。SSE 技术能在保持连接的情况下实现数据流的持续传输，适用于数据实时推送的场景。在实现 SSE 时，服务端需要设置正确的响应头，客户端通过 EventSource 接收 SSE 数据，并通过解析数据实现数据的实时更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469a745968c7c53b0982848