Javascript 定期更新并呈现烧瓶中的值

我想动态显示我的CPU使用情况。我不想重新加载页面以查看新值。我知道如何在Python中获得CPU使用率。现在，我使用该值渲染一个模板。如何使用Flask中的值持续更新页面

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

使用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+" %")
                });
        }

使用WebSocket

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)))

# -*- 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

project/app/\uuuuuu init\uuuuuuuuuu.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)))

# -*- 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 WebSocket让我的生活轻松了很多。这是发射器：

launchwithsockets.sh

#!/bin/sh

gunicorn -k flask_sockets.worker app:app

最后，这里是客户端代码：

custom.js

---

请注意，我没有使用socket.io之类的东西，这就是代码很长的原因。此代码还会定期尝试重新连接到服务器，并且可以停止尝试在用户操作上重新连接。我使用Messenger库通知用户出了问题。当然，这比使用socket.io要复杂一些，但我非常喜欢编写客户端代码

不重新加载页面意味着您必须从客户端执行代码，这意味着您必须使用javascript。另外，当你说CPU使用率时，你是指你的服务器的吗？是的，你必须使用JavaScript对服务器进行查询，以获得CPU使用率的更新。不可能完全从服务器端执行此操作。如果您建立了websocket连接，则服务器可以将更新推送到客户端。但是您仍然可以使用JS创建连接并处理来自服务器的更新。非常感谢您的回答^^ ajax代码给了我错误未捕获引用错误：$SCRIPT\u ROOT未定义请查看此处的文档：

setInterval（update\u values，1000）

将每秒调用该函数，请参阅：当您使用jsonify调用route时，返回的网页是什么？如何将此信息放在前端？@secretagentmango不返回网页，只返回JSON。前端使用Ajax请求调用该路由并解析返回的JSON。请参见答案中的Javascript片段以查看示例：）