前言
现代 Web 应用往往涉及到不同的浏览器端和服务端之间的状态同步问题。例如聊天应用需要在客户端和服务端之间持续传递消息状态，实时地更新聊天室或聊天联线；或者协同编辑应用需要客户端间同步文档状态，保证多个用户同时编辑文档时的一致性等等。这些应用场景如果要使用传统的异步轮询或长轮询技术来实现状态同步则会带来网络负担和性能问题，延迟也无法保证，我们需要一种更有效、实时的解决方案。
本文将介绍一种新的状态同步技术：Server-Sent Events（即服务端推送事件，下文简称 SSE），它提供了低延迟的、轻量级的、可靠的对浏览器的事件推送机制，并且适用于多种状态同步场景，可用于增强许多 Web 应用功能。
SSE 概述
SSE 是一种基于 HTTP 技术的服务端推送事件技术。它允许服务器向客户端推送新的数据，而不需要浏览器发起任何请求。SSE 的实现基于一个持续的 HTTP 连接，这个连接指向服务器端的一个特殊的 URL，称之为事件源（EventSource）。事件源通过一个 SSI（Server-Sent Inclusions）HTML 格式页面的形式，向客户端发送数据，客户端则通过 EventSource API 来监听服务器端事件，并接收 & 处理数据。
SSE 相比于其他传统的 Web 应用实时通信技术，有很多优势：
- 轻量级，无需下载额外的框架或库
- 无需轮询机制，减少网络请求和服务器负载
- 基于 HTTP 协议，通过反向代理、SSL/TLS 都能正常工作
- 可靠性较高，具备自动重连，断线自动恢复等机制
SSE 工作原理
事件源
事件源是 SSE 技术的核心，是服务端产生事件的地方。它是一个特殊的 URI，与 Web 页面的 URL 不同。客户端通过这个 URI 并不是为了读取或者获取页面内容，而是建立了一个长连接，然后等待事件的出现。
事件源的生成过程通常像这样：
- 客户端向服务器发出一个普通的 HTTP GET 请求
- 服务器通过响应消息体或响应头的某个信息告诉客户端，这个请求是一个通道，不需要关闭
- 之后，客户端和服务器之间的连接不会被关闭，除非手动触发关闭请求或网络中断。
在响应头中，我们可以采用 "text/event-stream" 的特殊 MIME（Multipurpose Internet Mail Extensions）格式，告知客户端它是一个 SSE 对象。Content-Type 的值为 "text/event-stream"，这是所有 SSE 服务器必须发送的响应头的一部分。
HTTP/1.1 200 OK Content-Type: text/event-stream;charset=UTF-8 Cache-Control: no-cache Connection: keep-alive
客户端收到响应后，就可以开始监听从该请求通道传递过来的消息了。
事件类型
事件源可以发射很多事件，每个事件都是由一个字符串的「事件类型」和数据（可选）组成的。这个事件类型会被放在响应流中的响应头字段名字为 "event:" 的字段中，而数据则是放在流数据体中。
例如，一个消息包括了一个消息类型和一些数据：
event: EVENT_TYPE
data: { JSON }
event: custom
data: hello
event: message
data: This is message content.推送数据
在客户端与事件源上建立了 SSE 连接后，服务器可以在特定的时间，向客户端发送新的数据，时刻保证客户端能够实时得到新的数据，来实现状态同步的需求。
在推送数据时，服务器需要将发送的数据整理为 SSE 统一的格式，这个格式大致如下：
event: <event_name>
data: <JSON_string>
id: <msg_id>
event: ping
data: {"value":"pong"}
id: 1其中，<event_name> 表示事件名称，可以用字符串表示，<json_string> 是 JSON 格式的字符串，在客户端的 onmessage 事件中可以解析出数据，<msg_id> 字段是可选的表示消息的唯一标识，使客户端能够在下一次连接 SSE 前缓存消息。
客户端接收数据
在客户端，我们可以通过 JavaScript 中的 EventSource API 建立对 SSE 的连接，并且可以监听到发生的各种事件。
-- -------------------- ---- ------- ----- ----------- - --- ----------------------------- -- -- --- -- --------------------- - ----------- - --------------- ---------- -------- -- ------------------ - ----------- - --------------- ------- --- -- ------------------- - ----------- - --------------- -------- --- --
在这个例子中，我们指定一个名为 /event-stream 的事件源，并将其用于事件监听。我们通过监听来自事件源的三个事件处理函数，分别处理「事件到达了」、「打开了连接」和「发生了错误」事件。
SSE 示例代码
下面是一个示例，展示了一个 SSE 服务器产生事件的过程，以及客户端使用 EventSource API 处理事件流的过程：
服务端
-- -------------------- ---- -------
-- --- ---------
----- --------- - --------------
----- --------- - -
-------- ----- ------ ---------
------- - -- -- -- -- -- - -
--
-- -- --- ------ ----------- ------
----- ------- - -------------------
----- --- - ----------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ----
----- ---- - ------- --------------- -
------ ---------------------------------
----------------
-------------- -- -
----- --------- - --- ----------------------------
----- ---- - ------- --------------- -
------ ------------------ ------------- --------- --------
----------------
-- ------
---客户端
-- -------------------- ---- -------
------- ------------
-- ---------------
-- --------------
-- -------------------
--------
----- ----------- - --- --------------------
--------------------- - ----------- -
--------------- ---------- --------
----- - ----- ---- - - -------------------
------------------------------------------ - ------- ---------
----------------------------------------- - ------ ---------------------- ----- -----
---------------------------------------------- - ----------- ----- ------------------------------
--
------------------- - ----------- -
--------------- -------- ---
--
---------总结
SSE 技术是一种实用、简单、可靠的状态同步技术，可以应用于许多不同的 Web 应用场景，如网页聊天、数据监控、即时通知、实时多人协同编辑等。它基于 HTTP 和浏览器端 EventSource API 构建，免去了传统的轮询和长轮询机制的复杂性和低效，有利于实现更高效、更智能的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c6669968c7c53b0b6173c