简介
SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，它允许服务器向客户端推送数据，而不需要客户端发起请求。SSE 可以用于实时通知、实时数据更新等场景，比如聊天室、股票价格实时更新等。
SSE 使用简单，只需要使用浏览器内置的 EventSource 对象即可接收服务器推送的数据。但在实际应用中，我们还需要了解请求以及响应头中的 SSE 信息，以更好地理解 SSE 的原理和使用方式。
请求头中的 SSE 信息
在客户端发起 SSE 请求时，需要在请求头中添加 Accept 和 Cache-Control 两个字段，示例代码如下：
----- ----------- - --- ------------------- -
-------- -
------- --------------------
---------------- ----------
-
---其中，Accept 字段指定了客户端接收的数据类型，必须设置为 text/event-stream。Cache-Control 字段指定了客户端是否应该缓存响应，必须设置为 no-cache。
响应头中的 SSE 信息
在服务器端响应 SSE 数据时，需要在响应头中添加 Content-Type 和 Cache-Control 两个字段，示例代码如下：
------------------ - --------------- -------------------- ---------------- ---------- ---
其中，Content-Type 字段指定了响应的数据类型，必须设置为 text/event-stream。Cache-Control 字段同样指定了客户端是否应该缓存响应，必须设置为 no-cache。
除此之外，响应头中还可以添加其他的 SSE 信息，比如 Last-Event-ID 和 Retry 等。其中，Last-Event-ID 字段用于指定客户端最后一次接收到的事件 ID，以便服务器从该 ID 继续推送数据。Retry 字段用于指定客户端在重新连接时的重试时间间隔。
示例代码
下面是一个简单的 SSE 示例代码，它使用 Express 框架和 Node.js 实现了一个简单的 SSE 服务器：
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- ----------
---
--- -- - --
-------------- -- -
-------------- ----------
---------------- ----- ----------------------------
-----
-- ------
---
---------------- -- -- ---------------- ------ -----------客户端代码如下：
----- ----------- - --- ------------------- -
-------- -
------- --------------------
---------------- ----------
-
---
--------------------------------------- ----- -- -
------------------------
---在客户端运行代码后，可以在控制台中看到每秒钟输出一条时间信息。这是因为服务器每秒钟推送一次数据，客户端使用 EventSource 对象接收数据并输出到控制台中。
总结
SSE 是一种基于 HTTP 的服务器推送技术，适用于实时通知、实时数据更新等场景。在使用 SSE 时，需要了解请求以及响应头中的 SSE 信息，以更好地理解 SSE 的原理和使用方式。本文介绍了请求头中的 Accept 和 Cache-Control 字段，以及响应头中的 Content-Type 和 Cache-Control 字段。同时，还给出了一个简单的 SSE 示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66383cc4d3423812e4640068