在做性能測試的時候，你是如何監控被測試系統的硬件資源的，如果是雲平台，那么一般提供的有可視化的監控信息，如果是本地服務，只能通過系統命令（如ps、top、lsof等）查看。
我們可以自己打造一個可視化的系統系統資源監控平台，本文就教大家如何實現。
准備工具：
- Flask: 一個簡單的web框架。
- psutil: 用於獲取本地硬件信息。
- flask_socketio： 基於Flask框架的websocket庫，用於建立長連接。
- echarts： 用於實現各種圖表的UI庫。
開始動手
下面介紹大體思路，文末有源碼：
制作一個監控頁面。
https://themes.getbootstrap.com/
booststrap提供了各種各樣主題，年輕人不用講武德，偷襲~！不對，你可以抄襲一個過來。
具體方式就瀏覽器右鍵查看源碼，復制粘貼，替換JS、CSS 一氣呵成~！
制作圖表
https://echarts.apache.org/zh/index.html
echarts是一個apache開源的圖表UI庫，可以幫你生成各種圖表。
官方給的實例還還是比較簡單的，你可照着例子熟悉一個圖表的配置。
獲取系統資源
https://pypi.org/project/psutil/
pstil 用於獲取本地硬件資源信息，CPU、內存、磁盤等信息。
簡單的API：
>>> import psutil
>>> psutil.cpu_times()
>>> psutil.cpu_count()
>>> psutil.swap_memory()
>>> psutil.virtual_memory()
>>> ....
實時獲取系統資源
前端看到的數據一定要是實時的，動態的，那么就要求前端與后端保持數據的交互，websocket就是解決這類問題而生的。
-
后端：
Flask-SocketIO
https://github.com/miguelgrinberg/Flask-SocketIO -
前端：
socket.io.js
https://socket.io/
后端實現主要代碼：
import time
import psutil
from flask import Flask, render_template, session, request
from flask_socketio import SocketIO, emit
from threading import Lock
app = Flask(__name__, template_folder='./')
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins='*')
cpu_thread = None
cpu_thread_lock = Lock()
@app.route('/')
def index():
"""
Web頁面
"""
return render_template('index.html')
@socketio.on('connect', namespace='/get_cpu')
def cpu_connect():
global cpu_thread
with cpu_thread_lock:
if cpu_thread is None:
cpu_thread = socketio.start_background_task(target=cpu_background_thread)
def cpu_background_thread():
count = 0
while True:
count += 1
socketio.sleep(5)
t = time.strftime('%H:%M:%S', time.localtime())
cpu = psutil.cpu_percent(interval=None, percpu=True)
socketio.emit('server_response',
{'data': [t, cpu], 'count': count}, namespace='/get_cpu')
if __name__ == '__main__':
socketio.run(app, host='127.0.0.1', port=9090, debug=True)
這里用到了多線程，每隔5秒向前端發送一次cpu信息。
前端實現主要代碼：
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/socket.io.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var socket = io.connect('http://127.0.0.1:9090/get_cpu', { transports: ['websocket'] });
socket.on('server_response', function (res) {
console.log("cpu:", res.data);
update_mychart(res);
});
</script>
前端建立socket連接，等待服務器“推送”數據，用回調函數更新圖表。
源碼
感興趣的可以查看源碼：
https://github.com/defnngj/learning-API-test/tree/master/sys_monitoring
我花了兩個晚上寫的，時間比較短~！大概實現了，優化的地方還有很多。