引言
在现代 Web 应用程序开发中，实时数据推送变得越来越重要。在过去，开发人员不得不通过 AJAX 长轮询或 WebSockets 来实现实时通信。不过, 这些方法对于实现简单的实时通信来说过于繁琐。Server-Sent Events（SSE）是一种轻量级的技术，可以轻松地实现服务器向客户端发送实时数据。
本文将介绍如何使用 SSE 在前端应用程序中实现实时数据推送。文章将涵盖 SSE 是什么、如何在前端使用 SSE、如何从服务器端进行 SSE 推送以及使用 JavaScript 编写 SSE 示例代码。
什么是 Server-Sent Events（SSE）？
Server-Sent Events（SSE）是一个 HTML5 API，可以在客户端和服务器之间建立单向连接。服务器可以通过这个连接不断地向客户端发送新数据，而无需进行客户端的请求。这使得 SSE 成为一个非常有用的技术，例如，可以在提示框中显示实时更新，获取最新的股票报价，或者在 Web 应用程序中收到及时的通知。
SSE 协议基于 HTTP，因此 SSE 消息可以通过任何 HTTP 服务器和客户端进行传输。SSE 消息采用文本格式（text/event-stream）并具有以下特点：
- 单向传输，即服务器端向客户端发送信息
- 所有数据都是文本格式
- 使用“事件”（event）将消息分组
在 SSE 消息中，多个消息可以使用换行符分隔。每个消息通常由标题和正文组成。标题包括消息标识符、事件类型和可选的超时机制。
下面是一个 SSE 消息示例：
id: 123\n event: greeting\n data: Hello, world!\n\n
在这个示例中，id 是消息标识符，event 是事件类型，data 是消息的正文。\n 表示消息结束。
如何在前端使用 SSE？
使用 SSE 在前端应用程序中实现实时数据推送非常容易。只需要在前端添加一个事件侦听器来监听消息，并且通过 HTTP 请求来创建 SSE 连接即可。下面是一个简单的 ES6 类，用于处理 SSE 连接：
-- -------------------- ---- -------
----- --------- -
---------------- -
-------- - ----
-
----------------- -
-- ------------ --- ---------- -
----------- - --- ----------------------
--------------------------------------- - -- -
--------------------- --------- --------
-----------------
---
-
-
------- -
-- ------------- -
--------------------
----------- - ----------
-
-
-在这个示例中，SseClient 类接受一个 URL，该 URL 指示 SSE 服务器的位置。connect 方法使用 EventSource 类创建一个 SSE 连接，并侦听 message 事件来接收从服务器发送的消息。在接收到消息时，将执行提供的回调函数。
要使用 SseClient，只需在 Vue.js 项目中创建一个全局服务：
-- -------------------- ---- -------
------ --- ---- ------
------ --------- ---- ------------------
------ ------- -
--------- -
----- --- - --- ------------------------------------------
------------------ - ----
-----------
--------------- -
------------
--
---
--
--在这个示例中，我们将 SseClient 实例作为全局 Vue 服务注入到 Vue.prototype 中。我们还通过混合来销毁 SSE 连接。
最后，只需在 Vue.js 组件中使用 $sse.connect 来侦听 SSE 事件：
-- -------------------- ---- -------
----------
-----
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
--------- -
------------------------- -- -
------------ - --------
---
--
--
---------在这个例子中，我们将接收到的消息分配给组件实例中的 message 属性。此时，每当从服务器端发送 SSE 消息时，该组件都会接收到消息并在页面上显示。
如何从服务器端实现 SSE 数据推送？
要使用 SSE 在服务器和客户端之间发送实时数据，需要使用一个基于 HTTP 服务器的服务器端脚本。下面是一个 Node.js 脚本来实现 SSE 消息推送：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------------- --------- -- -
-- ------------ --- ---------- -
----------------------- -
--------------- --------------------
---------------- -----------
------------- -------------
---
----- ---------- - -------------- -- -
----- ---- - --- ----------------------------
--------------------- --------------
-- ------
------------------- -- -- -
--------------------------
---
- ---- -
---------------------------------- -------------
------------------------
--------------
--------- -----
------
------
---------- ---------------
-------
------
------- ------------
--------
----- ------ - --- -----------------------
---------------------------------- - -- -
--------------------- --------- --------
---
---------
-------
-------
---
-
---
------------------- --- -- -
-- ----- -
------------------ -------- --------- -----
- ---- -
------------------- --------- -- ---- -------
-
---在这个例子中，我们创建了一个 Node.js HTTP 服务器，并注册了一个名为 /stream 的 SSE 端点。在 /stream 端点上，我们将响应头设置为 text/event-stream，Cache-Control 设置为 no-cache，并且Connection 设置为 keep-alive。然后，我们使用 setInterval 函数为客户端推送每秒一个 SSE 消息。当客户端连接断开时，我们清除 setInterval。
在主页端点上，我们向客户端呈现了一个简单的 HTML 页面，用于接收来自 SSE 服务器的消息。
结论
Server-Sent Events 是一种轻量级的技术，可以轻松地实现服务器向客户端实时推送数据。在前端应用程序中，使用 SSE 可以通过一个简单的 ES6 类来处理 SSE 连接。在服务器端，任何 HTTP 服务器可以用于发送 SSE 消息。这使得 SSE 成为构建实时应用程序的理想选择。
服务器端 SSE 推送示例代码：https://github.com/dmnsgn/sse-example
前端 SSE 推送示例代码：https://codepen.io/hayden-george/pen/RLaYPp
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6716bd96ad1e889fe21de00b