Flaask-StocketIOを使用して、サーバーとクライアントの双方向通信を完了します.

紹介:flashk-socketioモジュールは実際にflashのwebsocketへのサポートをパッケージ化しています.websocketは接続確立段階でHTTPの握手方式で行われています.これはブラウザの互換性や既存の機能の使用によるものと考えられます.接続が確立された後、クライアントとサービスの間でHTTP通信が行われなくなりました.すべての情報のインタラクションはwebsocketによって引き継がれます.Flaask-StocketIOは、Flashkアプリケーションをクライアントとサーバとの間の低遅延双方向通信にアクセスさせ、クライアントにサーバとの永続的な接続を確立させる.
適用シーン:バックグラウンドで新たなデータが生成され、フロントページにすぐに表示される必要があります.例えば、データ監視、統計図のリアルタイム変化更新などです. 
バックグラウンドコード

#encoding:utf-8
#!/usr/bin/env python
import psutil
import time
from threading import Lock
from flask import Flask, render_template
from flask_socketio import SocketIO
 
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():
    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)
 
@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)

フォルダを作成するtemplates
index.ページコード

    
    
    
    
    
    

 

    

 
    
 
    var myChart = echarts.init(document.getElementById('main'));
 
    myChart.setOption({
        title: {
            text: '       '
        },
        tooltip: {},
        legend: {
            data:['cpu']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: 'cpu',
            type: 'line',
            data: []
        }]
    });
 
 
    var time = ["","","","","","","","","",""],
        cpu = [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]);
        cpu.push(parseFloat(res.data[1]));
        if (time.length >= 10){
            time.shift();
            cpu.shift();
        }
 
        //     
        myChart.setOption({
            xAxis: {
                data: time
            },
            series: [{
                name: 'cpu', //             
                data: cpu
            }]
        });
 
    };
 
    //         
    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);
        });
 
    });
 
    

 
起動プログラム、アクセスhttp://127.0.0.1:5000
部分スクリーンショット