介绍
SSE（Server-Sent Events，服务器推送事件）是一种 HTML5 规范，用于在客户端与服务器之间，实现实时数据监控和推送。
与 WebSocket 相比，SSE 更加简单、轻量级，且不需要建立重量级的双向连接，只需要单向的 HTTP 连接即可。
SSE 可以用于一些需要实时数据更新的应用场景，比如即时通讯、监控系统、大屏数据展示等。
本文将介绍使用 SSE 实现实时数据监控和应用的具体实现过程，包括 SSE 的定义、SSE 使用示例以及 SSE 实现的技术细节。
SSE 定义
SSE 定义了一种服务器向客户端推送事件的技术，与基于轮询或长轮询的方式相比，SSE 更加高效，且能够提供实时的数据通知。
SSE 的工作流程如下：
- 客户端向服务器发送一个请求，这个请求是一个普通的 HTTP 请求；
- 服务器返回数据，并且使用特殊的 MIME 类型
text/event-stream标识这个响应； - 客户端通过
EventSource对象来接收服务器发来的数据； - 服务器发送数据时，采用多条数据片段，每个片段一般称为“事件”，事件是一个纯文本形式的字符串；
- 客户端通过
onmessage回调函数来监听收到的事件。
SSE 使用示例
以下是一个基于 SSE 的实时数据监控的使用示例：
服务器端代码
先来看服务器端的代码实现，这里以 Node.js 为例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
---
-------------- -- -
----- ---- - ------ ----- ---------------------------
----------------
-- ------
---
------------------- -- -- -
---------------- ------ --------- -- ---- -------
---上面的代码会启动一个 HTTP 服务器监听 8080 端口，当客户端通过 HTTP 请求来访问该 URL 时，服务器会通过 SSE 返回当前的时间。
客户端代码
接着来看客户端的代码实现，这里使用纯 HTML 和 JavaScript 实现：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
---------- ----------
---- ----------------
--------
----- ----------- - --- -----------------
--------------------- - ------- -- -
----- ---- - --------------------------------
-------------- - -----------
--
---------
-------
-------上面的代码首先创建了一个 EventSource 对象，将其指向服务器端的 URL，然后通过 onmessage 回调函数监听从服务器端返回的事件，将其显示在页面上。
SSE 实现技术细节
1. MIME 类型
SSE 的数据格式采用纯文本的格式，而数据的传输方式采用 HTTP 协议。
为了告诉浏览器这个返回的内容是 SSE，服务器需要在响应头信息中设置 MIME 类型为 text/event-stream。
2. 事件类型
在 SSE 里面，所有的事件都是由以“event:”开头的一行和以“data:”开头的一行构成。
事件的类型通过“event:”指定，如果没有指定，则默认事件类型为“message”，比如：
event: myEvent data: My event is fired
这里的事件类型为“myEvent”，事件内容为“My event is fired”。
3. 多条消息
为了实现多条消息的连续发送，而不需要关闭连接再重新建立连接，服务器在发送消息时，可以采用多条数据片段来发送事件，每个片段一般称为“事件”。
事件之间使用空行分隔，这个空行用来告诉浏览器这个是一个新的事件，如下所示：
data: This is the first line of my message data: second line data: third line data: the fourth line
上面的代码中，一共发送了 4 个事件，每个事件通过“data:”开头，然后后面跟上一行表示具体的内容。
4. 断线重连
由于 SSE 的特殊性，可以在一个 HTTP 连接中通过不断的发送事件来实现实时数据推送，这样会长时间占用服务器资源。
为了减轻这种负担，客户端可以采用重连机制，定期断开 HTTP 连接，重新建立一个新的连接来接收服务器端的事件。
重连可以定义为一段时间间隔，比如每 30 秒重连一次。
-- -------------------- ---- -------
------------------------------------- ------- -- -
-- ----------------- --- ----------------- -
--------------------
------------- -- -
----------- - --- -----------------
--------------------------------------- ---------------
-- -------
-
-- -------上面的代码定义了一个错误回调函数，当 EventSource 出现错误时，会先关闭连接，然后再过 30 秒之后重新建立一个新的 EventSource 连接。
总结
SSE（Server-Sent Events）作为一种实现服务器端实时数据监控和推送的技术，具有轻量级和简单易用的特点，能够满足一些实时数据通知的应用场景。
本文详细介绍了 SSE 的定义、使用示例以及 SSE 实现的技术细节，希望对前端开发者们能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0f5a1b5eee0b5257f98dd