Flask接收POST请求后如何实现页面重新加载？

运行两个独立服务：一个通过WebSocket获取数据并更新SQLite数据库，另一个是Flask应用，从同一SQLite数据库查询数据并在Jinja模板中展示。需求是数据库更新时，Flask应用的页面能自动刷新。

已尝试的方案及问题 #

方案1：服务端触发重定向 #

WebSocket服务在数据库提交后，向Flask的/update/1路由发送POST请求，路由内重定向至首页，但页面未刷新。

WebSocket端代码：

cursor.execute("INSERT INTO POST (ID,SOURCE,TITLE,URL) VALUES(?,?,?,?)",(value['_id'], value['source'], value['title'],value['url']))
conn.commit()
requests.post("http://127.0.0.1:5000/update/1")

Flask路由代码：

@app.route("/update/<value>",methods=['GET','POST'])
def update(value):
    if value == '1':
        return redirect("/")
    else:
        return json.dumps({"value":0})

问题：WebSocket服务发起的POST请求属于服务端对服务端的请求，重定向的响应只会返回给WebSocket服务，不会影响用户浏览器中打开的页面。

方案2：返回带刷新脚本的模板 #

Flask路由直接渲染首页模板并传入参数，Jinja模板中通过location.reload()尝试刷新页面，同样无效。

Flask路由代码：

@app.route("/update/<value>",methods=['GET','POST'])
def update(value):
    if value == '1':
        return render_template("index.html",value=value)
    else:
        return json.dumps({"value":0})

Jinja模板代码：

{% if value == '1' %}    
    <script type="text/javascript">
      location.reload();
    </script>
{% endif %}

问题：服务端返回的带刷新脚本的页面是给WebSocket服务的请求响应，不会加载到用户的浏览器中，因此无法触发刷新。

可行解决方案 #

方案1：前端定时轮询检查更新 #

让前端页面定期向Flask后端请求，检查数据库是否有新数据，若有则触发页面刷新。

前端Jinja模板添加代码：

<script>
// 每隔5秒发起一次检查请求
setInterval(() => {
    fetch('/check_update')
        .then(res => res.json())
        .then(data => {
            if (data.need_refresh) {
                location.reload();
            }
        })
        .catch(err => console.error('检查更新失败:', err));
}, 5000);
</script>

Flask添加检查路由：

from flask import jsonify, session

# 需先设置Flask的SECRET_KEY
app.secret_key = 'your_secret_key_here'

@app.route('/check_update')
def check_update():
    # 查询数据库中最新记录的ID
    cursor.execute("SELECT MAX(ID) FROM POST")
    latest_id = cursor.fetchone()[0] or 0
    
    # 对比会话中存储的上次最新ID
    last_known_id = session.get('latest_id', 0)
    need_refresh = latest_id > last_known_id
    
    # 更新会话中的最新ID
    if need_refresh:
        session['latest_id'] = latest_id
    
    return jsonify({'need_refresh': need_refresh})

方案2：WebSocket服务端推送刷新通知 #

利用已有的WebSocket服务，在数据库更新时直接向前端页面发送刷新指令，这是更高效的方式。

前端Jinja模板添加WebSocket连接代码：

<script>
// 连接到你的WebSocket服务
const ws = new WebSocket('ws://localhost:你的WebSocket服务端口');

ws.onmessage = function(event) {
    // 收到数据库更新的通知时刷新页面
    if (event.data === 'db_updated') {
        location.reload();
    }
};

// 处理连接关闭
ws.onclose = function() {
    console.log('WebSocket连接关闭，尝试重连...');
    setTimeout(() => window.location.reload(), 3000);
};
</script>

WebSocket服务端修改代码：

# 假设使用websockets库，维护所有连接的客户端
connected_clients = set()

async def handle_client(websocket):
    connected_clients.add(websocket)
    try:
        async for _ in websocket:
            pass  # 处理客户端消息（如果需要）
    finally:
        connected_clients.remove(websocket)

# 定义通知所有客户端的函数
async def notify_all_clients():
    if connected_clients:
        message = 'db_updated'
        await asyncio.gather(*[client.send(message) for client in connected_clients])

# 数据库更新提交后调用通知函数
cursor.execute("INSERT INTO POST (ID,SOURCE,TITLE,URL) VALUES(?,?,?,?)",(value['_id'], value['source'], value['title'],value['url']))
conn.commit()
# 触发通知（需确保在异步环境中调用）
await notify_all_clients()

内容的提问来源于stack exchange，提问作者Param Shelar