在现代 Web 应用程序中，实时性已经成为了一个必备的特性。但是，实现实时性的方式有很多种，其中一种比较简单且易于使用的方式是使用 Server-Sent Events（SSE）。SSE 是一种基于 HTTP 的协议，允许服务器向客户端发送事件流（event stream），从而实现实时性。
在本文中，我们将介绍如何使用 SSE 实现 Web 应用程序，并提供一些示例代码和指导意义。
SSE 的基本原理
SSE 的基本原理非常简单。客户端通过发送 HTTP 请求到服务器来建立 SSE 连接。服务器接收到请求后，会保持连接处于打开状态，并向客户端发送事件流。客户端可以通过 JavaScript 代码监听事件流，并在接收到事件时做出相应的处理。
SSE 的事件流是由一系列事件组成的，每个事件都是一条包含数据的消息。服务器可以在任何时候向事件流中添加事件，并且客户端会在接收到每个事件时立即处理它。
实现 SSE 的步骤
要使用 SSE 实现 Web 应用程序，需要完成以下步骤：
- 在服务器端，创建一个 HTTP 路由来处理 SSE 连接请求。
- 在服务器端，向 SSE 连接发送事件流。
- 在客户端，使用 JavaScript 代码监听事件流，并在接收到事件时做出相应的处理。
下面我们将分别介绍这些步骤。
在服务器端创建 HTTP 路由
在服务器端，我们需要创建一个 HTTP 路由来处理 SSE 连接请求。这个路由应该返回一个响应，其中包含以下头信息：
- Content-Type：text/event-stream
- Cache-Control：no-cache
- Connection：keep-alive
同时，响应的主体应该包含一些事件。下面是一个使用 Node.js 和 Express 框架实现 SSE 的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --- --
--------------- ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- -----
-------------- -- -
----------------- ---------
---------------- ----- ----------------------------
-- ------
---
-- -----
---------------- -- -- -
------------------- --------- -- ---- --------
---在上面的代码中，我们创建了一个 SSE 路由，它每秒向客户端发送一个名为 ping 的事件，事件的数据是当前时间的 ISO 字符串。
向 SSE 连接发送事件流
在服务器端，我们需要向 SSE 连接发送事件流。事件流应该以一个或多个事件的形式发送，每个事件都应该包含以下信息：
- event：事件的名称（可选）。
- data：事件的数据（可选）。
- id：事件的 ID（可选）。
下面是一个使用 Node.js 和 Express 框架向 SSE 连接发送事件流的例子：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-- --- --
--------------- ----- ---- -- -
-- -----
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
-- -----
-------------- -- -
----------------- ---------
---------------- ----- ----------------------------
-- ------
---
-- -----
---------------- -- -- -
------------------- --------- -- ---- --------
---在上面的代码中，我们使用 setInterval 函数来每秒向客户端发送一个名为 ping 的事件，事件的数据是当前时间的 ISO 字符串。
在客户端监听事件流
在客户端，我们需要使用 JavaScript 代码监听事件流，并在接收到事件时做出相应的处理。下面是一个使用 JavaScript 监听 SSE 事件流的例子：
const source = new EventSource('/sse');
source.addEventListener('ping', (event) => {
console.log(event.data);
});在上面的代码中，我们使用 EventSource 对象监听 SSE 事件流。当事件流中有名为 ping 的事件时，我们会将事件的数据打印到控制台。
结论
使用 SSE 实现 Web 应用程序非常简单，但它可以为我们的应用程序带来很多好处。通过 SSE，我们可以实现实时性，从而使我们的应用程序更加交互和响应。同时，SSE 也非常易于使用，即使是对于初学者也不会有太大的难度。
在实际开发中，我们可以将 SSE 与其他技术（如 WebSockets、长轮询等）结合使用，从而实现更加复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67468f0ee504cb428eb879e5