flask+socketio+echarts3 服务器监控程序（基于后端数据推送）
本文地址：http://www.cnblogs.com/hhh5460/p/7397006.html
说明
以前的那个例子的思路是后端监控数据存入数据库；前端ajax定时查询数据库。
这几天在看websocket。前端有一个js库：socket.io.js，后端python也有很多库实现了websocket，flask就有一个好用的扩展：flask-socketio。
在参考了这里之后，将前面那个例子改写成后端后台线程一旦产生数据，即刻推送至前端。
好处是不需要前端ajax定时查询，节省服务器资源。
项目一共两个文件：
- app.py
- templates/index.htmll
app.py
路由及后台线程
'''
服务器cpu监控程序思路：后端后台线程一旦产生数据，即刻推送至前端。
好处：不需要前端ajax定时查询，节省服务器资源。作者：hhh5460
时间：2017.8.19
'''
import psutil
import timefrom threading import Lockfrom flask import Flask, render_template, session, request
from flask_socketio import SocketIO, emit# Set this variable to "threading", "eventlet" or "gevent" to test the
# different async modes, or leave it set to None for the application to choose
# the best option based on installed packages.
async_mode = Noneapp = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, async_mode=async_mode)thread = None
thread_lock = Lock()# 后台线程 产生数据，即刻推送至前端
def background_thread():"""Example of how to send server generated events to clients."""count = 0while True:socketio.sleep(5)count += 1t = time.strftime('%M:%S', time.localtime()) # 获取系统时间（只取分:秒）cpus = psutil.cpu_percent(interval=None, percpu=True) # 获取系统cpu使用率 non-blockingsocketio.emit('server_response',{'data': [t, *cpus], 'count': count},namespace='/test') # 注意：这里不需要客户端连接的上下文，默认 broadcast = True ！！！！！！！@app.route('/')
def index():return render_template('index.html', async_mode=socketio.async_mode)# 与前端建立 socket 连接后，启动后台线程
@socketio.on('connect', namespace='/test')
def test_connect():global threadwith thread_lock:if thread is None:thread = socketio.start_background_task(target=background_thread)if __name__ == '__main__':socketio.run(app, debug=True)index.html
页面文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>ECharts3 Ajax</title><script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script><!-- ECharts 3 引入 --><script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head><body><!--为ECharts准备一个具备大小（宽高）的Dom--><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div><script type="text/javascript">// 作者：hhh5460// 时间：2017.8.19//--- 折柱 ---var myChart = echarts.init(document.getElementById('main'));myChart.setOption({title: {text: '服务器系统监控'},tooltip: {},legend: {data:['cpu1','cpu2','cpu3','cpu4']},xAxis: {data: []},yAxis: {},series: [{name: 'cpu1',type: 'line',data: []},{name: 'cpu2',type: 'line',data: []},{name: 'cpu3',type: 'line',data: []},{name: 'cpu4',type: 'line',data: []}]});// 本人笔记本有四个cpu，读者朋友请根据自己的情况，相应修改！！// 五个全局变量：time、cpu1、cpu2、cpu3、cpu4var time = ["","","","","","","","","",""],cpu1 = [0,0,0,0,0,0,0,0,0,0],cpu2 = [0,0,0,0,0,0,0,0,0,0],cpu3 = [0,0,0,0,0,0,0,0,0,0],cpu4 = [0,0,0,0,0,0,0,0,0,0]//准备好统一的 callback 函数var update_mychart = function (res) { //res是json格式的response对象// 隐藏加载动画myChart.hideLoading();// 准备数据time.push(res.data[0]);cpu1.push(parseFloat(res.data[1]));cpu2.push(parseFloat(res.data[2]));cpu3.push(parseFloat(res.data[3]));cpu4.push(parseFloat(res.data[4]));if (time.length >= 10){time.shift();cpu1.shift();cpu2.shift();cpu3.shift();cpu4.shift();}// 填入数据myChart.setOption({xAxis: {data: time},series: [{name: 'cpu1', // 根据名字对应到相应的系列data: cpu1},{name: 'cpu2',data: cpu2},{name: 'cpu3',data: cpu3},{name: 'cpu4',data: cpu4}]});};// 首次显示加载动画myChart.showLoading();// 建立socket连接，等待服务器“推送”数据，用回调函数更新图表$(document).ready(function() {namespace = '/test';var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);socket.on('server_response', function(res) {update_mychart(res);});});</script>
</body>
</html>效果图
flask+socketio+echarts3 服务器监控程序（基于后端数据推送）相关推荐
- 逐句回答,流式返回,ChatGPT采用的Server-sent events后端实时推送协议Python3.10实现,基于Tornado6.1
善于观察的朋友一定会敏锐地发现ChatGPT网页端是逐句给出问题答案的,同样,ChatGPT后台Api接口请求中,如果将Stream参数设置为True后,Api接口也可以实现和ChatGPT网页端一样 ...
- HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）
传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...
- 服务器之间数据文件推送,数据库数据推送到另外服务器
数据库数据推送到另外服务器 内容精选 换一换 该方案优点是简单,容易上手,缺点是停机时间较长.因此它适用于数据量不大,或者允许停机的时间较长,并且在这个时间范围内能够完成的数据.由于云数据库RDS服务 ...
- HTML5数据推送SSE原理及应用开发
JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...
- java 推送数据给js,Node.js实现数据推送
场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的方式 ...
- 关于云开发新服务“实时数据推送”，你需要了解的全在这了！
"微信小程序工程师邓坤力带你了解如何利用千呼万唤始出来的云开发实时数据推送服务打造生动的小程序和小游戏!" 在数据库在小程序·云开发中的应用一文中,我们了解到实时数据推送作为云开发 ...
- html5数据推送应用开发 代码,HTML5数据推送应用开发
目 录 前言 IX 第1章 SSE及其他 1 1.1 HTML5 2 1.2 数据推送 2 1.3 数据推送的其他名称 5 1.4 可能会用到SSE的应用 5 1.5 和WebSocket的对比 6 ...
- 微软软件推送服务器,向 UWP 应用添加推送通知 - Azure Mobile Apps | Microsoft Docs
向 Windows 应用添加推送通知 06/25/2019 本文内容 概述 本教程介绍如何向 Windows 快速入门项目添加推送通知,以便每次插入一条记录时,向设备发送一条推送通知. 如果不使用下载 ...
- SpringBoot+Vue整合WebSocket实现前后端消息推送
场景 WebSocket HTTP 协议是一种无状态的.无连接的.单向的应用层协议.它采用了请求/响应模型.通信请求只能由客户端发起,服务端对请求做出应答处理. 这种通信模型有一个弊端:HTTP 协议 ...
最新文章
- WPF ComboBox_SelectionChange事件中获取当前文本的方法
- html action不起作用,Html.ActionLink做为按钮或图像，而不是连接
- linux命令详解——iostat
- 怎样开始学习ERP？
- Android之基于xmpp openfire smack开发之openfire介绍和部署[1]
- JavaOne 2016后续活动
- syn重发_什么是“SYN”请求？ISN又是什么？
- java下载远程文件到本地
- 前台之boostrap
- HI3559A源码包编译及问题解决
- Word文件批量查找替换字符串
- html显示doc内容,doc文件怎么打开？doc是什么文件？
- mysql操作基础知识
- NOVA温控器参数笔记（十）（故障代码）
- 容器服务ACK+容器网络文件系统CNFS快速搭建NGINX网站（体验有礼）
- （TT三）Nginx+fastDFS
- 浅谈进程地址空间与虚拟存储空间
- 查询话费余额php接口,PHP代码示例_PHP账号余额查询接口 | 微米-中国领先的短信彩信接口平台服务商...
- 小象python培训班_小象最新Python机器学习升级版视频学习教程 共24节精品课
- ThinkPHP最新版支付宝接口开…