分享好友 编程语言首页 频道列表

Python Flask利用SocketIO库实现图表的绘制

Python  2023-02-09 10:050

Flask 默认提供了针对WebSocket的支持插件from flask_socketio import SocketIO 直接通过pip命令安装即可导入使用，前端也需要引入socketIO库文件，其网站首页是：socket.io/

实现简单的数据通信

新建index.html

<!--name:index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/socket.io/1.7.0/socket.io.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function() {
        namespace = '/Socket';
        var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);
        socket.emit("message",{"data":"hello lyshark"});  // 初始化完成后,发送一条消息.
        socket.on('response', function(recv) {
            console.log(recv.Data)
        });
    });
</script>
</body>
</html>

app.py

# name: app.py
from flask import Flask,render_template,request
from flask_socketio import SocketIO

async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = "lyshark"
socketio = SocketIO(app)

@app.route("/")
def index():
    return render_template("index.html")

# 出现消息后,率先执行此处
@socketio.on("message",namespace="/Socket")
def socket(message):
    print("接收到消息:",message['data'])
    for i in range(1,100):
        socketio.sleep(1)
        socketio.emit("response",          # 绑定通信
                      {"Data":i},           # 返回socket数据
                      namespace="/Socket")

# 当websocket连接成功时,自动触发connect默认方法
@socketio.on("connect",namespace="/Socket")
def connect():
    print("链接建立成功..")

# 当websocket连接失败时,自动触发disconnect默认方法
@socketio.on("disconnect",namespace="/Socket")
def disconnect():
    print("链接建立失败..")

if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

效果如下，程序会每隔一秒钟同步一次数据，在控制台中可看到。

Python Flask利用SocketIO库实现图表的绘制

使用SocketIO库绘制主机动态图形

前端第一个脚本，用于接收数据。

   <script type="text/javascript" charset="UTF-8">
        // 负责接收目标主机的CPU负载情况
        $(document).ready(function() {
            namespace = '/Socket';
            var socket = io.connect("http://" + document.domain + ":" + location.port + namespace);
            socket.emit("message",{"data":"hello lyshark"});  // 初始化完成后,发送一条消息.
            socket.on('response', function(recv) {
                //console.log(recv.Data);
                update(recv)   // 发送到update函数处理请求
            });
        });
    </script>

第二个脚本负责解析参数

    <script type="text/javascript" charset="UTF-8">
        // 负责对参数的解析
        var time =["","","","","","","","","",""];
        var cpu = [0,0,0,0,0,0,0,0,0,0];
        var update = function(recv){
            time.push(recv.Data[0]);
            cpu.push(parseFloat(recv.Data[1]));
            if(time.length >=10){
                time.shift();
                cpu.shift();
                console.log(time)
                display(time,cpu)  // 调用绘图函数
            }
        };
    </script>

最后一段代码负责，调用百度绘图库，进行图形的呈现。

    <div id="main" style="height:500px;width:1200px;border:1px solid #eecc11;padding:10px;"></div>
    <script type="text/javascript" charset="UTF-8">
            var display = function(time,cpu){
                // 负责初始化绘图画布
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
            title: {
                text: '监控系统CPU资源'
            },
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: 'cpu',
                type: 'line',
                data: []
            }]
        });
            // 下方就是给指定字段填充数据
            myChart.setOption({
                xAxis: {
                    data: time
                },
                series: [{
                    name: 'cpu', // 根据名字对应到相应的系列
                    data: cpu
                }]
            });
        };
        // 首次显示加载动画
        myChart.showLoading();
    </script>

后端直接区数据并发送给前台 app.py 需要注意flask 开头写法不再是app()而要改成 socketio.run(app,debug=True,host="0.0.0.0")才可以

# name: app.py
from flask import Flask,render_template,request
from flask_socketio import SocketIO
import time,psutil
async_mode = None
app = Flask(__name__)
app.config['SECRET_KEY'] = "lyshark"
socketio = SocketIO(app)

@app.route("/")
def index():
    return render_template("index.html")

# 出现消息后,率先执行此处
@socketio.on("message",namespace="/Socket")
def socket(message):
    print("接收到消息:",message['data'])
    while True:
        socketio.sleep(60)
        data = time.strftime("%M:%S",time.localtime())
        cpu = psutil.cpu_percent(interval=None,percpu=True)
        socketio.emit("response",
                      {"Data":[data,cpu]},
                      namespace="/Socket")

if __name__ == '__main__':
    socketio.run(app,debug=True,host="0.0.0.0")

最终统计效果如下所示，当然也可以批量统计存入数据库，需要的时候直接调用绘图。

Python Flask利用SocketIO库实现图表的绘制

百度绘图库（官方地址）：https://echartsjs.com/

