本文介绍了如何在 Flask 中使用 SSE(Server-Sent Events)实现实时更新。SSE 是一种基于 HTTP 的服务器推送技术，它可以在 Web 页面和服务器之间建立一条持久的连接，使得服务器可以随时向客户端发送数据。
SSE 的优势
使用 SSE 技术有以下优势：
实时性：SSE 基于 HTTP 长连接，服务器可以实时将更新的数据传送给客户端，不需要客户端轮询或者刷新页面。
轻量级：SSE 的协议只是普通的 HTTP 协议，因此它不需要任何插件或者额外的网络连接，只需要一个浏览器即可，是实现实时更新最简单的方式之一。
可靠性：SSE 的协议是可靠的，即使网络连接断开或者服务器重新启动，浏览器可以自动尝试重新连接。
兼容性：SSE 协议得到了大部分现代浏览器的支持，包括 Chrome，Firefox 和 Safari。
Flask SSE 实现
在 Flask 中使用 SSE 实现实时更新可以分为两个部分：
服务端的实现：定义一个路由，返回 SSE 对象的响应。
客户端的实现：使用 JavaScript 捕获 SSE 对象的响应并更新页面。
服务端实现
在 Flask 中实现 SSE 需要使用到 Flask-SSE 扩展，该扩展提供了 SSE 对象定义、注册路由、广播等功能。
首先，我们需要在应用中安装 Flask-SSE 扩展：
pip install flask-sse
在创建应用时，加载 Flask-SSE 扩展：
from flask import Flask, render_template from flask_sse import sse app = Flask(__name__) app.config["REDIS_URL"] = "redis://localhost" app.register_blueprint(sse, url_prefix="/stream")
创建一个简单的 SSE 服务，该服务通过订阅 Redis 的 publish 消息，不断向客户端广播消息：
-- -------------------- ---- -------
---------------
--- -------
------ -----------------------------
----------------------
--- ----------
------- - ------- -----
-------------------- --------- ---------------
------ -------- ------
-- -------- -- -----------
-------------------在上面的代码中，subscribe 方法表示接收 Redis 的 publish 消息，并将消息发送到所有已经连接的客户端。接着，我们定义了一个简单的路由 /publish，每当请求该路由时，都会向客户端广播一条消息。
客户端实现
在网页中，我们需要使用 JavaScript 监听 SSE 并更新页面。使用 SSE 的方式与 AJAX 相似，但是与 AJAX 不同的是，SSE 可以持续接收服务器的消息。
var source = new EventSource('/stream');
source.onmessage = function(event) {
document.getElementById('message').innerHTML += event.data;
};在上面的代码中，我们创建了一个 SSE 的源，它会向 /stream 路由发送请求。同时，我们监听了 onmessage 事件，表示当 SSE 发来消息时触发，然后将消息的内容更新到页面。在我们的页面中，需要定义一个消息显示区域：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ---------------
-------
------
---- -------------------
------- -------------------------------
-------
-------在页面中引用我们的 JavaScript 文件，当用户打开页面时，会自动连接 SSE 并开始接收服务器的消息。
总结
SSE 是实现 Web 实时更新最简单的方式之一，它基于 HTTP 协议，可以在浏览器和服务器之间建立一条持久的连接。本文介绍了如何在 Flask 中使用 SSE 完成实时更新的功能，同时给出了一个完整的示例代码。SSE 的优点在于它可以很容易地实现实时更新，同时在不同的设备和浏览器上具有较好的兼容性，希望本文能对大家能有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc4db0f6b2d6eab321c6c8