在日常工作中，我们经常需要对订单进行管理，特别是在物流环节中，及时掌握发货情况非常重要。本文介绍如何使用 Server-Sent Events（以下简称 SSE）和 Flask 框架快速实现订单发货进度实时监测功能。
什么是 Server-Sent Events？
Server-Sent Events 是一种实现服务器向客户端单向发送数据的技术。它允许服务器通过 HTTP 连接将事件流传递给客户端，从而实现实时更新。
SSE 协议基于纯文本格式，数据类型可以是任意类型的文本数据。
使用 SSE 监测订单发货进度
假设我们已经有一个 Web 应用，用户可以在该应用中提交订单并查询订单状态。现在，我们要实现订单发货进度实时监测功能，即当物流公司更新订单状态时，用户可以立即看到最新状态。
前端实现
前端代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单监测</title>
</head>
<body>
<div id="container"></div>
<script>
const container = document.getElementById('container');
// 创建 EventSource 对象，指定监听地址
const evtSource = new EventSource('/order_monitor');
// 监听订单状态变化事件
evtSource.addEventListener('order_update', function(event) {
const data = JSON.parse(event.data);
container.innerHTML += data.status + '<br>';
});
</script>
</body>
</html>在上面的代码中，我们创建一个名为 container 的 div 元素来展示订单状态。接着，使用 JavaScript 创建事件源对象 EventSource，并指定监测地址 /order_monitor。
当服务器向 /order_monitor 发送有关订单更新的数据时，前端代码中的 order_update 事件会被触发。在事件处理程序中，我们将从服务器返回的数据解析为 JSON，并将订单状态添加到 container 元素中。
后端实现
假设我们已经有一个 Flask 应用，其中订单数据存储在数据库中。为了实现 SSE 监测功能，我们需要为 Flask 应用添加一个路由，该路由将向客户端发送订单更新事件。
后端代码如下所示：
from flask import Flask, Response, render_template
import json
import time
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/order_monitor')
def order_monitor():
def generate():
while True:
# 查询数据库中最新的订单状态
status = query_latest_order_status()
# 将订单状态转换为 SSE 格式
message = "event: order_update\ndata: " + json.dumps({'status': status}) + "\n\n"
# 发送 SSE 事件
yield message
time.sleep(1) # 设置推送时间间隔
# 返回响应
return Response(generate(), content_type='text/event-stream')在上面的代码中，我们定义了一个名为 order_monitor 的路由。该路由使用 Flask 的 Response 类返回 SSE 格式的数据，并将其添加到响应流中。
函数 generate 定义了一个无限循环，查询数据库中最新的订单状态，并将状态转换为 SSE 数据格式，然后发送给客户端。
请注意，SSE 数据必须遵循特殊的格式，即每个事件之间必须以两个换行符分隔开，否则客户端无法正确解析 SSE 数据。因此，在后端代码中，我们使用 "\n\n" 将每个事件之间分隔开来。
总结
本文介绍了如何使用 Server-Sent Events 和 Flask 实现发货进度实时监测功能。前端代码通过创建 EventSource 对象监听服务器
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c6bcc7add4f0e0ff100afe