在 Web 前端开发中，数据的实时更新是一个常见的需求。这时候，传统的轮询方式就不再适用了，因为它会占用过多的带宽，并且浪费了客户端与服务端之间的额外通信。而 Server-Sent Events（SSE，服务器推送事件）是一种实时消息传递方式，它可以有效地解决实时更新的问题。
SSE 概述
SSE 是一种基于 HTTP 协议的实时消息传递方式，它允许服务端向客户端推送实时更新的数据。SSE 可以被视为服务器端推送数据给客户端的一个单向管道。客户端通过建立 HTTP 连接，可以订阅特定的数据流，而服务端则会不断地把最新的数据推送给客户端。
SSE 通常使用以下三个 HTTP 头信息：
Content-Type: text/event-stream：指定 HTTP 返回内容的格式为 SSE。Cache-Control: no-cache：告诉浏览器不要缓存 SSE 数据，以保持数据的实时性。Connection: keep-alive：告诉浏览器保持与服务器的持久连接，以便后续的推送数据。
SSE 的一个简单例子如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ------------
-------
------
--------------- ------ ---------
----------- -------------
--- -------------------
--------
----- -------- - ------------------------------------
-- ---- --- --
----- --- - --- -----------------------
-- ------
------------- - ------- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------------
--
---------
-------
-------在上面的例子中，我们创建了一个 SSE 对象，并指定了服务器端的端点 /stream。然后，我们监听了 SSE 对象的 onmessage 事件，当服务端推送新的数据时，就会触发该事件，并在页面上添加新的消息。
服务端实现 SSE
服务端实现 SSE 的方式有很多种，这里我们以 Node.js 为例进行讲解。Node.js 提供了一个 http 模块，可以很方便地创建一个 HTTP 服务器，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------------
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
- ---- -
-------------------
----------
-
----------------在上面的代码中，我们创建了一个 HTTP 服务器，并判断客户端请求的 URL 是否为 /stream。如果是，我们就发送与 SSE 相关的 HTTP 头信息，并与客户端建立一个持久连接。然后，我们可以利用 setInterval 定期向客户端推送数据。
使用 SSE 实现实时聊天室
使用 SSE 实现实时聊天室是一个非常好的练手项目。下面是一个简单的实现：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
------
--------------
--- -------------------
------
------ ----------- -------------
------ ------------- -----------
-------
--------
----- -------- - ------------------------------------
----- ---- - -------------------------------
----- ----- - -----------------------------------
-- ---- --- --
----- --- - --- -----------------------
-- ------
------------- - ------- -- -
----- -- - -----------------------------
-------------- - -----------
-------------------------
--
-- --------
------------------------------- ------- -- -
-----------------------
----- ---- - ------------
----------- - ---
----- --- - --- -----------------
---------------- ------------
------------------------------------ -------------------------------------
---------------------------------------------
---
---------
-------
-------在上面的代码中，我们创建了一个实时聊天室页面，并在页面中添加了一个表单，用于发送消息。我们监听了表单提交事件，当用户提交表单时，会向服务器端发送一个 POST 请求，并将发送的数据编码为 URL 参数。在服务器端，我们使用 SSE 将新的消息推送给客户端。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------
----- -------- - ---
----------------------- ---- -- -
-- -------- --- ---------- -
------------------ -
--------------- --------------------
---------------- -----------
------------- ------------
---
-- --------------
----- ---------- - -------------- -- -
-- ---------------- - -- -
----- ---- - ------ -------------------------
----------------
-
-- ------
-- ----------------
--------------- -- -- -
--------------------------
---
- ---- -- ----------- --- ------ -- ------- --- ----------- -
--- ---- - ---
-------------- ------- -- -
---- -- -----------------
---
------------- -- -- -
----- ---- - -----------------------------
--------------------
-------------------
----------
---
- ---- -
-------------------
----------
-
----------------在上面的服务器端代码中，我们维护了一个消息数组 messages，并在客户端向服务器端发送消息时，将消息加入到该数组中。当其他客户端请求 /stream 时，我们使用 SSE 向客户端推送最新的消息。同时，我们通过绑定 req 对象的 close 事件，实现当客户端断开连接时，停止向客户端发送数据。
总结
通过本文的学习，我们了解了 SSE 的基本原理和实现方式，并使用 SSE 实现了一个实时聊天室。SSE 是一种简单、实用的实时数据传输方式，在 Web 前端开发中具有广泛的应用。希望本文对你有所帮助，欢迎评论交流！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646bd4a0968c7c53b0afcb24