在前端开发中，实时推送是一个常见的需求，比如在线考试中的成绩实时推送。Server-Sent Events (SSE) 是一种可以在客户端通过纯 JavaScript 代码监听服务器端实时消息的技术。在这篇文章中，我们将讨论如何使用 SSE 在在线考试成绩实时推送中实现实时通信。
SSE 简介
SSE 是一种 HTML5 规范中的服务器推送技术。与传统的长轮询或 WebSockets 相比，SSE 有如下一些优点：
- 使用原生的 HTTP 协议通信，无需任何插件或框架。
- 不需要建立 TCP 连接，减少网络延迟。
- 可以发送多个数据事件，每个事件都有自己的类型和数据。
简单实现
在实际项目中，我们常常使用 SSE 在服务器端向客户端推送数据。下面的示例代码演示了一个简单的实现方法，用于在线考试中实时推送成绩。
服务器端
我们在服务器端使用 Node.js 作为开发环境，使用 Express 框架托管页面和设置路由。在下面的例子中，我们向客户端推送一个随机生成的成绩数据，并设置事件名称为“score”。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
-------------------------------- - ------------
----------------- -------- ----- ---- -
---------
---------------- -----------
--------------- --------------------
----------- -------------
---
-------------------- -- -
--- ----- - ------------------------ - -----
----------------- ------------ ---------------
-- ------
---
---------------- -- -- -
------------------- ----- -- ---- -------
---客户端
我们在客户端使用 JavaScript 代码监听从服务器端推送的数据事件，当事件名称为“score”时更新成绩。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- ------------
-------
------
-------------
------------ ------------------------
--------
----- ------ - --- ----------------------
----- ------- - ---------------------------------
---------------- - -------- ------- -
-- ----------- --- --- -
--- ---- - -----------------------
-- ----------- --- -------- -
----------------- - ----------
-
-
--
---------
-------
-------添加用户验证
在实践中，我们需要校验用户的身份并只向特定用户推送成绩数据。下面的示例代码演示了如何向特定用户推送数据。
服务器端
我们使用 Express 框架处理 HTTP 请求，并使用 cookie-parser 中间件读取 cookie 值。在下面的例子中，我们通过 cookie 中的用户 ID 来实现用户身份验证。此外，我们只向通过身份验证的用户推送数据。
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - -------------------------
----- --- - ----------
-------------------------------- - ------------
------------------------
----- ---------- - ---
----------------- -------- ----- ---- -
----- ------ - -------------------
-- ------- -- ------ --- -- -- ------------------ --- ---------- -
------------------ - ------------------------ - -----
-
---------
---------------- -----------
--------------- --------------------
----------- -------------
---
----- ---------- - -------------------- -- -
-- -------------- -- ------------------ --- ---------- -
----------
------- ------------ ------------------
------ -------------------
------- -------
--------
--
-
-- ------
--------------- -------- -- -
--------------------------
---
---
---------------- -- -- -
------------------- ----- -- ---- -------
---客户端
我们在客户端使用 JavaScript 代码发送 HTTP 请求并从服务器端接收数据事件。我们使用 fetch API 发送 HTTP 请求，并使用 SSE API 接收数据事件。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- ------------
-------
------
-------------
------------ ------------------------
--------
----- ------- - ---------------------------------
----------------------------- ---------- -
----- ------ - --- ----------------------
---------------- - -------- ------- -
-- ----------- --- --- -
--- ---- - -----------------------
-- ----------- --- --------- -- ----------- --- ---------- -
-- ------------ --- -------------------------------- -
----------------- - -----------
-
-
-
--
---
---------
-------
-------总结
SSE 技术使得我们可以通过简单的 HTTP 请求和实现推送服务向客户端提供实时通信。在在线考试等需要实时推送数据的应用中，SSE 可以大大提高用户体验。当然，在实践中，我们还需要考虑数据安全性和性能问题。在下一篇文章中，我们将讨论如何使用 WebSockets 技术实现实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654eaf4a7d4982a6eb7cba4d