本文地址：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. Android--根据子控件的大小自动换行的ViewGroup

    1.自定义ViewGroup /** * Created by Administrator on 2016/2/26. * * --------自动换行的ViewGroup----------- */ ...

  2. Oracle EBS AP 创建贷项通知单并核销到相应发票

    --1.0 生成与发票一样的贷项通知单 created by jenrry 20170423 DECLARE L_CUSTOMER_TRX_ID NUMBER; L_INVOICE_NUMBER VA ...

  3. jboss eap6.1（5）(ejb升级)

    以前的项目是基于ejb2.x做的,ejb的配置文件为ejb-jar.xml和jboss.xml,现在把这个项目移到新版本服务器中的时候,报解析ejb-jar错误. 查阅许多资料才找到解决办法,原来jb ...

  4. python之demo2----改编自python官方提供的turtle_yinyang.py画阴阳的demo

    """ 执行 python -m turtledemo 命令查看系统内置demo的源码 绘制:需要通过import turtle引入绘制图形库turtle库 改编自pyt ...

  5. 什么是套接字(Socket)

    应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问题.多个TCP连接或多个应用程序进程可能需要 通过同一个TCP协议端口传输数据.为了区别不同的应用程序进程和连 ...

  6. Django之MVC与MTV

    MVC框架 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写 模型 - 视图 - 控制器是一种通常用于开发用户界面的 ...

  7. git status 显示中文和解决中文乱码

    目录 git status 显示中文和解决中文乱码 解决git status不能显示中文 解决git bash 终端显示中文乱码 通过修改配置文件来解决中文乱码 git status 显示中文和解决中 ...

  8. 自己模拟写C++中的String类型

    下面是模拟实现字符串的相关功能,它包括一下功能:    String(const char * s);//利用字符串来初始化对象    String(); //默认构造函数    String(con ...

  9. 如何创建只读权限oracle账户

    1.创建角色 CREATE ROLE SELECT_ROLE 2.给角色分配权限 grant CREATE VIEW to SELECT_ROLE; grant CREATE SYNONYM to S ...

  10. C#中单问号(?)和双问号(??)的用法整理

    1.单问号(?) 1.1 表示Nullable类型 C#2.0里面实现了Nullable数据类型 //A.比如下面一句,直接定义int为null是错误的,错误提示为无法将null转化成int,因为后者 ...