随着电商行业的迅猛发展，商品数据的实时性越来越重要。在传统的 Web 开发中，为使商品数据能及时更新，我们通常使用轮询等方式来定时刷新数据。虽然这种方式可以实现该功能，但它并不是一个高效的方式，而且会消耗大量的带宽和服务器资源。
为了解决这个问题，HTML5 引入了 Server-sent Events（SSE）。SSE 是一种新型的数据传输方式，它允许 web 服务器将实时数据推送到客户端。相比起轮询等方式，SSE 可以大大减少带宽和服务器负载，提升系统的性能。
本文将详细介绍如何使用 SSE 实现自动刷新过期的商品数据，包括建立 SSE 服务端和 SSE 客户端。我们将使用 Node.js 自带的 http 模块来建立 SSE 服务端，并使用 HTML5 的 EventSource API 来建立 SSE 客户端。
建立 SSE 服务端
建立 SSE 服务端非常简单，我们只需要在 HTTP 响应头中设置 Content-Type 为 text/event-stream，并输出 SSE 格式的数据即可。SSE 格式的数据是一个以“data: ”开头的消息体，再加上两个回车换行符。下面是一个 SSE 格式的数据示例：
data: {"productId": 1, "productName": "iPhoneX", "price": 7999}
\n\n在这个例子中，我们向客户端发送了一个包含产品编号、产品名称和价格信息的 JSON 格式的数据。
接下来，让我们看一下如何将这个 SSE 格式的数据发送给客户端。以下是 SSE 服务端示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-- ---------
--- ----------- - -
- ---------- -- ------------ ---------- ------ ---- --
- ---------- -- ------------ -------- ----- ------ ----- --
- ---------- -- ------------ ----- ----- ------ ---- -
--
-- --- ---
----------------------- ---- -- -
------------------- ----------
-- -----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ---------
-------------- -- -
-- ------------------- -- -- -
--------------- ---- ------------
-------
-
-- --------------
--- ---- - --------------------
-- -- --- -----
---------------- ------------------------------
-- ------
----------------上面的代码中，我们通过 setInterval() 函数每秒钟发送一条 SSE 格式的数据。我们使用了一个名为 expiredData 的数组来模拟过期的商品数据。在每次发送数据之前，我们从该数组中取出一条商品数据，并将其以 SSE 格式发送到客户端。
要实现 SSE 服务端，我们还需要注意以下几点：
- 响应头中的
Content-Type必须设置为text/event-stream，这是告诉浏览器我们正在发送 SSE 数据。 Cache-Control和Connection”响应头也应该设置为确保 SSE 连接可靠和可用。- 数据必须以 SSE 格式发送。任何非 SSE 格式的数据都将被浏览器忽略，并且不会触发
EventSource对象上的onmessage事件。
建立 SSE 客户端
由于 SSE 是 HTML5 的新功能，我们使用 JavaScript 的 EventSource API 来建立 SSE 客户端。EventSource 对象是用于接收从服务器推送的 SSE 数据的对象。此对象接收从服务器传输的数据并触发 onmessage 事件，我们可以通过 addEventListener() 或 onmessage 挂钩来监听该事件。
以下是 SSE 客户端示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------
-------
------
------- ---------
--- -----------------------
--------
--- ------ - --- -------------------------------------
-- -- --- --
---------------------------------- ----- -- -
-- ---- --- ----- ---- --
--- ---- - -----------------------
-- ----------
--- -- - -----------------------------
-------------- - -------------------- - ----------------
--------------------------------------------------------
---
---------
-------
-------在上面的代码中，我们首先使用 new EventSource() 函数建立一个 SSE 连接，然后通过 addEventListener() 函数来监听 message 事件。当 SSE 服务端有新数据需要传递时，该事件会被触发。
在这个例子中，我们将商品数据以 JSON 格式保存并显示在一个无序列表中。每当客户端收到一个新商品数据，就将其添加到该列表中。
在实现 SSE 客户端时，我们还需要注意以下几点：
- SSE 只能通过 HTTP 或 HTTPS 协议进行传输。你不能在 JavaScript 中使用其他协议（如 WebSocket 等）实现 SSE 传输。
- IE 浏览器并不支持
EventSourceAPI，因此无法用 SSE 在该浏览器中推送实时数据。
结论
在本文中，我们已经详细介绍了如何使用 SSE 实现自动刷新过期的商品数据。SSE 是一个非常有用的 HTML5 新功能，可以帮助我们实现更高效的数据传输，提升系统的性能。如果你正在开发电商网站，试试 SSE 看看能否提高你的网站性能。下面是上述示例代码的完整版：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672f2639eedcc8a97c8ce717