随着 Web 技术的不断发展，实时性的需求也越来越强烈。在传统的 Web 应用中，浏览器和服务器之间的通信是通过轮询和长轮询实现的。这些技术虽然能够实现实时性的通知，但是也存在一些问题，比如网络延迟、浪费带宽等。HTML5 中的 Server-sent Events 就是为了解决这些问题而诞生的一种新型的推送技术。
什么是 Server-sent Events
Server-sent Events（SSE）是一种在浏览器和服务器之间进行异步通信的技术。与传统的轮询和长轮询不同，SSE 使用了 HTTP 协议的长连接机制，实现了服务器向客户端单向推送数据的功能。
SSE 的推送过程是这样的：当客户端发起 SSE 连接后，服务器可以随时向客户端发送事件，这些事件是通过 HTTP 规范中的流技术实现的。与传统的 HTTP 请求返回的数据不同，SSE 是一种持续的数据流，没有固定的数据大小和格式。
如何使用 Server-sent Events
要使用 SSE，需要在服务器端和客户端都进行相应的配置。
服务器端配置
在服务器端，需要设置让 SSE 请求时返回正确的 Content-Type 头，并且开启连接保持。以下是一个 Node.js 的 SSE 服务端示例代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - -- -- ------------ - ------------------------ --- --- ------------------ - --------------- -------------------- ---------------- ----------- -- ------- ------------- ------------ -- ------ --- -- -------- --- -- ---------------- ----------- ------ --------------- -- ------------- --- -- ---------------------- - ---------------- ----------- ------ --------------- -- ------ --------------- -- -- - ---------------- ------ -- ------- -- ---- ------- ---展开代码
上面的代码使用了 Node.js 的 http 模块来创建一个 SSE 服务端。在响应头中设置了正确的 Content-Type，Cache-Control 和 Connection，保证了 SSE 的正常运行。在 res.write 中写入的数据格式是一个 JSON 的字符串，表示向客户端发送的数据。
客户端配置
在客户端，需要使用 JavaScript 来建立 SSE 连接。以下是一个 JavaScript SSE 客户端示例代码：
-- -------------------- ---- ------- ----- ------ - --- -------------------- -- -- ------- ------------- ---------------------------------- --------------- - -------------------- ---------- ------------ --- -- -- ----- --------- -------------------------------- --------------- - --------------------- ------- ---展开代码
上面的代码中，我们首先创建了一个 EventSource 对象，传入 SSE 服务端的 URL。然后通过 addEventListener 方法监听 message 事件，接收服务端传过来的数据。当服务端发生错误时，会触发 error 事件。
SSE 的优点和限制
SSE 技术相较于传统的轮询和长轮询，具有以下优点：
- 减少了网络流量，提高了应用的性能和速度。
- 只需要维护一个长连接，减少了服务器的负载。
- 实时推送可以更好的满足应用的实时性需求。
但是 SSE 技术也存在一些限制：
- SSE 只支持单向推送，也就是只能由服务器向客户端推送数据。如果需要双向通信，还需要额外的技术支持。
- SSE 唯一的传输方式是基于 HTTP，因此不支持 TCP 和 UDP 协议。
- SSE 支持度不是很好，一些老旧的浏览器和系统可能不支持该技术。
结束语
Server-sent Events 技术是一种简单、高效的实时推送技术。它通过基于 HTTP 的流机制，实现了服务器向客户端单向推送数据的功能。在开发实时应用时，可以考虑使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4213a6e1fc40e36cfbb6b
