前言
在现代的网页应用程序中，实时性已经变得越来越重要。这是因为用户希望能够在不刷新页面的情况下得到实时的信息变化，以提供更好的用户体验。例如，一个实时报名系统允许用户在系统开放的时间内进行报名，并及时得知系统剩余的名额信息。为了实现这样的功能，我们可以使用 Server-sent Events 技术。
Server-sent Events
Server-sent Events (SSE) 是 HTML5 新增的一种能力，它允许浏览器接收来自服务器的事件流。与 WebSocket 不同，SSE 使用 HTTP 协议进行通信，而无需建立全双工的长连接。这使得 SSE 更加轻量级，适用于非高并发的场景。
SSE 的协议格式如下所示：
event: <event_name> data: <event_data> event: <event_name> data: <event_data> ...
这里的 event 表示事件名称，data 表示事件的数据。每个事件可以包含多行数据。事件流的 MIME 类型是 text/event-stream。
浏览器可以通过 JavaScript API EventSource 对象订阅 SSE 事件流。一旦订阅成功，服务器端可以随时发送事件给客户端。
实时报名系统的应用
考虑一个实时报名系统，用户可以在系统开放的时间内进行报名。这个系统的基本功能是允许用户提交报名表单，后台根据表单内容计算出剩余名额，然后及时地将剩余名额反馈给用户。我们可以使用 SSE 技术实现这个功能。
在服务器端，我们需要实现以下功能：
- 灵活进行名额计算（例如，考虑同一时间内不同报名类型之间的限制）。
- 启动 SSE 服务，定时计算名额并向所有客户端发送事件流。
下面是一个 Express.js 服务器端代码的示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---------- - --- ------
--- -------------- - ---
---------------------------- --------- ---- ----
----------------------------------
------------------ ----- ---- -- -
---------------
------
--------------- --------------------
---------------- -----------
------------- ------------
--
----------------
--------------------
---------------- ------------------------
--------------- -- -- -
-----------------------
---
---
------------------------- ----- ---- -- -
----- - ----- -------- - - ---------
-- --------- --------- -----
-- ---
------------------------- -- -
------------------- ------------------------
---
------------------
---
---------------- -- -- -
------------------- ------- -- ---- -------
-------------- -- -
-------------- -- ------------------------ - --- - --
------------------------- -- -
------------------- ------------------------
---
-- ------
---
我们定义了两个路由：
/events对应 SSE 服务，用于向所有客户端发送名额信息。/registration对应用户提交报名表单的路由。在这里，我们计算出新的名额信息，然后向所有客户端发送更新事件。
在 setInterval() 中，我们定时更新名额信息，并向所有客户端发送更新事件。
在客户端，我们可以使用以下代码来订阅 SSE 事件流：
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const seats = parseInt(event.data);
// Update UI
};当 SSE 事件流中有新的事件到来时，会触发 onmessage 事件处理函数，我们在这里更新界面的名额信息。
总结
Server-sent Events 是一种轻量级的实时通信技术，适用于不需要进行高并发长连接的场景。在实时报名系统中，SSE 可以方便地实现反馈实时名额信息的需求。在使用 SSE 的同时，我们需要注意事件格式的编写，以及服务端和客户端的事件流管理。
参考链接
Server-sent events - Web APIs | MDN
Node.js 实战（第二版）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64940b5348841e98941959f6