前言
在 Web 开发中，为了获取实时数据和事件通知，JavaScript 中已经提供了不少的技术，比如 Websocket、Long Polling 等等。另外一种实时的数据推送方式即为 SSE（Server-Sent Events）。与 Websocket 相比，SSE 使用更为简单，不需要特殊的服务器支持，也没有繁琐的协议处理，对于一些简单的实时应用场景，SSE 是一种不错的选择。本文将介绍 SSE 相关的客户端特性。
什么是 SSE
SSE 是基于 HTTP 的协议，浏览器向服务器发送一个 HTTP 请求，服务器在响应中使用一个不关闭的连接，通过这个不断开的连接，服务器可以周期性地向客户端发送消息。
SSE 通过使用 EventSource 对象，将服务器上的消息发送给客户端。客户端通过监听各种事件，可以获得事件的详细信息，从而可以获得最新的数据。
SSE 的优点
相对于其他实时通信方式，SSE 有以下优点：
- HTTP 原生支持：不需要任何握手或协议，使用 HTTP GET 请求即可建立连接，适合于简单的实时应用场景。
- 更为简单：SSE 协议比较简单，也不需要握手等繁琐的协议处理。
- 兼容性好：SSE 协议已经标准化，现代浏览器都已经支持。
- 支持服务器推送数据：与传统的 Ajax 请求不同，SSE 是服务器主动推送数据到客户端，可以使得客户端实时更新。
EventSource 对象
浏览器中使用 SSE 相关的 API 需要操作的对象是 EventSource。创建 EventSource 对象的语法如下：
const source = new EventSource(url, options);
其中 url 是服务器响应 SSE 请求的 URL 地址，options 是一个可选的配置项，可以指定是否需要开启跨域权限控制等。
EventSource 支持以下三种事件：
open：SSE 连接建立时触发。message：服务器向客户端发送消息时触发。error：SSE 连接出现错误时触发。
需要注意的是，当出现网络异常等错误时，EventSource 对象会自动尝试重连，直到连接成功或达到最大重连次数（默认值为 3）。
EventSource 对象的常用属性和方法
EventSource.readyState
readyState 是一个只读属性，表示 SSE 连接的状态，共有以下三种取值：
0：连接尚未建立；1：连接已经建立；2：连接已经关闭。
可以通过监听 open 和 error 事件，来确定连接状态，并据此进行相关的操作。
EventSource.close()
关闭 SSE 连接。
EventSource.withCredentials
withCredentials 是一个布尔类型的属性，用于指定请求的跨域连接是否携带 cookie 等用户认证信息。
示例代码
下面是一个简单的 SSE 示例代码，使用 SSE 获取服务器端实时的时间信息，每隔一秒钟更新一次时间：
-- -------------------- ---- ------- -- ------- --- --- ----- ------ - --------------- -- -- --------- ----------------- ----- --------- - ------- -- - -------------------- - ------------ -- -- -- ----------- ------ ------- -- ----- --- - --- -------------------- ------------- - ---------- -- ---- -------------- -- - ----------------------- -- ------
总结
本文介绍了 JavaScript SSE 客户端特性的相关内容。相对于 Websocket 等方式，SSE 简单易用，兼容性好，可以用于一些简单的实时应用场景中。在实际开发中，需要注意 SSE 连接状态的监控和错误处理，以及重连机制的细节等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fcc5248841e9894f54418