在现代 Web 应用中，实时数据展示已经成为了越来越重要的一部分。比如在线监控、实时统计等场景，都需要能够及时展示数据变化的功能。在这篇文章中，我们将介绍如何使用 Server-Sent Events 和 Flask 实现实时图表展示。
Server-Sent Events 简介
Server-Sent Events（简称 SSE）是一种基于 HTTP 的实时通信技术，它可以让服务器向客户端推送事件流。与 WebSocket 不同，SSE 是一种单向通信协议，只能由服务器向客户端发送数据，无法由客户端向服务器发送数据。
SSE 的使用非常简单，只需要在服务器端发送一些特定格式的数据即可，客户端则可以通过 JavaScript 监听这些数据并进行处理。下面是一个简单的 SSE 示例：
---- ----- ------ ------ --------
--- - ---------------
------------------
--- ------
--- ---------------
--- - -- ----------
----- ------ -----------------
-------------
------ ------------------------ -----------------------------在上面的代码中，我们定义了一个 /sse 路由，该路由返回一个 Response 对象。event_stream 函数是一个生成器，它会向客户端发送一系列事件流数据。每次发送数据时，我们需要在数据前面添加 data: 前缀，并在数据后面添加两个换行符，以满足 SSE 规范的要求。
在客户端中，我们可以使用 JavaScript 监听该路由的 SSE 事件流，比如：
--- ------ - --- --------------------
---------------- - --------------- -
------------------------
--这段代码会在浏览器控制台中输出 0 到 9 的数字，每秒输出一次。
Flask SSE 应用
有了 SSE 的基础知识，我们来看看如何在 Flask 中使用 SSE 实现实时图表展示。
首先，我们需要在 Flask 中定义一个 SSE 路由，用于向客户端发送实时数据。在这个例子中，我们假设我们要展示一个实时的 CPU 使用率图表，每秒钟更新一次。我们可以使用 psutil 库来获取 CPU 使用率数据：
------ ------
------------------
--- ------
--- ---------------
----- -----
----------- - ------------------------------
----- ------ ---------------------------
------ ------------------------ -----------------------------在这个例子中，我们每秒钟获取一次 CPU 使用率，并将其发送给客户端。注意到这里使用了一个无限循环，这是因为 SSE 是一种持久连接，会一直保持连接直到客户端关闭连接或者服务器端关闭连接。
有了 SSE 路由之后，我们需要在前端页面中使用 JavaScript 来监听 SSE 事件流，并将实时数据更新到图表上。这里我们使用 Chart.js 来绘制图表，具体代码如下：
--------- -----
------
------
--------------- --- -------------
------- -----------------------------------------------------
-------
------
------- ------------------------
--------
--- -------- - --- ------------------------------------------------------------ -
----- -------
----- -
------- ---
--------- --
------ ---- -------
----- ---
------------ -------
----- ------
---
--
-------- -
----------- -----
------- -
------ --
-------- -----
---
------ --
-------- -----
------ -
---- --
---- ----
--
---
--
--
---
--- ------ - --- --------------------
---------------- - --------------- -
--- ---------- - -----------------------
--- --------- - --- ----------------------------
-------------------------------------
------------------------------------------------
------------------
--
---------
-------
-------在这个例子中，我们创建了一个折线图表，用于展示 CPU 使用率。在 SSE 事件流中，每次获取到一个新的 CPU 使用率数据时，我们会将其添加到图表数据中，并调用 cpuChart.update() 方法来更新图表。
最后，将上面的 SSE 路由和前端页面组合起来，我们就可以实现一个实时的 CPU 使用率图表了。完整的 Flask 应用代码如下：
---- ----- ------ ------ --------- ---------------
------ ------
--- - ---------------
---------------
--- --------
------ -----------------------------
------------------
--- ------
--- ---------------
----- -----
----------- - ------------------------------
----- ------ ---------------------------
------ ------------------------ -----------------------------
-- -------- -- -----------
-------------------总结
本文介绍了如何使用 Server-Sent Events 和 Flask 实现实时图表展示。SSE 是一种基于 HTTP 的实时通信技术，可以让服务器向客户端推送事件流。在 Flask 应用中，我们可以通过定义 SSE 路由来向客户端发送实时数据。在前端页面中，我们可以使用 JavaScript 监听 SSE 事件流，并将实时数据更新到图表上。这种技术可以被广泛应用于实时监控、实时统计、实时日志等场景中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cad745add4f0e0ff4aff05