本文地址：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. [随时更新] Git的过滤规则 .gitignore 配置

    往github上传代码的时候,很多文件没必要都传,这就需要在.gitignore文件里配置一下过滤规则.在此记录一下各种项目的配置参数,先从最近做的android开始. 原文地址请保留http://w ...

  2. 初探性能优化——2个月到4小时的性能提升（copy）推荐阅读

    一直不知道性能优化都要做些什么,从哪方面思考,直到最近接手了一个公司的小项目,可谓麻雀虽小五脏俱全.让我这个编程小白学到了很多性能优化的知识,或者说一些思考方式.真的感受到任何一点效率的损失放大一定倍 ...

  3. 【three.js练习程序】创建太阳系

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Java的8种基本数据类型和3种引用数据类型

    背景 最近被一个问题难倒:问到Java的基本数据类型有8种,具体是哪几个?一起复习下: Java数据类型概述 变量就是申请内存来存储值,即当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量 ...

  5. DevOps之技能面

    <教学手册(Teaching Manual)> 教学:人类培养态度.传授知识.训练技能的活动.教学目的:知识与技能的层次:(了解.理解.熟悉.掌握.精通).教学手段:理论与实践的方面:(科 ...

  6. 使用 Azure PowerShell 模块创建和管理 Windows VM

    Azure 虚拟机提供完全可配置的灵活计算环境. 本教程介绍 Azure 虚拟机的基本部署项目,例如选择 VM 大小.选择 VM 映像和部署 VM. 你将学习如何执行以下操作: 创建并连接到 VM 选 ...

  7. 一起学习Boost标准库--Boost.texical_cast&format库

    今天接续介绍有关字符串表示相关的两个boost库: lexical_cast 将数值转换成字符串 format 字符串输出格式化 首先,介绍下lexical_cast ,闻其名,知其意.类似C中的at ...

  8. python 使用csv 文件写入 出现多余空行数据解决方案

    因为csv.writerow() 方法会造成读取时每条数据后多一条空数据 解决方案如下: 分为两种情况 python2 和 python3 先说python2版本 with open('xxx.csv ...

  9. 极限编程核心价值：勇气（Courage）

    原文:https://deviq.com/courage 极限编程核心价值:简单(Simplicity) 极限编程核心价值:沟通(Communication) 极限编程核心价值:反馈(Feedback ...

  10. BZOJ3534:[SDOI2014]重建(矩阵树定理)

    Description T国有N个城市,用若干双向道路连接.一对城市之间至多存在一条道路. 在一次洪水之后,一些道路受损无法通行.虽然已经有人开始调查道路的损毁情况,但直到现在几乎没有消息传回. 幸运 ...