Flask 默认提供了针对WebSocket的支持插件from flask_socketio import SocketIO 直接通过pip命令安装即可导入使用，前端也需要引入socketIO库文件，其网站首页是：https://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")

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

使用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")

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

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

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>

Flask 之SocketIO库实现绘图表的更多相关文章

  1. Flask flask_script扩展库

    flask_script 1.安装:进入到虚拟环境中,pip install flask_script 2.flask_script 作用:可以通过命令行的形式来操作Flask,例如通过命令跑一个开发 ...

  2. Flask学习-Wsgiref库

    一.前言 前面在Flask学习-Flask基础之WSGI中提到了WerkZeug,我们知道,WerkZeug是一个支持WSGI协议的Server,其实还有很多其他支持WSGI协议的Server.htt ...

  3. Python爬虫实例（五） requests+flask构建自己的电影库

    目标任务:使用requests抓取电影网站信息和下载链接保存到数据库中,然后使用flask做数据展示. 爬取的网站在这里 最终效果如下: 主页: 可以进行搜索:输入水形物语 点击标题进入详情页: 爬虫 ...

  4. Python tkinter库将matplotlib图表显示在GUI窗口上，并实时更新刷新数据

    代码 1 ''' 2 使用matplotlib创建图表,并显示在tk窗口 3 ''' 4 import matplotlib.pyplot as plt 5 from matplotlib.pylab ...

  5. python中的turtle库(图形绘画库)

    turtle绘图的基础知识:1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置. 设置画布大小 turtle.screensize(canvwidt ...

  6. 关于echarts 重绘/图表切换/数据清空

    容器id 为main var myChart=document.getElementById("main") myChart.removeAttribute("_echa ...

  7. 基于canvas实现的高性能、跨平台的股票图表库--clchart

    什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...

  8. 使用 Golang 代码生成图表的开源库对比

    本文的目标读者 对用 Golang 代码生成折线图.扇形图等图表有兴趣的朋友. 本文摘要 主要介绍 Go 中用以绘图的开源库,分别是: GitHub - wcharczuk/go-chart: go ...

  9. 最牛逼android上的图表库MpChart（三） 条形图

    最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...

  10. 最牛逼android上的图表库MpChart（二） 折线图

    最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...

随机推荐

  1. display:none和overflow:hidden的区别

    1.display:none 当将一个元素的display属性设置为none时,该元素将不会显示在网页中,并且不会占据任何空间.也就是说,该元素会完全隐藏,其他的元素会立即占据它原来的位置.该属性适用 ...

  2. 批量上传 jar 包到远程 maven 仓库

    mvn deploy命令: mvn deploy:deploy-file -Dmaven.test.skip=true -Dfile=log-lib-1.1.jar -DgroupId=com.sun ...

  3. 《Function Programming in C++》

    说明 <Functional Programming in C++>书中代码练习测试以及一些笔记,部分代码需要用到C++20可以使用在线编译器编译代码 地址:https://coliru. ...

  4. 灵魂拷问std::enable_shared_from_this，揭秘实现原理

    参考博客: std::enable_shared_from_this原理浅析 引言 在C++编程中,使用智能指针是一种安全管理对象生命周期的方式.std::shared_ptr是一种允许多个指针共享对 ...

  5. AtCoder Beginner Contest 208 A~E个人题解

    比赛链接:Here A - Rolling Dice 水题 一个六面的骰子,请问摇动 \(A\) 次最后的点数和能否为 \(B\) 如果 \(B \in [a,6a]\) 输出 YES C++ voi ...

  6. 【调试】kprobes(二)使用方法

    前言 上一节介绍了kprobe的基本概念,下面我们将使用几个具体的例子,看下kprobe在实际使用中有那些应用场景. kprobe 内核的samples/kprobe目录下有kprobe相关的例子,我 ...

  7. 微信小程序图片展示类型

  8. Synchronized的使用及原理总结

    本文为博主原创,未经允许不得转载 Synchronized的使用总结:   1.作用 原理 synchronized 的锁膨胀升级过程 对象的内存布局 锁的消除及逃逸分析 synchronized的方 ...

  9. Shell-函数-function

  10. 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.11.25）

    来给大家伙送福利了! 一.百度网盘SVIP超级会员共享账号 可能很多人不懂这个共享账号是什么意思,小编在这里给大家做一下解答. 我们多知道百度网盘很大的用处就是类似U盘,不同的人把文件上传到百度网盘, ...