Server-Sent Events（SSE）是一种基于 HTTP 的服务器推送技术，与 WebSocket 相似，但具有更简单的 API 和 WebSockets 不需要的一些功能，例如心跳和重新连接。 SSE 可以在客户端和服务器之间实现实时通信，并支持服务端将数据推送到客户端，从而成为实现实时数据推送的一种有效方式。
在本文中，我们将演示如何使用 Flask 和 SSE 技术来实现实时数据推送。我们将从 SSE 的基本知识入手，重点讨论如何在 Flask 应用程序中使用 SSE。
SSE 概述
SSE 技术借助了持久性连接实现了服务器向客户端推送事件的能力。持久性连接是指客户端与服务器之间的长连接，也就是说，客户端可以在连接建立后一直保持连接状态，从而达到持久的目的。当客户端处于连接状态时，服务器可以随时向客户端推送数据，从而实现实时数据推送的效果。
SSE 通过简单的 HTTP GET 请求启动连接，服务器用相应的格式将数据作为单向流发送给客户端。由于 SSE 采用 HTTP 协议，它具有更好的兼容性和可扩展性，在各种浏览器和服务端框架中都可以使用。
如何使用 SSE 实现实时通信
下面是一个使用 SSE 与 Flask 实现实时数据推送的简单示例：
-- -------------------- ---- -------
---- ----- ------ ------ --------
--- - ---------------
--- ---------------
----- ---------- --------- -- ----------- ----------
----- -----
- -- ---- ---- -- --- --- ----- ----- ------- ---- -------- -- ----- ------
---- - ----------- ----- ---------
----- ------ --------------------------------
---------------
--- --------
------ ----------------------------------
---------------------
--- ---------
------ ------------------------ -----------------------------如上所示，我们创建了一个 Flask 应用程序，并定义了一个 event_stream 生成器函数，它是一个频繁产生事件响应对象的无限循环迭代器。在这个示例中，我们使用无限循环来表示我们一直有数据要发送到客户端。
为了使 Flask 应用程序返回 SSE 响应，我们使用了 Response 类，同时将 event_stream 函数传递给这个类的构造函数。在 stream 视图函数中，当客户端发送 GET 请求时，我们返回 event_stream 生成器函数返回的响应对象，同时将 mimetype 设置为 text/event-stream。
最后，我们需要创建一个 HTML 文件来捕获 SSE 响应并将其显示在客户端浏览器中。这是一个用于捕获 SSE 响应的基本示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ----- ------ ---------------
-------
------
---- ------------------
--------
--- ------ - --- -----------------------
---------------- - --------------- -
--- ---- - -----------------------
--- --- - ------------------------------
------------- - -------------
---------------------------------------------------
--
---------
-------
-------在这个示例中，我们创建了一个名为 result 的 <div> 元素来显示来自服务器的 SSE 数据。我们使用 EventSource 类创建一个连接到 /stream URL 的 SSE 事件源。我们还定义了 onmessage 事件处理程序来捕获来自服务器的 SSE 数据，并将它们显示在 result <div> 元素中。
总结
本文我们介绍了 SSE 技术的基本知识、如何与 Flask 应用程序集成 SSE 技术来实现实时数据推送，以及如何通过 JavaScript 代码利用 SSE 技术捕获来自服务器的数据。通过本文的演示，您可以了解 SSE 技术的工作原理和使用场景，以及了解如何在 Flask 应用程序中使用 SSE 技术来实现实时数据推送。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dd2e8ff6b2d6eab3840e36