在现代 Web 应用程序中，实时数据传输变得越来越常见和重要。而传统的 HTTP 请求和响应模型无法满足实时数据传输的需求。为了解决这个问题，浏览器推出了多种实现方案，其中 Server-Sent Events（通常缩写为 SSE）就是一种不错的选择。
什么是 Server-Sent Events？
Server-Sent Events 是一种建立在 HTTP 协议上的实时单向数据传输机制。也就是说，浏览器向服务器发送一个 HTTP 请求，但是服务器会保持连接打开，并且在必要时将数据推送到浏览器，直到关闭连接为止。
SSE 协议特别适合发送不间断、长期存在，并且需要实时接收的数据，例如天气预报、股票市场信息或聊天消息等。
如何使用 Server-Sent Events？
使用 SSE 协议需要在客户端和服务器端分别实现一些代码。下面是一个简单的例子，演示如何使用 SSE 向客户端发送当前时间戳。
服务器端代码
-- -------------------- ---- -------
-- -- ---- --
----- ---- - ----------------
------------------------------- ---- -
-- -----
------------------ -
--------------- -------------------- -- -- ------------ - -----------------
---------------- -----------
------------- -------------
---
-- ----------
----- ---------- - -------------- -- -
----- ---- - ------ -------------------
----------------
-- ------
-- --------
--------------- ---------- -
--------------------------
----------
---
----------------客户端代码
const evtSource = new EventSource('http://localhost:8080');
evtSource.onmessage = function(event) {
console.log(event.data); // 打印收到的消息
};在客户端使用 EventSource 类连接服务器，并通过监听 onmessage 事件接收数据。此时，客户端会在控制台输出当前时间戳，每秒钟更新一次。
Server-Sent Events 的优势
SSE 协议相对于传统的轮询和 WebSocket 方案具有以下优势：
传输效率高：由于 SSE 协议使用 HTTP 协议进行通信，因此不存在握手阶段和头部大小的问题。同时也不存在大量开销来维护连接状态。这使得 SSE 在数据大小较小且传输实时性要求较高时具有显著的优势。
接口简单易用：相比 WebSocket 方案需要客户端和服务器端互相发送挥手（handshake）请求和响应、心跳包等控制命令来维护连接，SSE 只需要保持一个单向的流通道即可。这使得 SSE 在实现和使用方面要比 WebSocket 简洁得多。
稳定和安全：SSE 协议建立的是基于 HTTP 的长连接，不易造成因连接状态而引起的问题。同时，由于 SSE 只是单向流通，不涉及双向数据传输和任意数据交换等敏感信息，因此对攻击和安全方面的考虑要少得多。
如何结合 SSE 和现有技术提升 Web 性能？
通过 SSE 协议可以实现以下场景，增强 Web 应用程序的性能和用户体验。
实时数据推送：在海量数据处理中，传统的请求与响应方式常常会出现延迟较高的情况。但是使用 SSE 协议可以实现实时数据的推送，让数据更新更加及时，响应速度更快。
可以应对网络较差的应用程序：当客户端的网络环境不稳定时，请求很可能会失败或耗费大量的时间，而使用 SSE 协议能够让数据实时地到达终端用户，尽可能减少网络问题的出现。
减小服务器压力：使用 SSE 协议能够省去传统的请求和响应方式的请求开销，减少服务器资源占用和内存开销。
总结
SSE 协议是一种简单、高效和易用的实时数据推送协议，提供了一种优秀的方案来传输实时数据和推送通知。使用 SSE 协议可以改善 Web 应用程序的性能和用户体验，例如实时数据推送、网络慢的应用程序，以及降低服务器压力等。
有关 SSE 协议的文档和 API 可以查看 MDN 文档。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64885e0448841e98946de5f0