在现代 web 开发中，很多应用需要实现实时的数据更新以提供更好的用户体验。常见的实现方式有长轮询、WebSockets 和 Server-sent Events。其中，Server-sent Events 是一个非常适合实现实时 online 课堂的方式。
Server-sent Events 简介
Server-sent Events（通常缩写为 SSE）是一种服务器端主动向客户端推送数据的技术。它遵循基于 HTTP 的单向流协议，简单易用，而且不需要特殊的服务器端软件支持。
SSE 的核心思想很简单：客户端向服务器发送一个 GET 请求，服务器在建立连接之后会向客户端不断地主动推送数据，直到客户端关闭连接。而推送的数据可以是任何格式，如 JSON、XML、HTML 等。
SSE 有很多优点，如：
- 简单易用。相比 WebSockets，SSE 更加简单易用。
- 更好的兼容性。WebSockets 需要较新的浏览器支持，而 SSE 则可以兼容较老的浏览器。
- 更好的性能。相比长轮询和短轮询，SSE 更加高效，因为它使用了 HTTP/2 中的流控制技术。
- 更加稳定。相比 WebSockets，SSE 更加稳定，因为它基于 HTTP 协议，可以避免一些网络安全问题。
使用 SSE 实现实时在线课堂
下面我们来看如何使用 SSE 实现一个实时在线课堂。
服务端实现
在服务端，我们需要使用 Node.js 的 http 模块启动一个 HTTP 服务。然后，在客户端发送 GET 请求到 /subscribe 路径时，服务器可以不断地向客户端推送数据。
以下是一个简单的 Node.js 实现（假设我们已经有了一个课堂管理系统，可以不定时推送最新的课堂信息）：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ------------- -
-- -------- -----------------
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ---------
-------------- -- -
---------------- ------------------------------------------
-- ------
- ---- -- -------- --- ---- -
------------------ ---------------- --------------
---------
------
------
---------------------
-------
------
---------------
--------
----- -- - --- --------------------------
------------ - ------- -- -
----- ----- - -----------------------
-- ------
-------------------
--
---------
-------
-------
---
- ---- -
-------------------
------------ --------
-
--------------- -- -- -
------------------- --------- -- ------------------------
---
-------- ---------------- -
-- ---------
------ -
--- --
----- ----------- ----
-------- -----
---------- ----------- ----------
-------- ----------- ----------
--------- ------- ------ -------
--------- -
- ----- ------ -------- ---------- --
- ----- ------ -------- ---------- -
-
--
-在上面的代码中，当客户端发送 GET 请求到 /subscribe 路径时，服务器会通过 setInterval 不断地向客户端推送最新的课堂信息。
注意：
- 响应头必须设置为
text/event-stream，这是 SSE 的规范。 - 响应头必须设置为
Connection: keep-alive，这是保持 SSE 长链接的关键。 - 推送的数据必须以
data:开头，并以\n\n结尾。
客户端实现
在客户端，我们可以通过 JavaScript 的 EventSource API 来订阅服务器发送的推送数据。如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---------------
--------
----- -- - --- --------------------------
------------ - ------- -- -
----- ----- - -----------------------
-- ------
-------------------
--
---------
-------
-------当客户端执行 new EventSource('/subscribe') 时，浏览器会自动向服务器发送 GET 请求，然后订阅服务器发送的推送数据。
注意：
- 服务器推送的每一个数据都会触发
onmessage事件。 - 推送的数据必须是以 JSON 格式发送的。
总结
本文介绍了如何使用 Server-sent Events 实现实时在线课堂，并在服务端和客户端提供了相应的示例代码。使用 SSE 可以让我们更加方便地实现实时数据更新的功能，提升用户体验。同时，SSE 也是一种简单且高效的通信协议，具有一定的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ebab1968c7c53b00f7c82