本文地址：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 time

from threading import Lock

from 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 = None

app = 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 = 0

    while True:

        socketio.sleep(5)

        count += 1

        t = time.strftime('%M:%S', time.localtime()) # 获取系统时间（只取分:秒）

        cpus = psutil.cpu_percent(interval=None, percpu=True) # 获取系统cpu使用率 non-blocking

        socketio.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 thread

    with 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、cpu4

    var 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 服务器监控程序（基于后端数据推送）的更多相关文章

  1. SignalR系列教程：服务器广播与主动数据推送

    本篇是本系列入门篇的最后一遍,由于工作关系,接触SignalR的时间不是很多.等下次有空的话我会写一个利用“SignalR”开发一个在线聊天室的系列博文.近期的话我更偏向于更新框架设计相关的文章,到时 ...

  2. 后端数据推送-EventSource

    服务器发送事件(以下简称SSE)是HTML 5规范的一个组成部分,可以实现服务器到客户端的单向数据通信.通过SSE,客户端可以自动获取数据更新,而不用重复发送HTTP请求.一旦连接建立,“事件”便会自 ...

  3. 基于Web的数据推送技术(转)

    基于Web的数据推送技术 对于实时性数据显示要求比较高的系统,比如竞价,股票行情,实时聊天等,我们的解决方案有以下几种.1. HTTP请求发送模式,一般可以基于ajax的请求,比如每3秒一次访问下服务 ...

  4. HTML5支持服务器发送事件(Server-Sent Events)-单向消息传递数据推送（C#示例）

    传统的WEB应用程序通信时的简单时序图: 现在Web App中,大都有Ajax,是这样子: HTML5有一个Server-Sent Events(SSE)功能,允许服务端推送数据到客户端.(通常叫数据 ...

  5. JavaCV 采集摄像头和麦克风数据推送到流媒体服务器

    越来越觉得放弃JavaCV FFmpeg native API,直接使用JavaCV二次封装的API开发是很明智的选择,使用JavaCV二次封装的API开发避免了各种内存操作不当引起的crash. 上 ...

  6. 使用Node.js实现数据推送

    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...

  7. javascript之数据推送

    我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...

  8. HTML5数据推送SSE原理及应用开发

    JavaScript表达行为,CSS表达外观,注意HTML既表达结构(逻辑结构),又表达内容(数据本身)通常需要更新数据时,并不需要更新结构,正是这种不改变组织结构仅改变数据的诉求,推动了数据拉取和数 ...

  9. 理解HTML5数据推送应用开发问题

    一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...

随机推荐

  1. 安卓基础之Get方式发送http请求

    本文参考作者:超超boy 链接:https://www.cnblogs.com/jycboy/p/post01.html 一.在android用Get方式发送http请求,使用的是java标准类. 主 ...

  2. 数据库小组与UI小组第一次对接

    时间:2018.6.1,21:30 ~ 23:00 人员:除黄志鹏外全体成员,因为黄志鹏临时有事 工作内容: 主要为数据库小组与UI第二组对接,并将成果汇总到github仓库.另外UI第一组重构了代码 ...

  3. oracle学习之pl/sql使用==转载

    PLSQL循序渐进全面学习教程(全):https://blog.csdn.net/spark998/article/details/2065269

  4. Oracle EBS OPM 发放生产批

    --发放生产批 --created by jenrry DECLARE x_return_status VARCHAR2 (1); l_exception_material_tbl gme_commo ...

  5. Error Fix – Replication subscriber does not exist on the server anymore（删除Replication时报错的解决办法）

    Recently one of my client has faced weird situation related to SQL Server Replication. Their main da ...

  6. postgresql排序分页时数据重复问题

    当同时排序又分页时,如果排序的字段X不是唯一字段,当多个记录的X字段有同一个值时顺序是随机的. 这个有可能造成分页时数据重复的问题.某一页又把上一页的数据查出来了,其实数据库只有一条记录. 解决办法: ...

  7. Cisco HSRP 配置方法(热备份路由协议)配置实例

    转裁于51CTO.http://www.mamicode.com/info-detail-862350.html HSRP----热备份路由协议 思科私有协议,与VRRP 虚拟路由协议 相近,(国际标 ...

  8. python的学习之路day3

    大纲 1.汉字编码 2.浅拷贝与深拷贝 3.函数 4.return 5.函数的基本参数 6.format 7.三元运算(三目运算) 8.python的内置函数 abs() all() any() bo ...

  9. 【转】Java学习---HashMap的工作原理

    [原文]https://www.toutiao.com/i6592560649652404744/ HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都 ...

  10. 【转】Spring学习---为什么要用spring，springMVC

    [原文]https://www.toutiao.com/i6593182323095634445/ 首先,软件里有很多优秀的框架,有一种类型的框架,它的特点是建立在一个现有技术的基础上,提供和现有技术 ...