Ajax实现定时器 另一种实现定时器定时获取数据的方法

<button type="button" class="btn btn-success" id="btn">定时</button>

<script>
    $("#btn").click(function(){
        var count = setInterval(function(){
            $.ajax({
                url:"/_get/",
                type:"POST",
                contentType:"application/json;charset=utf-8",
                success:function (data) {
                    var data = JSON.parse(data);
                    console.log("当前进度:" + data.flag);
                    $("#1111").width(data.flag);
                    if (data.flag == 100){
                        clearInterval(count);
                    }
                }
            })
            },2000);  // 每两秒执行一次
        });
</script>
原文地址：https://juejin.cn/post/7179546854361661495

查看更多关于【Python】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
如何在Abaqus的python中调用Matlab程序
目录1. 确定版本信息2. 备份python3. 设置环境变量4. 安装程序5. 调试运行参考资料Abaqus2018操作系统Win10 64位Python版本2.7（路径C:\SIMULIA\CAE\2018\win_b64\tools\SMApy\python2.7）2. 备份python将上述的“python2.7”文件夹复制出来，避免因操作错误

0评论2023-03-16608

sf02_选择排序算法Java Python rust 实现
Java 实现package common;public class SimpleArithmetic {/** * 选择排序 * 输入整形数组：a[n] 【4、5、3、7】 * 1. 取数组编号为i(i属于[0 , n-2])的数组值 a[i],即第一重循环 * 2. 假定a[i]为数组a[k](k属于[i,n-1])中的最小值a[min],即执行初始化 min =i

0评论2023-02-09407

Python vs Ruby: 谁是最好的 web 开发语言？
Python 和 Ruby 都是目前用来开发 websites、web-based apps 和 web services 的流行编程语言之一。 这两种语言在许多方面有相似之处。它们都是高级的面向对象的编程语言，都是交互式脚本语言、都提供标准库且支持持久化。但是，Python 和 Ruby 的解决方法却

0评论2023-02-09819

Python+Sklearn实现异常检测
目录离群检测 与 新奇检测Sklearn 中支持的方法孤立森林 IsolationForestLocal Outlier FactorOneClassSVMElliptic Envelope离群检测 与 新奇检测很多应用场景都需要能够确定样本是否属于与现有的分布，或者应该被视为不同的分布。离群检测（Outlier detectio

0评论2023-02-09736

Python异常与错误处理详细讲解 python的异常
基础知识优先使用异常捕获LBYL(look before you leap): 在执行一个可能出错的操作时，先做一些关键的条件判断，仅当满足条件时才进行操作。EAFP(eaiser to ask for forgiveness than permission): 不做事前检查，直接执行操作。后者更优： 代码简洁，效率更高

0评论2023-02-09962

Python多线程与同步机制浅析
目录线程实现Thread类函数方式继承方式同步机制同步锁Lock条件变量Condition信号量Semaphore事件Event屏障BarrierGIL全局解释器锁线程实现Python中线程有两种方式：函数或者用类来包装线程对象。threading模块中包含了丰富的多线程支持功能：threading.curren

0评论2023-02-09409

python基础之reverse和reversed函数的介绍及使用
目录一、reverse二、reversed附：Python中reverse和reversed反转列表的操作方法总结一、reversereverse()是python中列表的一个内置方法(在字典、字符串和元组中没有这个内置方法)，用于列表中数据的反转例子：lista = [1, 2, 3, 4]lista.reverse()print(lista

0评论2023-02-09878

Python多进程并发与同步机制超详细讲解
目录多进程僵尸进程Process类函数方式继承方式同步机制状态管理Managers在《多线程与同步》中介绍了多线程及存在的问题，而通过使用多进程而非线程可有效地绕过全局解释器锁。 因此，通过multiprocessing模块可充分地利用多核CPU的资源。多进程多进程是通过mu

0评论2023-02-09469

Python进程间通讯与进程池超详细讲解 python进程池的作用
目录进程间通讯队列Queue管道Pipe进程池Pool在《多进程并发与同步》中介绍了进程创建与信息共享，除此之外python还提供了更方便的进程间通讯方式。进程间通讯multiprocessing中提供了Pipe（一对一）和Queue（多对多）用于进程间通讯。队列Queue队列是一个可用

0评论2023-02-09797

Python PyMuPDF实现PDF与图片和PPT相互转换
目录安装与简介MuPDFPyMuPDFPyMuPDF使用元数据页面Page代码示例PDF转图片图片转PDFPDF转PPT文章目录 安装与简介MuPDFPyMuPDF PyMuPDF使用元数据页面Page 代码示例PDF转图片图片转PDFPDF转PPTPyMuPDF提供了PDF及流行图片处理接口。安装与简介安装：pip install

0评论2023-02-09349

更多推荐