在上一篇文章中，我们已经完成了电子投票系统的基本模型。但是当系统中有人进行投票时，通常需要及时将结果推送给其他用户。传统的方式是使用轮询来获取新的投票结果，但是这种方式会导致服务器的压力增大，同时用户也会感受到网络延迟的影响。为了解决这些问题，本文将介绍如何使用 Server-Sent Events（SSE）实现实时推送投票结果。
什么是 SSE
SSE 是一种用于服务器向客户端推送文本数据的 Web 技术。它允许建立一次持久的 HTTP 连接，以便服务器可以在任何时候向客户端推送更新的数据。SSE 使用纯文本格式来传递信息，每条消息都以一个 “data:” 前缀开头，以换行符 “\n” 结尾。此外，SSE 还支持事件类型（event）、标识符（id）和重试时间（retry）等其他字段。接收 SSE 数据的客户端可以使用 JavaScript 的 EventSource 对象来处理数据。
在投票系统中使用 SSE
在我们的投票系统中，我们需要实时地向客户端推送最新的投票结果。为此，我们可以使用以下步骤：
建立 SSE 连接。在客户端中，我们需要创建一个 EventSource 对象来建立 SSE 连接。例如：
const eventSource = new EventSource('/vote/result-sse');这里的 /vote/result-sse 是一个 Express 路由，用于处理 SSE 的请求。下面我们将详细介绍如何实现这个路由。
监听 SSE 事件。在客户端中，我们需要使用 addEventListener 方法来监听 SSE 的事件。例如：
eventSource.addEventListener('message', event => { const data = JSON.parse(event.data); // 更新投票结果视图 });这里我们监听了 message 事件，表示接收到新的消息。在事件处理函数中，我们可以解析 JSON 格式的数据，然后使用更新投票结果的视图。
推送投票结果。在服务器端，我们需要定期推送最新的投票结果。为了避免推送过于频繁，我们可以设置一个推送的时间间隔。例如，每 5 秒中推送一次最新的数据。以下是 Express 路由的实现方式：
-- -------------------- ---- ------- --------------------------- ----- ---- -- - ----------------------- --------------------- ------------------------ ------------ ----- ---------- - -------------- -- - ----- ------ - -------------------- ---------------- -------------------------------- -- ------ --------------- -- -- - -------------------------- --- ---这里我们设置了 Content-Type 为 text/event-stream，表示返回的是 SSE 数据。我们还设置了 Cache-Control 为 no-cache，以避免浏览器缓存 SSE 数据。在定期推送数据的函数中，我们首先计算投票结果，然后将结果作为 SSE 数据推送给客户端。每条消息以 “data:” 前缀开头，以换行符结束。最后，我们添加了一个 req.on('close', ...) 事件，以便在客户端关闭 SSE 连接时清除定时器。
完整示例代码
以下是一个完整的使用 SSE 实现实时推送投票结果的例子。你可以将它保存为一个 Node.js 文件，并运行它进行测试。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-------------------------------- - ------------
--- ----- - -
----------- --
------- --
---- --
--
------------ ----- ---- -- -
---------------------- - ---------------
---
---------------- ----- ---- -- -
----- - -------- - - ----------
-- ---------------- --- ---------- -
---------------------- ------ -------- ----- ---
- ---- -
------------------
---------- -------- ---- ---
-
---
--------------------------- ----- ---- -- -
----------------------- ---------------------
------------------------ ------------
----- ---------- - -------------- -- -
----- ------ - -
------ ------------------------------- -- -- - - ---
----------- --------------------
------- ----------------
---- -------------
--
---------------- --------------------------------
-- ------
--------------- -- -- -
--------------------------
---
---
---------------- -- -- ------------------- ------- -- ---------------------------- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-------- --- ---- -------- ----------- -------------
---
------- ------------------------------------------------
------- ----------------------------------------
------- ----------------------------------
----
--------- ----- ----------------------
----
--------------- ----- ----------------------------
----------- ----- ------------------------
-------- ----- ---------------------
-----
--------
-------- -------------- -
----------------------------------- - ------- ------ ---
-
----- ----------- - --- --------------------------------
--------------------------------------- ----- -- -
----- ---- - -----------------------
-------------------------------------------- - -----------
------------------------------------------------- - ----------------
--------------------------------------------- - ------------
------------------------------------------ - ---------
---
---------
-------
-------结论
使用 SSE 实现实时推送投票结果，可以避免使用轮询的缺点，并且减轻服务器的压力，提高用户体验。在本文中，我们介绍了 SSE 的基本原理和投票系统中使用 SSE 的步骤。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f65a5fc5c563ced5839786