什么是 Server-Sent Events？
在传统的 Web 应用程序中，客户端通过轮询服务器来获取最新的数据。这种方式并不高效，因为它需要不断向服务器发送请求，而服务器也需要不断地响应这些请求，即使在没有新数据可用时也是如此。这种方式会对服务器和网络造成不必要的压力。
Server-Sent Events（简称 SSE）是一种通过 HTTP 协议实现服务器向客户端推送数据的技术。它是一种轻量级、低延迟的双向通信方式。使用 SSE，服务器可以将数据推送到客户端，而客户端则可以通过监听服务器发送的事件来获取最新的数据。SSE 还支持自定义事件和数据格式，使得开发者可以自由地传递各种类型的数据。
SSE 使用简单，适用于实时通信或数据更新的场景。它可以用于实现聊天室、实时数据展示等应用程序，也可以用于监控等高并发场景。下面我们将详细介绍如何使用 SSE 和 Flask 构建实时 Web 应用程序。
如何使用 Flask 实现 SSE？
Flask 是一个轻量级的 Python Web 框架，它提供了简单易用的 API，可以让你快速构建 Web 应用程序。为了使用 SSE，我们需要使用 Flask 开发一个简单的 SSE 服务端程序。我们先来看一下 Flask 如何实现 SSE 的方法。
实现 SSE 的基本思路
实现 SSE 的基本思路是使用 Flask 的视图函数来处理客户端的请求，并在函数内部利用 SSE 的协议将数据发送给客户端。具体来说，我们需要完成以下几个步骤：
- 创建一个 Flask 程序
- 创建一个 SSE 视图函数
- 在 SSE 视图函数中使用 SSE 的协议向客户端发送数据
创建 Flask 程序
我们首先需要创建一个 Flask 程序。通过下面的代码可以创建一个简单的 Flask 应用程序：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return 'Hello World'上面的代码创建了一个名为 app 的 Flask 应用程序，并且定义了一个名为 index 的视图函数，当用户访问网站首页时会调用该函数。
创建 SSE 视图函数
接下来，我们需要在 Flask 中创建一个 SSE 视图函数来处理 SSE 请求。SSE 视图函数需要使用 Flask 提供的特定装饰器 @app.route 来生成一个 SSE 路由。下面的代码展示如何创建一个 SSE 视图函数：
-- -------------------- ---- -------
---- ----- ------ ------ --------
--- - ---------------
------------------
--- ------
--- -----------
----- ------ --------------------- -----
------ -------------------- -----------------------------上面的代码创建了一个名为 sse 的 SSE 视图函数，并为其生成了一个 SSE 路由。在 sse 视图函数中，我们定义了一个 generate 函数，该函数负责生成要发送到客户端的数据。generate 函数需要返回 SSE 的数据格式，即每行数据以 "data:" 开头，以 "\n\n" 结尾。在本例中，我们向客户端发送了一条 "Hello SSE" 的数据。最后，我们将要发送的数据通过 Response 类的构造函数传递，同时设置响应的 MIME 类型为 "text/event-stream"。
向客户端发送 SSE 数据
现在我们已经完成了 SSE 视图函数的编写，接下来，我们需要编写 JavaScript 代码来监听 SSE 并接收服务器发送的数据。
在 JavaScript 中，我们可以使用 EventSource 对象来与服务器创建 SSE 连接，并随时接收服务器推送的数据。下面是一个简单的例子：
const eventSource = new EventSource('/sse');
eventSource.addEventListener('message', (e) => {
console.log(e.data);
});上面的代码中，我们创建了一个名为 eventSource 的 EventSource 对象，并监听了 message 事件。当服务器发送数据时，事件处理程序会自动调用，并输出接收到的数据。
我们还可以自定义 SSE 的事件名称和数据格式，从而更灵活地传递数据。下面的代码展示了如何发送自定义的 SSE 事件：
-- -------------------- ---- -------
---- ----- ------ ------ --------
--- - ---------------
------------------
--- ------
--- -----------
----- ------- ---------------
----- ------ --------------------- -----
------ -------------------- -----------------------------上面的代码中，我们向客户端发送了一个名为 "custom-event" 的自定义事件。客户端可以通过监听该事件来接收数据。
如何使用 Server-Sent Events 和 Flask 构建实时 Web 应用程序？
现在我们已经了解了 SSE 的基本原理和 Flask 的使用方法，下面我们就可以开始构建实时 Web 应用程序了。我们以一个简单的在线聊天应用程序为例。
实现在线聊天应用程序
在在线聊天应用程序中，我们需要实现以下功能：
- 显示聊天记录
- 提供发送消息的表单
- 接收并发送消息，以便更新聊天记录
为了实现这些功能，我们需要编写前端和后端代码。
前端代码
我们使用 Vue.js 来编写前端代码。代码如下：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------------
------- -----------------------------------------------------------------------
--------
----- --- - --- -----
--- -------
----- -
-------- ---
--------- --
--
--------- -
----- ----------- - --- --------------------
--------------------------------------- --- -- -
----- ------- - -------------------
----------------------------
---
--
-------- -
------------- -
-------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
---------- ------------
--
---
------------ - ---
-
-
---
---------
-------
------
---- ---------
----
--- -------------- -- ----------
-- ------- --
-----
-----
----- ------------------------------
------ ----------------- --
------- ---------------------------
-------
------
-------
-------上面的代码中，我们使用 Vue.js 创建了一个名为 app 的 Vue 实例，并绑定了一个名为 messages 的数据属性，用于存储聊天记录。created 生命周期钩子函数在 Vue 实例创建完成后执行，并且创建 SSE 连接，监听服务器发送的消息。每当接收到消息时，事件处理程序会将消息添加到 messages 数据中，从而实现更新聊天记录的功能。
在发送消息时，我们使用 fetch 方法将消息发送给服务器，并清空输入框中的内容。
后端代码
我们使用 Flask 编写后端代码。代码如下：
-- -------------------- ---- -------
---- ----- ------ ------ --------- -------- ---------------- -------
--- - ---------------
---------------
--- --------
------ -----------------------------
--- ----------------------
----- ------ --------------------------------
------------------
--- ------
------ ---------------------------- ------ -----------------------------
------------------- -----------------
--- -------
------- - ---------------------------
---------------------
------ -------------- ------上面的代码中，我们创建了三个路由：
- '/' 路由用于返回主页模板。
- '/sse' 路由用于返回 SSE 数据。
- '/chat' 路由处理客户端发送的消息。
send_message 函数负责封装消息并发送 SSE 数据。在 chat 函数中，我们获取客户端发送的消息，然后调用 send_message 函数，将消息发送给客户端。
运行 Web 应用程序
现在我们已经完成了在线聊天应用程序的前后端代码，接下来我们需要运行应用程序。首先，我们需要安装 Flask 和 Vue.js 的依赖：
pip install flask
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
然后，我们可以使用 Flask 的命令行工具启动应用程序：
export FLASK_APP=app.py export FLASK_ENV=development flask run
最后，在浏览器中访问 http://127.0.0.1:5000/，即可使用在线聊天应用程序。现在，我们就可以在浏览器中实时地发送和接收消息了！
总结
本文介绍了如何使用 Server-Sent Events 和 Flask 构建实时 Web 应用程序。我们首先了解了 SSE 的基本原理，然后通过 Flask 实现了 SSE 和在线聊天应用程序。通过学习本文，您已经掌握了 SSE 和 Flask 的使用方法，并可以自己编写相应的实时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ccd0795b1f8cacd44d0c6