前言
在前端开发中，往往需要实时更新页面中的数据。传统的方式是使用轮询或者 WebSockets，但是它们都有自己的缺点。轮询需要频繁的请求数据，并且可能会产生过多的网络流量。WebSockets 需要建立双向连接，可能会有跨域和安全问题。而 Server-sent Events (SSE) 利用 HTTP 协议的长连接，可以实现服务器向客户端实时推送数据，具有实时性和性能优势，也比 WebSockets 更加简单易用。
SSE 的浏览器兼容性
SSE 的浏览器兼容性在现代浏览器中都非常好，但是在旧版 IE 中不支持。最新的浏览器支持 SSE，包括 Firefox、Chrome、Safari、Opera 和 Edge。
在 JavaScript 中可以使用以下代码来检测浏览器是否支持 SSE：
if (!!window.EventSource) {
// 浏览器支持 SSE
} else {
// 不支持 SSE
}SSE 的使用
初始化 EventSource 对象
要使用 SSE，首先需要初始化一个 EventSource 对象，指定需要监听的 URL 地址，例如：
const source = new EventSource('/stream');上面代码中，/stream 是服务器的 SSE 路由地址。
监听事件
初始化 EventSource 对象之后，可以通过监听 message 事件来获取服务器推送过来的数据，例如：
source.addEventListener('message', event => {
const data = JSON.parse(event.data);
// 处理服务器推送的数据
});处理错误
如果服务器推送过程中发生了错误，可以通过监听 error 事件来进行处理，例如：
source.addEventListener('error', event => {
// 处理错误信息
});判断连接状态
可以通过 readyState 属性来获取 SSE 连接的状态，包括以下 4 种状态：
CONNECTING：正在连接服务器OPEN：已连接服务器CLOSED：连接已关闭UNSENT：未连接服务器
例如：
-- -------------------- ---- ------- -- ------------------ --- ----------------------- - -- ------- - ---- -- ------------------ --- ----------------- - -- ------ - ---- -- ------------------ --- ------------------- - -- ----- - ---- -- ------------------ --- ------------------- - -- ------ -
断开连接
如果不需要继续接收服务器的数据，可以通过调用 close() 方法来主动断开 SSE 连接，例如：
source.close();
SSE 的适用范围
SSE 适用于需要实时更新数据的场景，例如聊天室、实时数据监控等。SSE 不适合发送大量数据，适合小量数据的实时推送。在使用 SSE 时需要注意，如果请求路径存在缓存，服务器推送过来的数据可能会被缓存，导致无法更新页面。
示例代码
以下是一个简单的使用 SSE 接收服务器推送数据并实时展示的示例代码：
-- -------------------- ---- ------- -- --- --- ----- ------ - --- ----------------------- -- -- ------- -- ---------------------------------- ----- -- - ----- ---- - ----------------------- -- -- --- ---- ----- --- - -------------------------------- --------------- - ------------- --- -- -- ----- -- -------------------------------- ----- -- - ------------------ --------- ------- --- -- ---- ------------- -- - --------------- -- -------
结论
Server-sent Events (SSE) 是一种实现服务器向客户端实时推送数据的技术，具有实时性和性能优势，比轮询和 WebSockets 更加简单易用。在现代浏览器中，SSE 的浏览器兼容性非常好，可以在前端开发中得到广泛应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67496ee5a1ce0063545f1265