SSE（Server-sent Events）指的是一种浏览器与服务器间实现持续、单向、基于 HTTP 的多个事件流传输的技术方案。这种技术顾名思义，是服务器端向客户端推送事件通知，而这些事件通知可以是任何形式，如 HTML、XML、JSON 等格式。而实现 SSE 的核心技术是 EventSource 对象和 server-sent event 开头的 HTTP 响应头。
相较于传统的 HTTP 请求响应模型，SSE 有以下几个优势：
支持服务器端向客户端进行实时消息推送：相比起客户端轮询，SSE 不需要客户端不断的向服务器发送请求来获取最新数据，而是通过单个 HTTP 请求建立长连接，服务器端持续向客户端发送最新数据，从而实现消息推送的目的。这样能够极大的减轻客户端和服务端的压力，降低延迟的同时，还能够有效的提升应用的实时性和可用性。
实现更高效的数据传输：SSE 协议与 WebSocket 协议是一同出现的，但相对来说 SSE 协议在通讯质量上会比 WebSocket 稍差一些。但是 SSE 协议仍然能够实现更加高效的数据传输，数据传输时可以使用 gzip 压缩，减小数据包大小，从而减小带宽消耗和传输时间。
编码更加简单：SSE 协议使用 XMLHttpRequest 对象发送 GET 请求，同时支持 onopen 、onmessage 、onerror 等事件监听，这样做的好处是无需引入额外的库和插件。
兼容性：目前，SSE 协议已经被众多的主流浏览器支持，如 Chrome、Edge、Firefox、Safari 等。
下面是一个使用 SSE 技术实现的简单示例代码：
服务器端代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----------------------- ---- -- - ------------------ - --------------- -------------------- ---------------- ----------- ------------- ------------- ------------------------------ --- --- --- ------- - -- -------------- -- - -------------- ------------------ ----------------- ----------------------------------- ---------- -- ------ ----------------展开代码
上述代码中，通过 Node.js 的 http 模块实现了一个 HTTP 服务器，并设置响应头：Content-Type 设置为 text/event-stream 类型，Cache-Control 设置为 no-cache，Connection 设置为 keep-alive。同时也设置了 Access-Control-Allow-Origin 为 *，以便实现跨域请求。内部循环调用 setInterval 方法，向客户端推送实时数据，这里为了测试，仅仅将服务器端当前时间推送给客户端。SSD 响应数据通过使用特殊的格式，每行以冒号分隔，其中 event 表示为一个自定义的事件名称，data 存放实时推送的数据内容，id 表示每个事件的 ID，每个事件之间以两个换行符分隔（'\n\n'）。
客户端代码：
-- -------------------- ---- ------- ----- --- - --- -------------------------------------- ---------- - ---------- - ----------------------- ----- - ------------- - --------------- - ------------------------ - ----------- - --------------- - --------------------- ------- -展开代码
上述代码中，使用 EventSource 构造函数建立了 SSE 连接，并传入服务器端的地址。同时对事件的种类进行监听，onopen 对应的是服务器连接成功的事件，onmessage 则表示接收到服务器端发送的推送数据，最后的 onerror 则用来处理连接错误的情况。当 SSE 连接建立后，服务器端每次发送消息都会推送到 onmessage 事件中，客户端接收到的内容与服务器端发送的格式一致，可以使用 JSON 格式进行解析。可根据具体情况进行相应的数据处理及渲染操作。
总之，SSE 技术给前端开发带来了很多便捷，可以实现及时更新数据，大幅度提高应用程序的实时性，同时也解决了长轮询带来的拖慢性能的问题，是一种非常实用的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6abb3a941bf7134c74571
