在前端开发中，实时数据更新是非常常见的需求。例如，股票行情、聊天室消息等实时推送数据，需要用到一种技术来实现。传统的做法是使用轮询或长轮询技术，但这种技术不太友好，因为它需要不断向服务器发送请求，造成额外的通信负担。而 Server-Sent Events 技术则是一种更为高效和友好的实现方式，本文将会对其底层协议进行详细介绍。
Server-Sent Events 简介
Server-Sent Events，简称 SSE，是一种 HTML5 技术，它允许浏览器与服务器建立一条持久连接，服务器可以在任意时间向浏览器推送数据。通过 SSE，服务器可以主动将数据推送给客户端，而不需要客户端不断地向服务器拉取数据。这种技术为实现实时通信提供了一种较为简单和高效的解决方案。
在 SSE 技术中，客户端使用 EventSource 对象来接收服务器推送的数据，而服务器使用 text/event-stream 格式来传递数据给客户端。下面我们来详细介绍这种格式。
text/event-stream格式
SSE 数据的传递使用的是纯文本格式，即 text/event-stream 格式。下面是这种格式的一些特点和规则：
text/event-stream格式是一种流式传输的文本格式，它支持多种命令和数据类型。- 每一条 SSE 数据包由多个字段组成，字段之间使用
\n（换行符）来分隔。 - 每一条 SSE 数据包的第一行是
event字段，表示该条数据的事件类型。 - 每一条 SSE 数据包在
event字段后可以跟多个以data字段为开头的数据字段。 id字段用于标识 SSE 数据包。该字段可以用于去重，如果客户端重新连接，服务器会根据id字段自动去重并发送最后一个新数据。
下面是一个 SSE 数据包的示例：
event: my_event
data: {"name": "张三", "age": 30}
可以看到，该事件类型为 my_event，数据为一个 JSON 对象。
SSE 协议实现示例
下面我们来看一个实现 SSE 的示例。这里我们使用 Node.js 进行实现，代码如下：
-- -------------------- ---- -------
---- --------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
---------------- - - --- ------ - --------
-- ------
- ---- -
------------------ ---------------- --------------
------------------------------- ----------------------------------- ----------------------- ------ - --- --------------------------------------- - --------------- ------------------------ -- ---------- - ----------------------------------
-
---
--------------------
------------------- ------- -- ------------------------在这个示例中，我们创建一个服务器，监听在 3000 端口。访问根路由时会返回一个简单的 HTML 页面，页面会通过 EventSource 对象监听 '/stream' 路由。在 '/stream' 路由中，我们使用了一个定时器，每隔一秒钟向客户端推送当前时间。
总结
Server-Sent Events 是一种高效和友好的实现实时通信的技术，它使用简单、易懂，在实际应用中也比较广泛。本文通过介绍 SSE 的底层协议和一个实现示例，希望读者可以更好地理解 SSE 技术，并在实际项目中运用到 SSE 技术中，实现更加高效的实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b6e96968c7c53b0abe524