HTML5 提供了一种新型的服务器推送技术——Server-Sent Events（SSE），它允许从服务器向客户端发送一次或多次的事件流，而无需在每个事件之间建立新的 HTTP 请求。JavaScript 可以方便地处理这些事件流，实现实时数据传输和即时通信。本文将介绍 SSE 的基本原理、使用方法和实际应用，并提供一些示例代码。
Server-Sent Events 基本原理
SSE 是一种基于 HTTP 协议的轻量级协议，它利用了浏览器的 EventSource API，通过长轮询的方式从服务器获取数据。与 WebSockets 不同，SSE 只支持单向数据流，即从服务器向客户端发送数据，但无法像 WebSockets 那样双向通信。
SSE 的数据格式采用纯文本或 JSON 格式，在服务器端设置 MIME 类型为 text/event-stream，并使用多行文本块（多个行数据组成，以空行分隔）来传输事件流，每个事件由 event、data、id、retry 四个字段组成。其中 event 为事件名称，data 为事件数据，id 为事件编号，retry 为重发时间。浏览器内置了对 SSE 的处理机制，只需使用 EventSource API 就可以轻松获取并处理来自服务器的事件流。
使用方法
使用 SSE 非常简单，只需要在服务器端设置 MIME 类型为 text/event-stream，并按照 SSE 的数据格式发送事件流即可。客户端则可以使用 EventSource API 来与服务器进行通信。下面是一个简单的 SSE 使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------ ----------
--------
--- ------ - --- --------------------
---------------- - --------------- -
------------------------
--
---------
-------
------
-------
-------上面的示例代码中，我们使用 EventSource API 对 /sse 接口进行长轮询，并在收到服务器端传来的消息时，在控制台输出消息内容。然后在服务器端，我们可以使用 Node.js 和 Express.js 实现一个 SSE 服务的示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----------------------------------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
---
---------------- -- -- -
-----------------------
---在上面的代码中，我们使用 Express.js 实现了 /sse 接口，然后通过 setInterval 定时发送一段事件流。在 SSE 中，每个事件流都必须以一个空行结束，所以我们在 data 后面加上了一个 \n\n 换行符。然后浏览器会每秒钟自动接收一次来自服务器的消息，并在控制台输出相应的时间戳。
实际应用案例
SSE 可以轻松实现实时数据传输和即时通信，适用于在线聊天、实时监控、股票行情、天气预报、网页推送等场景。下面是一个简单的在线聊天应用案例，使用 SSE 实现了实时消息推送：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
------ ----------------
----- -
------ ------
------- ------
------- --- ----- -----
--------- -----
-
--------
--------
--- ------ - --- --------------------
---------------- - --------------- -
----------------------------------------- -- ---------- - -----
--
-------- ------------- -
--- ----- - ---------------------------------
--- ------- - ------------
--- --- - --- -----------------
---------------- -------- ------
------------------------------------ ----------------------------------
--------------------------------- -----------
----------- - ---
-
---------
-------
------
---- ----------------
------ ---------- ----------- --------------------
------- -----------------------------------
-------
--------- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- --- - ----------
----- -------- - ---
----------------------------------
---------------------------
--------------- ----- ---- -- -
---------
--------------- --------------------
---------------- -----------
------------- ------------
---
-------------- -- -
----- ---- - ------ ---------------------------------
----------------
-- ------
---
----------------- ----- ---- -- -
----- ------- - -----------------
-----------------------
---------------
---
---------------- -- -- -
-----------------------
---在上面的代码中，我们使用 SSE 实现了一个在线聊天室应用，用户可以在网页上输入消息并发送，服务器会将接收到的消息存储在一个数组中，然后在每秒钟使用 SSE 将这个数组发送给客户端。客户端使用 JavaScript 将这些消息显示在网页上。
总结
SSE 是一种轻量级的服务器推送技术，可以方便地实现实时数据传输和即时通信。它的使用方法和 WebSocket 有所不同，适用于只需要单向数据流的场景。在实际应用中，SSE 可以帮助开发者快速实现实时数据传输和客户端推送，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650180bb95b1f8cacdf3604c