在日常工作中，我们经常需要对订单进行管理，特别是在物流环节中，及时掌握发货情况非常重要。本文介绍如何使用 Server-Sent Events（以下简称 SSE）和 Flask 框架快速实现订单发货进度实时监测功能。
什么是 Server-Sent Events？
Server-Sent Events 是一种实现服务器向客户端单向发送数据的技术。它允许服务器通过 HTTP 连接将事件流传递给客户端，从而实现实时更新。
SSE 协议基于纯文本格式，数据类型可以是任意类型的文本数据。
使用 SSE 监测订单发货进度
假设我们已经有一个 Web 应用，用户可以在该应用中提交订单并查询订单状态。现在，我们要实现订单发货进度实时监测功能，即当物流公司更新订单状态时，用户可以立即看到最新状态。
前端实现
前端代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
------
---- ---------------------
--------
----- --------- - -------------------------------------
-- -- ----------- ---------
----- --------- - --- ------------------------------
-- ----------
------------------------------------------ --------------- -
----- ---- - -----------------------
------------------- -- ----------- - -------
---
---------
-------
-------在上面的代码中，我们创建一个名为 container 的 div 元素来展示订单状态。接着，使用 JavaScript 创建事件源对象 EventSource，并指定监测地址 /order_monitor。
当服务器向 /order_monitor 发送有关订单更新的数据时，前端代码中的 order_update 事件会被触发。在事件处理程序中，我们将从服务器返回的数据解析为 JSON，并将订单状态添加到 container 元素中。
后端实现
假设我们已经有一个 Flask 应用，其中订单数据存储在数据库中。为了实现 SSE 监测功能，我们需要为 Flask 应用添加一个路由，该路由将向客户端发送订单更新事件。
后端代码如下所示：
-- -------------------- ---- -------
---- ----- ------ ------ --------- ---------------
------ ----
------ ----
--- - ---------------
---------------
--- --------
------ -----------------------------
----------------------------
--- ----------------
--- -----------
----- -----
- -------------
------ - ---------------------------
- -------- --- --
------- - ------- ------------------- - - --------------------- -------- - ------
- -- --- --
----- -------
------------- - --------
- ----
------ -------------------- ---------------------------------在上面的代码中，我们定义了一个名为 order_monitor 的路由。该路由使用 Flask 的 Response 类返回 SSE 格式的数据，并将其添加到响应流中。
函数 generate 定义了一个无限循环，查询数据库中最新的订单状态，并将状态转换为 SSE 数据格式，然后发送给客户端。
请注意，SSE 数据必须遵循特殊的格式，即每个事件之间必须以两个换行符分隔开，否则客户端无法正确解析 SSE 数据。因此，在后端代码中，我们使用 "\n\n" 将每个事件之间分隔开来。
总结
本文介绍了如何使用 Server-Sent Events 和 Flask 实现发货进度实时监测功能。前端代码通过创建 EventSource 对象监听服务器
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c6bcc7add4f0e0ff100afe