Server-Sent Events（SSE）是一种基于 HTTP 的实时通信技术，它允许服务器向客户端推送数据流，而无需客户端发起请求。SSE 可以用于构建实时聊天应用、实时数据监控应用等实时 Web 应用。
本文将介绍如何在前端中使用 SSE 技术来构建实时 Web 应用。
SSE 基础知识
SSE 是基于 HTTP 协议的一种实时通信技术，它使用了一个称为 EventSource 的 JavaScript API 来接收服务器发送的事件流。SSE 与 WebSocket 相似，但是 SSE 是基于 HTTP 的，因此它可以使用现有的 HTTP 基础设施，而不需要额外的协议支持。
SSE 的工作原理如下：
- 客户端向服务器发送一个 HTTP 请求，请求中包含一个特殊的头部
Accept: text/event-stream。 - 服务器接收到请求后，返回一个响应，响应头中包含
Content-Type: text/event-stream，并且响应体中包含一系列的事件数据。 - 客户端通过 EventSource API 来监听服务器发送的事件流，并对每个事件进行处理。
SSE 支持以下类型的事件：
event：表示事件的名称。data：表示事件的数据。id：表示事件的 ID。retry：表示客户端重新连接服务器的时间间隔。
SSE 的事件格式如下：
-- -------------------- ---- ------- ------ -------- ----- ------- ------ ------ -------- --- --- ----- ------- ------ ------ -------- ------ ----- ----- ------- ------
使用 SSE 构建实时 Web 应用
下面我们将使用 SSE 技术来构建一个简单的实时 Web 应用，该应用将显示当前时间，并且每秒钟更新一次。
服务端代码
我们使用 Node.js 来编写服务端代码。首先，我们需要安装 express 和 moment 模块：
npm install express moment
然后，我们编写以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
---------
---------------- -----------
--------------- --------------------
------------- ------------
---
-------------- -- -
----- ---- - -
----- --------------------------- ----------
--
----------------- ----------- ------------------------------
-- ------
---
---------------- -- -- -
------------------- ------- -- ------------------------
---服务端代码比较简单，我们创建了一个 Express 应用，并且设置了静态文件目录为 public。我们定义了一个 /sse 路由，当客户端请求该路由时，服务器会返回一个 SSE 数据流，每秒钟发送一个包含当前时间的事件。
在这里，我们使用了 moment 模块来格式化时间，然后将时间作为数据发送给客户端。
客户端代码
我们使用以下 HTML 和 JavaScript 代码来实现客户端页面：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
----------- ----- ----- ----------------------
--------
----- ----------- - --- --------------------
------------------------------------ ------- -- -
----- ---- - -----------------------
------------------------------------------- - ----------
---
---------
-------
-------在页面中，我们定义了一个 h1 元素来显示当前时间。然后，我们使用 EventSource API 来监听 /sse 路由返回的 SSE 数据流。当服务器发送一个名为 time 的事件时，我们将事件数据解析为 JSON 格式，并更新页面中的时间显示。
总结
本文介绍了如何在前端中使用 SSE 技术来构建实时 Web 应用。我们首先介绍了 SSE 的基础知识，包括事件格式和工作原理。然后，我们使用 Node.js 和 Express 框架编写了一个简单的 SSE 服务器，并且使用 EventSource API 来监听服务器发送的事件流。
SSE 技术非常适合构建实时 Web 应用，它可以使用现有的 HTTP 基础设施，并且具有良好的浏览器兼容性。如果你想构建实时聊天应用、实时数据监控应用等实时 Web 应用，可以考虑使用 SSE 技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66051519d10417a2222a64c2