Update and render a value from Flask periodically
Using an Ajax request
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+" %") }); }
Using Websockets
project/app/views/request/websockets.py
# -*- coding: utf-8 -*-# OS Importsimport json# Local Importsfrom app import socketsfrom 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 Flaskfrom flask_sockets import Socketsapp = Flask(__name__)sockets = Sockets(app)app.config.from_object('config')from app import views
Using Flask-Websockets made my life a lot easier. Here is the launcher :launchwithsockets.sh
#!/bin/shgunicorn -k flask_sockets.worker app:app
Finally, here is the client code :custom.js
The code is a bit too long, so here it is.
Note that I'm NOT using things like socket.io, that's why the code is long. This code also tries to reconnect to the server periodically, and can stop trying to reconnect on a user action. I use the Messenger lib to notify the user that something went wrong. Of course it's a bit more complicated than using socket.io but I really enjoyed coding the client side.