前言
在 Web 开发中，实时数据的推送对于一些需要即时响应的场景非常重要。比如在线交易、股票数据等。轮询同样可以达到实时效果，但它需要频繁地向服务器请求数据。这样就产生了许多不必要的请求，造成了浪费的带宽和性能，而且并不能实时响应数据。SSE （Server-Sent Event） 充分利用了 HTTP 协议的长连接和文本流的特点，可以有效地解决这些问题。
本文旨在介绍 SSE 的基本原理和如何实现客户端数据更新的实时推送。在本文中，我们将使用 SSE 结合 Express 和 jQuery 实现一个简单的实时购物车提示。
SSE 基本原理
SSE 基于 HTTP/1.1 规范中的长连接机制，通过浏览器与服务器之间的持久性连接，实现了服务器对客户端的实时推送。SSE 通过 “Content-Type: text/event-stream” 告诉浏览器该响应需要保持打开状态，并且以文本流的方式传送。
SSE 传递的数据是一系列的事件流（event stream），每个事件包含了一个事件类型（event type），以及相应的数据。每个事件以“data:”为前缀，后面跟着相应数据。事件可以没有类型，此时事件类型为默认值“message”。
event: message data: Hello, World!
SSE 还支持事件的 ID （event ID） 和重发标志（reconnection flag）。事件 ID 可用于在客户端记录上次收到的事件，重发标志可用于告诉浏览器在连接中断后尝试重新连接。
实现实时购物车提示
下面我们将实现一个基于 SSE 的购物车提示，包括增加物品到购物车，从购物车删除物品以及计算购物车总价钱，并通过 SSE 实时推送给客户端。
服务端代码
我们首先需要设置一个 SSE 路由，然后在这个路由上实现数据更新的逻辑。
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----- ------ - -----------------------
----- ---- - ---------------- -- -----
-------------------------------- - ------------
-- -----
---------------- ------------- ---- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
---------------------- -
--- ------------
----------------- -----------
---------------- - - ------------------------- - --------
-- ------
-------- --------- -
------ -
------ -
------ -------- ------ ---
------ --------- ------ ---
------ --------- ------ ---
-
--
-
---
------------------- ---------- -
---------------------- -- --- - ------
---
代码解释
- 我们应用中间件 “express.static()”，将 “/public” 文件夹映射到根目录。
- 我们定义了一个 SSE 路由，返回的响应类型是 text/event-stream 以及一些必须的响应头，这些头设置了连接是否需要保持打开状态和禁止缓存。
- 我们定义了一个定时器，每秒钟推送一次更新的购物车数据。这个购物车数据来自于 getCart() 函数。在这个示例中，我们只返回一个固定的购物车项列表。在实际使用中，这里需要根据请求的用户数据查询购物车内容。
- 我们在每个事件之间添加了两个换行符，以分隔事件。
- 我们最后设置了服务器侦听的端口。
客户端代码
我们使用 jQuery 完成 SSE 的客户端实现，当事件被触发时，它将响应函数传递给 jQuery's "EventSource"，该函数将根据事件数据执行相应的操作。我们将在下面的 HTML 页面中添加客户端代码。
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
------- -----------------------------------------------------------
-------
------
----------------
---- --------------------
--------
-- --- --- --
--- ------ - --- ---------------------
-- -------------
--------------------------------- ----------- -
--- ---- - -------------------
--- ---- - ---
--- ----- - --
--- ---- - - -- - - ------------------ ---- -
--- ---- - --------------
---- -- ----- - --------- - - - -- - ---------- - -------
----- -- -----------
-
---- -- ----------------- ------ -- - ----- - ----------------
--------------------------
---
---------
-------
-------代码解释
- 我们在页面中添加了一个用来显示购物车商品和价格的 DIV 元素。
- 我们使用 jQuery 的 “EventSource” 对象来连接到 SSE 的 '/cart' 路由。
- 我们使用 "addEventListener" 方法在“update”事件上绑定响应函数。在这个示例中，响应函数解析了每个事件的 JSON 数据，并将购物车内容更新为 HTML 格式。
- 我们将 HTML 输出到“#cartList” DIV 元素上，每个项目都用一个“
”元素包装，并一个包含总价的强调标签。
总结
在这篇文章中，我们使用了 SSE 结合 Express 和 jQuery 实现一个简单的实时购物车提示。我们介绍了 SSE 的原理，并给出了服务器和客户端的代码。在实际的应用中，我们可以根据自己的需要自定义 SSE 的事件类型和内容，实现灵活多变的实时数据推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf88fc9e06631ab9bf622a