简介
在 Web 应用程序中，实时数据推送是一个关键的需求，特别是对于需要不间断地获取最新信息的应用程序。而常见的 HTTP 请求-响应模型则无法满足这一需求，因为它需要客户端不断地发出请求，即使数据没有发生改变。这很浪费带宽和服务器资源。
为了解决这个问题，HTML5 引入了 Server-Sent Events（SSE）技术，使得服务器可以向客户端推送数据，免去了客户端不断发出请求的负担。SSE 是一个相对简单和易用的技术，很适合用于实现实时数据推送功能。
本文将介绍如何使用 SSE 实现实时数据推送，包括 SSE 的基本原理、实现方法、服务器端和客户端的代码示例。
SSE 基本原理
SSE 基于 HTTP 协议，使用 HTTP 连接，但不同于传统的 HTTP 请求-响应模型。它采用单向通信，即服务器向客户端发送数据，客户端只接收数据，不能向服务器发出请求。
在 SSE 中，服务器端需要使用特殊的响应格式：text/event-stream。这种格式的响应包含一个或多个事件（event），每个事件占据一行。事件有三种类型：
- 以
data:开头，后面跟着 JSON 格式的数据，表示发送的数据事件； - 以
event:开头，后面跟着事件名称，表示自定义事件； - 以
id:开头，后面跟着一个 ID 字符串，表示消息 ID。
客户端通过打开一个 SSE 连接，即可以接收服务端发送的事件数据。SSE 连接的建立和关闭都是通过 JavaScript 的 SSE API 实现的。
实现 SSE
下面是一个使用 Node.js 和 Express 框架的 SSE 服务器端代码示例。它实现了一个简单的计数器，并每秒向客户端发送计数器的当前值。
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
--- ----- - --
-------------- -- -
---------------- ---------------
--------
-- ------
---
---------------- -- -- -
---------------- ------ ------- -- ---- -------
---在这个示例中，/sse 路由返回的是 SSE 格式的响应。在响应的头部中设置了 Content-Type、Cache-Control 和 Connection 等参数。其中，Connection 设置为 keep-alive 表示 SSE 连接不会在每次请求结束后断开。而 Cache-Control 则设置为 no-cache 表示不缓存响应。
另外，通过 setInterval 定时器，每秒发送一条数据事件，格式为 data: <count>\n\n，其中 <count> 表示当前计数器的值。
下面是一个使用 JavaScript 的 SSE API 的客户端代码示例。它创建了一个 SSE 连接，接收来自服务器的事件，并显示了计数器的值。
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
---- --------------------
--------
----- --------- - -----------------------------------
----- ------ - --- --------------------
---------------------------------- ----- -- -
----- ----- - -------------------
--------------------- - ------
---
---------
-------
-------在这个示例中，通过 EventSource 创建了一个 SSE 连接，将 /sse 路由指定为连接的 URL。然后，通过 addEventListener 注册了一个 message 事件监听器，当接收到服务器发送的事件时，就会更新计数器的值。
总结
本文介绍了如何使用 SSE 实现实时数据推送功能。SSE 是一种基于 HTTP 协议的简单易用的技术，非常适合用于实现实时通信，比如实时聊天、实时统计等。它不需要客户端不断地发出请求，减轻了服务器的负担，同时也节省了带宽和服务器资源。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65382d1d7d4982a6eb0d536e