在前端开发中，有时需要与服务端保持长时间的连接以实时更新数据，例如在线聊天、新闻推送等。在这种场景下，使用轮询或长轮询方式容易对服务端造成较大压力，而 Server-sent Events（SSE）则提供了一种更简便的实现方式。
本文将介绍如何使用 SSE 实现一个在线考试系统的思路，其中会包括 SSE 基本概念、实现思路、代码示例等内容。
什么是 Server-sent Events
Server-sent Events（以下简称 SSE）是一种基于 HTTP 协议的服务端推送技术，可以轻松地建立客户端与服务端之间的长连接，实现服务端向客户端的实时数据推送。
SSE 基于 HTTP 协议，因此无需像 WebSocket 那样建立新的连接通道，可以直接使用 HTTP 连接。同时 SSE 的推送数据是基于文本格式的，因此比 WebSocket 协议更简便。
在线考试系统中使用 SSE
一个在线考试系统需要实现以下功能：
- 教师在管理页面录入考试题目和答案。
- 学生打开试卷页面开始考试。
- 学生提交答案后可以实时得到考试结果和解析。
在这个场景下，使用 SSE 可以实现以下流程：
- 教师在录入题目和答案时，发送 SSE 消息推送给所有学生，以更新考试内容。
- 学生打开试卷页面后，与服务端建立 SSE 连接，等待服务端推送新的题目内容。
- 发送学生答案时，服务端即时更新数据库，并发送 SSE 消息推送答案和解析给学生。
基于此思路，我们可以设计 SSE 实现在线考试系统的代码。
实现思路
服务端
服务端的实现涉及到以下几个步骤：
- 建立 SSE 连接。
- 接收来自客户端发送的数据。
- 根据需求，向客户端发送 SSE 消息。
建立 SSE 连接
建立 SSE 连接需要服务端返回如下消息头：
HTTP/1.1 200 OK Content-Type: text/event-stream Cache-Control: no-cache
其中 Content-Type 的值为 text/event-stream，表示当前请求是 SSE 请求。Cache-Control 的值为 no-cache，表示不缓存返回内容。
服务端可以使用如下代码完成 SSE 连接的建立：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- --- ------- -- ---- --- ---------- ---- --- ------- --- ---- ----
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ---- - ------- -- --- ------ ----- ---- -------
-------------- -- -
---------------- - - ---- ------- - --------
-- ------
----------------接收来自客户端发送的数据
当客户端发送数据时，服务端需要监听请求的数据流和 end 事件，以获取客户端发送的数据：
-- -------------------- ---- -------
-- ------ --- -------- --------
-------------------- ----- ---- -- -
--- ---- - ---
-------------- ----- -- -
---- -- -----------------
---
------------- -- -- -
-- -- --------- ---- --- -------- ----
---
---向客户端发送 SSE 消息
服务端可以使用如下代码向客户端发送 SSE 消息：
res.write('data: {"msg": "This is a sample message"}\n\n');其中 data: 表示这是一条 SSE 消息，{"msg": "This is a sample message"} 是消息体。
客户端
客户端的实现很简单，只需要建立 SSE 连接即可。以下是客户端建立 SSE 连接的代码示例：
-- -------------------- ---- ------- ----- ----------- - --- -------------------- --------------------------------------- ----- -- - ------------------------ --- ------------------------------------ -- -- - ----------------------- ---------- --- ------------------------------------- ----- -- - --------------------- ---
其中，EventSource 是浏览器提供的一个对象，可以用来建立 SSE 连接。eventSource.addEventListener 监听事件，当 connection / message 状态改变时会回调相应的函数。
代码示例
以下是一个使用 SSE 实现在线考试系统的示例代码：
-- -------------------- ---- -------
-- --- ------
----- ---- - ----------------
--- -------- - ---
----------------------- ---- -- -
-- -------- --- -------- -
-- ----------- --- ------ -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- ---- ------- ---- ---- -- ------
---------------- ----------------------------------
- ---- -- ----------- --- ------- -
--- ---- - ---
-------------- ----- -- -
---- -- ----------------- -- ------- ------ -- ------
---
------------- -- -- -
-------- - -----------------
-------------------
----------
-- ---- ------- ---- ---- -- --- -------
-----------------------------------
---
-
- ---- -
-------------------
----------
-
----------------
-------- ---------------------------------- -
-------------------------------------- --- -- -
--- --------- - ---
-------------- ----- -- -
--------- -- -----------------
---
------------- -- -- -
------------------------------------------- -- -
-- ------ -
----- ---- - ---------------------------- -------
---------------------------
-
---
---
-------------- --- -- -
-------------------
---
-
-------- -------------------------- -
-------------------------- -- -
------------------- ------------------------------
---
-
-- --- ------
-- --- --- ---- ---- --- ------- -- --- --------- -- ---- ----
----- ----------- - --- ------------------------------------------
--------------------------------------- ----- -- -
----- ---- - -----------------------
-- ------ ---- ---- ---- --- -------- ----
---------------------
---
------------------------------------ -- -- -
----------------------- ----------
---
------------------------------------- ----- -- -
---------------------
---
-- ------ ------- ------
-------- -------------------- -
----------------------------------- -
------- -------
-------- ---------------- --------------------
----- ------------------------
---------- -- ------------------- --------------
-上述代码中，SSE 服务端监听客户端请求，当客户端 GET 请求 /exam 时，将会发送当前考试数据。当客户端 POST 请求 /exam 时，服务端会更新数据库，并将最新的考试数据发给所有客户端。
SSE 客户端实现了监听服务端发送的 SSE 消息，并更新考试视图。同时，当学生提交答案时，客户端会发送 POST 请求给服务端，以更新服务器中的数据。
学习和指导意义
通过本文，我们了解了 SSE 的基本概念和在前端项目中的实际应用场景。SSE 可以用于实时更新数据的情况，与 WebSocket 协议相比更为轻量并且简单易用。
对于开发人员而言，能够了解 SSE 的基本概念和实现思路，有助于选择最合适的技术解决方案。对于初学者而言，此篇文章也可以帮助了解常用的前端推送技术，提高开发技能。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6792e3ff504e4ea9bd6d72e0