定期更新并呈现来自Flask的值

Question

我想动态显示我的CPU使用率。 我不想重新加载页面来查看新值。 我知道如何在Python中获取CPU使用率。 目前，我渲染具有该值的模板。 如何使用Flask不断更新页面以获取值？

@app.route('/show_cpu')
def show_cpu():
    cpu = getCpuLoad()
    return render_template('show_cpu.html', cpu=cpu)

- Depado

---

不重新加载页面意味着您必须从客户端执行代码，这意味着您必须使用JavaScript。另外，当您说CPU使用率时，您是指服务器的使用率吗？ - Nadir Sampaoli

是的，您必须使用JavaScript向服务器发出查询以获取有关CPU使用情况的更新。无法完全在服务器端完成此操作。 - aychedee

如果您建立了一个 WebSocket 连接，那么服务器可以向客户端推送更新。但是，您仍然需要使用 JavaScript 来创建连接并处理来自服务器的更新。 - aychedee

http://docs.jquery.com/Tutorials:Quick_and_Dirty_Ajax - David K. Hess

我编辑了答案，现在有一个使用Websockets的示例。 - Depado

Answer 1

使用Ajax请求

Python

@app.route('/_stuff', methods= ['GET'])
def stuff():
    cpu=round(getCpuLoad())
    ram=round(getVmem())
    disk=round(getDisk())
    return jsonify(cpu=cpu, ram=ram, disk=disk)

Javascript

function update_values() {
            $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
            $.getJSON($SCRIPT_ROOT+"/_stuff",
                function(data) {
                    $("#cpuload").text(data.cpu+" %")
                    $("#ram").text(data.ram+" %")
                    $("#disk").text(data.disk+" %")
                });
        }

使用Websockets

project/app/views/request/websockets.py

# -*- coding: utf-8 -*-

# OS Imports
import json

# Local Imports
from app import sockets
from app.functions import get_cpu_load, get_disk_usage, get_vmem

@sockets.route('/_socket_system')
def socket_system(ws):
    """
    Returns the system informations, JSON Format
    CPU, RAM, and Disk Usage
    """
    while True:
        message = ws.receive()
        if message == "update":
            cpu = round(get_cpu_load())
            ram = round(get_vmem())
            disk = round(get_disk_usage())
            ws.send(json.dumps(dict(received=message, cpu=cpu, ram=ram, disk=disk)))
        else:
            ws.send(json.dumps(dict(received=message)))

project/app/__init__.py

# -*- coding: utf-8 -*-
from flask import Flask
from flask_sockets import Sockets


app = Flask(__name__)
sockets = Sockets(app)
app.config.from_object('config')
from app import views

使用 Flask-Websockets 让我的生活变得更加轻松。这是启动器：

launchwithsockets.sh

#!/bin/sh

gunicorn -k flask_sockets.worker app:app

最后，这是客户端代码：
custom.js
代码有点长，所以在这里。
请注意，我没有使用类似socket.io的东西，这就是代码很长的原因。此代码还会定期尝试重新连接到服务器，并且可以在用户操作时停止尝试重新连接。我使用Messenger库来通知用户出现了问题。当然，比起使用socket.io，它稍微复杂一些，但我真的很享受编写客户端代码的过程。

- Depado

---

ajax 代码给我错误提示：Uncaught ReferenceError: $SCRIPT_ROOT 未定义。 - Marshall

请查看此处的文档：http://flask.pocoo.org/docs/0.10/patterns/jquery/#where-is-my-site - Depado

当您使用 jsonify 调用路由时，您返回的是哪个网页？这些信息如何放置在前端？ - secretagentmango

@Depado 关于 Ajax 部分，您能否明确说明在 show_cpu.html 中如何链接 update_values 函数？ - user11696358

update_values 函数是一个 JavaScript 函数，当 HTML 页面在浏览器中加载时执行。这个 HTML 页面由 show_cpu 函数呈现。它将使用 Ajax 请求调用 /_stuff 终端点，该终端点将响应 JSON 负载。基本上：用户转到 /show_cpu，这会呈现包含 JavaScript 片段的 HTML 页面。然后，此 JavaScript 片段继续定期（例如使用 setInterval）进行 Ajax 调用到 /_stuff，该终端点将响应我们可以解析并随意使用的 json 数据。 - Depado