Server-Sent Events (SSE)，也称为 EventSource，是 HTML5 标准中的一种实时通信技术，它可以让浏览器和服务器之间建立持久连接，实现服务器向客户端推送数据的功能。SSE 广泛应用于实时监控系统，如股票行情、交通路况等，本文将介绍如何实现 SSE 并应用于实时监控系统中。
SSE 的基本原理
SSE 基于 HTTP 协议，客户端通过向服务器发送一个 HTTP 请求，请求头中包含了 Accept: text/event-stream，服务器在接收到这个请求后，会把数据以流的形式发送给客户端，客户端通过监听 message 事件来接收数据。SSE 中的数据是文本格式，每条数据由一个或多个字段组成，字段之间使用换行符 \n 分隔，最后以两个换行符结束。
实现 SSE
服务器端
在服务器端，需要返回一个包含 Content-Type: text/event-stream 的 HTTP 响应，代码如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- -----------
-------------- -- -
----- ---- - ------ ----- ----------------------------------
----------------
-- ------
----------------上述代码中，我们创建了一个 HTTP 服务器，当客户端发起请求时，返回一个包含 Content-Type: text/event-stream 的 HTTP 响应，并每隔一秒钟向客户端发送一条数据。
客户端
在客户端，可以通过 EventSource 对象来接收服务器端发送的数据，代码如下所示：
const source = new EventSource('/sse');
source.addEventListener('message', (event) => {
console.log(event.data);
});上述代码中，我们创建了一个 EventSource 对象，将其连接到服务器端的 /sse 路径，然后通过监听 message 事件来接收服务器端发送的数据。
应用 SSE
在实时监控系统中，我们可以通过 SSE 来实现实时数据的推送，例如股票行情系统，我们可以将股票的价格、涨跌幅等数据发送给客户端，并通过 JavaScript 来更新页面上的数据。下面是一个简单的股票行情系统的示例代码：
服务器端
-- -------------------- ---- -------
----- ---- - ----------------
----------------------- ---- -- -
------------------ -
--------------- --------------------
---------------- -----------
------------- -------------
---
-- ---------------
-------------- -- -
----- ---- - ------ ------------------
------- -------
------ ------------- - ----
------- ------------- - -- - --
---------
----------------
-- ------
----------------上述代码中，我们每隔一秒钟发送一条股票行情数据，数据格式为 JSON 格式。
客户端
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
-------
-------
----
-----------
-----------
------------
-----
--------
------ ------------------------
--------
--------
----- ------ - --- --------------------
---------------------------------- ------- -- -
----- ----- - -----------------------
----- -- - -----------------------------
------------ - -
------------------------
----------------------------------
------------------------------------
--
----- --------- - --------------------------------------
--------------------------
---
---------
-------
-------上述代码中，我们通过 EventSource 对象来接收服务器端发送的股票行情数据，并使用 JavaScript 动态更新页面上的数据。
总结
本文介绍了 SSE 技术的基本原理及如何实现 SSE 并应用于实时监控系统中。SSE 技术可以减少服务器和客户端之间的网络请求，提高数据传输的效率，适用于实时监控、消息推送等场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6631afc8d3423812e4f62b3d