我想动态显示我的CPU使用率。 我不想重新加载页面来查看新值。 我知道如何在Python中获取CPU使用率。 目前,我渲染具有该值的模板。 如何使用Flask不断更新页面以获取值?
@app.route('/show_cpu')
def show_cpu():
cpu = getCpuLoad()
return render_template('show_cpu.html', cpu=cpu)
我想动态显示我的CPU使用率。 我不想重新加载页面来查看新值。 我知道如何在Python中获取CPU使用率。 目前,我渲染具有该值的模板。 如何使用Flask不断更新页面以获取值?
@app.route('/show_cpu')
def show_cpu():
cpu = getCpuLoad()
return render_template('show_cpu.html', cpu=cpu)
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+" %")
});
}
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,它稍微复杂一些,但我真的很享受编写客户端代码的过程。
update_values
函数是一个 JavaScript 函数,当 HTML 页面在浏览器中加载时执行。这个 HTML 页面由 show_cpu
函数呈现。它将使用 Ajax 请求调用 /_stuff
终端点,该终端点将响应 JSON 负载。基本上:用户转到 /show_cpu
,这会呈现包含 JavaScript 片段的 HTML 页面。然后,此 JavaScript 片段继续定期(例如使用 setInterval)进行 Ajax 调用到 /_stuff
,该终端点将响应我们可以解析并随意使用的 json 数据。 - Depado