Server-Sent Events (SSE) 是一种基于 HTTP 的服务器推送技术，可以实现服务器向客户端推送事件的功能，而无需客户端不断地向服务器发送请求。这种技术在前端开发中非常有用，可以用于实时更新数据、发送通知等功能。
在本文中，我们将介绍如何使用 SSE 和 JavaScript 设置客户端连接，详细介绍 SSE 的工作原理和实现方式，并提供示例代码和实用技巧，帮助读者深入了解这种技术并应用于实际开发中。
SSE 的工作原理
SSE 基于 HTTP 协议，通过长连接实现服务器向客户端推送事件。与 WebSocket 不同的是，SSE 只支持从服务器到客户端的单向通信，客户端无法向服务器发送消息。
SSE 的消息格式为纯文本，可以是任何格式的文本数据，如 JSON、XML 等。服务器通过设置响应头 Content-Type 为 text/event-stream，并在消息前添加事件名称和数据字段，客户端通过监听事件名称和数据字段来接收消息。
SSE 的连接由客户端通过 JavaScript 中的 EventSource 对象创建，通过指定服务器 URL 和事件监听函数来建立连接。连接建立后，服务器将定期发送消息给客户端，客户端通过监听事件名称和数据字段来接收消息并进行处理。
使用 SSE 和 JavaScript 设置客户端连接
使用 SSE 和 JavaScript 设置客户端连接需要进行以下步骤：
- 在服务器端设置 SSE
服务器端需要设置响应头 Content-Type 为 text/event-stream，并在消息前添加事件名称和数据字段。以下是一个使用 Node.js 和 Express 框架实现 SSE 的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ----- ---- -- - ----------------------------- --------------------- ------------------------------ ------------ --------------------------- -------------- -------------- -- - ----- ---- - - -------- ------- ------- -- ----------------- ------------ ---------------- ------------------------------ -- ------ --- ---------------- -- -- ------------------- ------- -- ---- --------展开代码
在上面的代码中，我们使用 Express 框架创建了一个路由为 /sse 的 GET 请求处理函数，设置响应头 Content-Type 为 text/event-stream，Cache-Control 为 no-cache，Connection 为 keep-alive。然后我们使用 setInterval 定时向客户端推送消息，设置事件名称为 message，数据为一个包含 message 字段的 JSON 对象，并在每个消息后添加两个回车换行符，表示消息结束。
- 在客户端使用 SSE
客户端需要使用 JavaScript 中的 EventSource 对象创建 SSE 连接，并指定服务器 URL 和事件监听函数。以下是一个使用原生 JavaScript 实现 SSE 的示例代码：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ------- -- - ----- ---- - ----------------------- -------------------------- --- ------------------------------------- ------- -- - ------------------ -------- ------- ---展开代码
在上面的代码中，我们使用 EventSource 对象创建了一个 SSE 连接，指定服务器 URL 为 /sse，然后使用 addEventListener 方法监听事件名称为 message 的事件，将接收到的数据解析为 JSON 对象，并输出其中的 message 字段。我们还监听了 error 事件，用于处理连接错误。
实用技巧和指导意义
使用 SSE 和 JavaScript 设置客户端连接可以实现很多有用的功能，如实时更新数据、发送通知等。以下是一些实用技巧和指导意义：
- SSE 对服务器性能的影响较小，可以在一些需要实时更新数据的场景中使用，如聊天室、在线游戏等。
- SSE 的消息格式为纯文本，可以是任何格式的文本数据，但不支持二进制数据。
- SSE 只支持从服务器到客户端的单向通信，客户端无法向服务器发送消息，如果需要双向通信，可以考虑使用 WebSocket。
- SSE 可以使用 EventSource 对象的 close 方法关闭连接，也可以在服务器端使用 res.end() 方法关闭连接。
- SSE 的连接可以通过设置响应头 Retry-After 来控制客户端重新连接的时间间隔。
总之，使用 SSE 和 JavaScript 设置客户端连接可以帮助我们实现实时更新数据、发送通知等功能，提高用户体验和应用性能。希望本文能够帮助读者深入了解 SSE 技术，并在实际开发中应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67863c834083a4caeeed492e
