在前端开发中，我们经常需要客户端与服务器之间实时地传输数据，以便及时更新页面内容。常见的实现方式有轮询、长轮询和 WebSocket 等。但是这些方式都各自存在一些缺点，比如轮询会造成频繁的请求、长轮询会导致连接保持时间过长等等。那么如何解决这些问题呢？这时候 SSE 就可以发挥出它的优势。
什么是 SSE？
SSE（Server-Sent Events）是 HTML5 中用于服务器向浏览器发送事件的一种机制。它是基于 HTTP 协议的，利用了 HTTP 的长连接特性，同时不会将连接断开或交给浏览器。这意味着 SSE 不需要像 WebSocket 那样建立全双工通信的通道，而是单向流通。这使得 SSE 可以在任何支持 HTTP 的浏览器上运行。
SSE 主要基于三个重要的组成部分：事件流、事件源和事件。
- 事件流：事件流用于向客户端传输数据。流通常是由服务端发送的，但客户端也可以发送消息，这对于处理客户端到服务端的功能非常重要。
- 事件源：事件源是通过事件流向客户端传递数据的对象，它可以是一个静态文件，也可以是一个动态的脚本。
- 事件：事件是由客户端在事件流中接收到的实际数据。事件包含一个标识符和可选的数据。
如何使用 SSE？
下面我将通过一个简单的示例来演示如何使用 SSE 实现客户端持续更新。
服务端代码
首先，在服务端（我这里用 Node.js 实现）创建一个 SSE 事件源服务器。代码如下：
----- ---- - ----------------
----------------------- ---- -- -
----- ------- - -
--------------- --------------------
---------------- -----------
------------- -------------
------------------------------ --- ------
--
------------------ ---------
-- -- - ----- - -----
------- - - -- - - -- ---- -
----- ---- - ------ ----------
----------------
------------------ ----------
------------- -- - -- ------
-
----------------其中，'Content-Type': 'text/event-stream' 表示响应头为 SSE 类型，'Cache-Control': 'no-cache' 表示不缓存数据，'Connection': 'keep-alive' 表示一直保持连接。此外，还需要设置允许跨域（'Access-Control-Allow-Origin': '*'）。
上述代码通过 res.write(data) 发送数据，实际上并没有断开连接，而是一直处于保持连接状态。
我们可以在浏览器中看到 Sent: data: X 消息，表示服务端成功发送了数据。
客户端代码
接下来，我们需要在客户端中接收服务端发送的数据。代码如下：
----- ----------- - --- ------------------------------------- --------------------- - - -- - ----- ------- - ---------------------------------- ----------------- -- ------ - ---- ---- ---------------------- ------------ --
其中，new EventSource() 方法创建一个新的 SSE 事件源，并向指定的 URL（这里是 http://localhost:3000）发送请求。它可以接收三种类型的事件：message、open和 error。我们这里使用了 message 事件来接收服务端发送的数据，并将其添加到 result 元素中。
运行代码，我们可以看到浏览器窗口不断地更新数据。
总结
通过本文的介绍，我们了解了 SSE 的基本原理、用途以及如何使用它来实现客户端持续更新。与其他实时数据传输方式相比，SSE 具有更低的开销、更简单的实现和更广泛的支持范围。因此，在实际开发中，SSE 可以是一个非常好的选择。
示例代码
完整示例代码可以在 https://github.com/TuringTechOfficial/frond-end-technical-articles/tree/main/SSE-demo 获取。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64743190968c7c53b019977a