SSE（Server-Sent Events）是一种基于 HTTP 的服务器推送技术，能够让服务器向客户端主动推送数据。相比于传统的轮询和长轮询方式，SSE 可以实现实时性更好、延迟更低、更可靠的推送效果。本文将介绍 SSE 技术的细节和使用方法，包括 SSE 协议格式、浏览器对 SSE 的支持和 SSE 的实现样例。
SSE 协议格式
SSE 协议是基于纯文本的，使用了类似于 HTTP 的格式。数据以数据块的形式发送给客户端，并以 "data:" 开头，以空行分隔。可以包含多个事件，并以 "event:" 开头表明事件类型；"id:" 开头用于标识事件的 ID；"retry:" 开头用于设定客户端重新连接服务器之间的间隔时间。示例代码如下：
-- -------------------- ---- ------- ------ ------- ----- -------- ------- ------ --- ------ ------- ----- -------- ------- ------ --- --- ----- ------ ------- ----- -------- ------- ------ ---
浏览器对 SSE 的支持
目前绝大部分现代浏览器已经支持 SSE 技术，包括 Google Chrome、Firefox、Safari、Microsoft Edge 等。但是，Internet Explorer 不支持 SSE，需要使用特定的 polyfill 库来模拟 SSE 功能。
在使用 SSE 技术时，需要注意浏览器的并发连接数限制。通常情况下，浏览器不会同时发起超过 6 个 SSE 连接。如果需要同时订阅多个事件，可以在一个 SSE 连接中发送多个事件，或者使用 WebSocket 替代 SSE。
SSE 的实现样例
下面的代码展示了如何在 Node.js 中使用 SSE 技术，向客户端推送服务器端产生的随机数。
-- -------------------- ---- -------
----- ---- - ----------------
-------------------------- ----- ---- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- ------------
--
------------------ ---------
---------------------- -
----- ---- - -------------------------
----- ----- - ----------
----- -- - --------
----------------- -------------
---------------- ------------
-------------- ------------
-- ------
----------------在浏览器中使用以下代码订阅 SSE 事件：
const source = new EventSource('/sse');
source.addEventListener('myEvent', function(event) {
const data = JSON.parse(event.data);
console.log('Received data:', data);
});在上述代码中，我们首先创建一个服务器，并在客户端发起请求后将响应头中的 "Content-Type" 设为 "text/event-stream"，告诉浏览器这是一个 SSE 连接。然后使用 "setInterval" 定时向客户端发送数据块，模拟服务器向客户端推送数据。在客户端中，我们使用 "EventSource" 创建一个 SSE 连接，并使用 "addEventListener" 监听服务器端发送来的事件。当接收到事件时，我们将数据块解析为 JSON 对象并打印在控制台上。
结论
SSE 技术可以让 Web 应用实现更快的实时性效果，能够在多种场景下发挥重要作用。本文介绍了 SSE 的协议格式、浏览器对 SSE 的支持和 SSE 的实现样例，希望能够帮助开发者更好地理解和使用 SSE 技术，构建更加高效的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e84b8e9a7045d0d6af525