在 web 开发中，分页是一个常见的需求。通常情况下，我们会在后端实现分页逻辑，然后在前端通过 AJAX 请求数据。另一种流行的做法是使用无限滚动（infinite scroll），也就是在滚动到页面底部时，自动加载更多数据。但是，这两种方式的实现都存在一些问题，比如后端的开销和前端的性能问题。本文将介绍一种新的解决方案：使用 Server-sent Events （SSE）来解决分页问题。
SSE 概述
SSE 是一种 HTML5 技术，它允许服务器向客户端推送数据。与传统的 Long Polling 不同，SSE 不需要客户端不断地发起请求，而是通过一次连接建立后，服务器会保持连接，随时向客户端推送消息。SSE 的优点是可以在减少网络开销的同时实现实时推送，适用于需要实时更新的场景。
实现 SSE 分页
在前端实现 SSE 分页，我们需要标准的 HTML 页面和一个后端服务器。可以使用 Node.js 和 Express 来实现后端服务：
-- -------------------- ---- -------
-- ----
----- ------- - -------------------
----- ---- - ----------------
----- --- - ----------
----------------
---------------------- ----- ---- -- -
----------------------------- ---------------------
------------------------------ ------------
--------------------------- --------------
--- -- - --
----- ---------- - -------------- -- -
-- --- - --- -
----- ---- - ---- ------------ ------------------ ----- ----- ------ ---------
----------------
-----
- ---- -
----------------- ---------- --- -- -------------
----------
--------------------------
-
-- ------
---
---------------- ----- -- -
-- ----- -
---------------------------
- ---- -
------------------- ------- -- ------------------------
-
---上述代码中，我们创建了一个 Express 服务，并监听 /api/stream 路径，返回 SSE 数据流。在该数据流中，我们生成了一个包含 10 个项的数据流。每秒钟向客户端推送一项，直至推送完所有项后，向客户端推送结束事件 end。
现在我们来看一下如何在前端使用 SSE 实现分页。我们可以使用 EventSource API 来连接 SSE 服务器，并接收服务器推送的事件。下面是相应的前端代码：
-- -------------------- ---- -------
---- ---- ---
--------- -----
------
------
----- --------------- --
---------- ---------- ---------------
-------
------
--- ---------------
--------
----- ---- - --------------------------------
----- ------ - --- ---------------------------
---------------------------------- --- -- -
----- ---- - -------------------
----- ---- - -----------------------------
---------------- - ----------
-----------------------
---
------------------------------ --- -- -
------------------- --------
---
---------
-------
-------上述代码中，我们创建了一个 ul 元素，并使用 SSE 通过 EventSource API 向客户端推送数据。在 message 事件中，我们把推送的数据生成一个 li 元素，并添加到 ul 元素中。在 end 事件中，我们简单地打印一条日志。
现在我们运行前端代码和后端服务，访问 http://localhost:3000，我们将看到一个包含 10 个项的列表。注意，这个列表是逐步加载的。
分页实现细节
上面的示例代码只是一个简单的演示，但在实际应用中还需要处理一些细节问题。请看以下几个方面：
1. 如何实现服务器端的分页逻辑？
我们可以使用类似数据库的 skip 和 limit 的方式来实现服务器端的分页逻辑。只需在 SSE 数据流中逐一返回每页的数据就可以了。
2. 如何处理客户端请求页码的问题？
为避免客户端不断请求数据，我们可以发送一个事件告知客户端可以进行下一页的请求。客户端在收到这个事件时，再发起下一页的请求。
3. 如何处理客户端断开连接的情况？
在 SSE 数据流中，如果服务器端发送的数据到了客户端就断开连接，客户端会自动重连。但如果客户端关掉了浏览器，那么需要在服务器端处理对应的客户端连接。
结论
使用 Server-sent Events 可以实现高效的分页查询，同时也可以实现实时推送通知。然而这种技术在性能和安全方面也面临一些问题，需要慎重使用。同时，该技术也需要浏览器支持，目前大部分主流浏览器都已经支持该技术，但对于一些较老的浏览器，需要考虑兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676dcb2882fcee791c6a172c