前言
SSE（Server-Sent Events），即服务器推送事件，是一种在浏览器和服务器之间实现实时通信的技术。与 WebSocket 相比，SSE 更简单易用，适用于一些轻量级的实时通信场景。本文将介绍 SSE 技术的原理、实现方法以及示例代码。
原理
SSE 的原理是基于 HTTP 协议的长连接实现的。当浏览器向服务器发送 SSE 请求时，服务器会将连接保持打开，不会立即响应，而是在有新数据时通过这个连接向浏览器推送数据。浏览器接收到数据后，可以通过 JavaScript 处理并更新页面内容。
SSE 请求的格式如下：
GET /sse HTTP/1.1 Host: example.com Accept: text/event-stream
其中 Accept 头部指定了请求的类型为 text/event-stream，表示客户端希望接收服务器推送的事件流。
在服务器端，需要设置响应头部，告诉浏览器这是一个 SSE 响应：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive
其中 Content-Type 头部指定了响应的类型为 text/event-stream，Cache-Control 头部指定了不缓存响应，Connection 头部指定了保持连接不断开。
在 SSE 响应中，每个事件都由一个或多个字段组成，字段之间使用换行符 \n 分隔。事件的格式如下：
event: <event-name> data: <event-data>
其中 event 表示事件的名称，data 表示事件的数据。事件数据可以是任何字符串，但是需要注意的是，每个字段之间必须使用 \n 分隔，否则浏览器将无法正确解析事件数据。
实现方法
在 Node.js 中，可以使用 http 模块创建一个 SSE 服务器，示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
-- -------- --- ------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ------- - ------ ----- ----------------------------------
-------------------
-- ------
- ---- -
-------------------
----------
-
---
--------------------在这个示例中，我们创建了一个 HTTP 服务器，当客户端请求 /sse 路径时，服务器会返回一个 SSE 响应。响应中包含了一个每秒更新一次的时间事件，浏览器可以通过 JavaScript 处理这个事件，并更新页面内容。
在浏览器端，可以使用 EventSource 对象接收服务器推送的事件。示例代码如下：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', event => {
console.log(event.data);
});在这个示例中，我们创建了一个 EventSource 对象，指定了服务器的 SSE 路径 /sse。当服务器推送事件时，message 事件将被触发，我们可以通过 event.data 获取事件的数据，并进行相应的处理。
指导意义
SSE 技术可以帮助我们实现轻量级的实时通信，比如在线聊天、实时数据更新等。与 WebSocket 相比，SSE 更简单易用，不需要额外的协议和握手过程，但是也有一些缺点，比如只能从服务器向客户端推送数据，无法实现双向通信。
在使用 SSE 技术时，需要注意以下几点：
- SSE 请求必须使用
text/event-stream类型。 - SSE 响应必须设置正确的响应头部，包括
Content-Type、Cache-Control和Connection。 - 每个事件必须包含
event和data字段，并使用\n分隔。 - 在浏览器端，可以使用
EventSource对象接收服务器推送的事件。
结语
本文介绍了 SSE 技术的原理、实现方法以及示例代码。SSE 技术是一种简单易用的实时通信技术，适用于一些轻量级的实时通信场景。在使用 SSE 技术时，需要注意一些细节，以确保技术的正确使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3d3b5a941bf713473c2c1
