使用python3和flask_socketio ,實現服務器上的tail和top命令的實時展示，將結果實時展示在web上
tail在頁面上限制了顯示長度，自動滾動顯示最新數據
效果如下：
tail效果
top效果
和Vue配合使用時，可能會出現如下問題
GET http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=M-9xlys 400 (BAD REQUEST) Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=M-9xlys' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
提示的很明顯，就是跨域了，然後理所當然的按平時的解決方式
比如使用flask_cors或者自己利用flask的鉤子函數在請求前後，設置請求頭等，但是依然會報錯！！！
正確的解決方式是,在實例化SocketIO時，加上 cors_allowed_origins="*"
socketio = SocketIO(app , cors_allowed_origins="*")
主要代碼如下：
# coding=utf-8 import os import re from threading import Lock from flask import Flask, render_template from flask_socketio import SocketIO from config import LOG_FILE, SECRET_KEY app = Flask(__name__) app.config['SECRET_KEY'] = SECRET_KEY socketio = SocketIO(app)
# 跨域時使用下面的
# socketio = SocketIO(app,cors_allowed_origins="*")
close = False thread = None thread_lock = Lock() client_num = 0 # tail頁面連入數量 def get_tail_n_info(n): ''' tail按行獲取 :param n: 行數 :return: ''' try: tail_pipe = os.popen(f'tail -n {n} {LOG_FILE} ') except: print('文件不存在') return '' else: tail_output = iter(tail_pipe.readlines()) tail_pipe.close() return tail_output def tail_close(): with thread_lock: global close, thread, client_num client_num -= 1 print('有客戶端離開tail頁面，當前頁面客戶端剩餘數量爲', client_num) if client_num <= 0: close = True client_num = 0 thread = None print('tail頁面客戶端全部關閉') def get_top_info(): '''獲取top命令結果，並做處理''' top_pipe = os.popen('top -n 1') try: top_output = top_pipe.read() finally: top_pipe.close() # 用print輸出top_output看着沒問題，但是用repr輸出會發現有很多其他字符，這些字符會被髮往前端，導致頁面上數據混亂 # 暫時先直接替換處理 top_output = top_output.replace("\x1b(B\x1b[m", "").replace("\x1b(B\x1b[m\x1b[39;49m\x1b[K", "").replace( "\x1b[?1h\x1b=\x1b[?25l\x1b[H\x1b[2J", "").replace("\x1b[39;49m\x1b[1m", "").replace("\x1b[39;49m\x1b[K", "").replace("\x1b[39;49m", "").replace( "\x1b[K", "").replace("\x1b[7m", "").replace("\x1b[?1l\x1b>\x1b[45;1H", "").replace("\x1b[?12l\x1b[?25h", "").replace("\x1b[1m", "") _html = '' for num, line in enumerate(top_output.split('\n')): if num >= 6: if num == 6: new_line = "<table> <tr>" else: new_line = "<tr>" td_list = re.split(r" +", line) if len(td_list) > 1: for td in td_list: if td.strip(): new_line += f"<td>{(8-len(td))*' '+td}</td>" new_line += "</tr>" else: new_line = '<div>' + line.replace(' ', " ") + '</div>' _html += new_line _html += '</table>' return _html @app.route('/') def index(): return render_template('index.html') @app.route('/tail', methods=['GET']) def tail_html(): return render_template('tail.html') @app.route('/top', methods=['GET']) def top_html(): return render_template('top.html') @socketio.on('connect', namespace="/shell") def connect(): print("connect..") @socketio.on('disconnect', namespace="/shell") def disconnect(): print("disconnect..") @socketio.on('open_tail', namespace="/shell") def open_tail(message): print('received open_tail message: ' + message.get('data', '')) global thread, close, client_num with thread_lock: client_num += 1 print('有客戶端進入tail頁面，當前頁面客戶端數量爲', client_num) if thread is None: close = False thread = socketio.start_background_task(target=background_thread) else: # 有其他客戶端正在使用時，則先發送最近30條過去 for line in get_tail_n_info(n=30): if line.strip(): socketio.emit('tail_response', {'text': line}, namespace='/shell') @socketio.on('close_tail', namespace="/shell") def close_tail(message): print('準備關閉tail', message.get('data', '')) tail_close() @socketio.on('handle_top', namespace="/shell") def handle_top(message): print('received handle_top message: ' + message.get('data', '')) top_info = get_top_info() socketio.emit('top_response', {'text': top_info}, namespace='/shell') def background_thread(): try: tail_pipe = os.popen('tail -f ' + LOG_FILE) except: print('文件不存在') return else: while not close: tail_output = tail_pipe.readline() if tail_output.strip(): socketio.emit('tail_response', {'text': tail_output}, namespace='/shell') tail_pipe.close() if __name__ == '__main__': socketio.run(app, host='0.0.0.0', port=8000)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { var child_num = 0; var namespace = '/shell'; var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace); socket.on('tail_response', function (res) { if (child_num < 40) { $('#terminal').append('<div>' + res.text + '</div>'); child_num += 1 } else { // 先刪後加 $('#terminal div:first').remove(); $('#terminal').append('<div>' + res.text + '</div>'); } $(document).scrollTop($(document).height()); // 將滾動條滾到最下方 console.log(res.text); }); socket.on('connect', function (res) { socket.emit('open_tail', {'data': 'I\'m connected!'}); }); //socket.on('disconnect', function (data) { // socket.emit('close_tail', {'data': 'I\'m disconnected!'}); //}); $(window).bind('beforeunload', function () { // 離開頁面前關閉tail socket.emit('close_tail', {'data': 'I\'m leave!'}); } ); }); $(window).resize(function () { var cliWidth = document.body.clientWidth; var cliHeight = document.body.clientHeight; var divWidth = cliWidth - 2; var divHeight = cliHeight - 2; $('#terminal').css("width", divWidth + "px"); $('#terminal').css("height", divHeight + "px"); $(document).scrollTop($(document).height()); // 將滾動條滾到最下方 }) </script> <style> html, body { height: 100%; margin: 0; } .outer { height: 100%; } #terminal { height: 100%; background-color: black; color: white; padding-left: 10px; } #terminal div { background-color: black; color: white; } </style> </head> <body> <div class="outer"> <div id="terminal"> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { var namespace = "/shell"; var socket = io.connect('http://' + document.domain + ':' + location.port + namespace); socket.on('connect', function (res) { socket.emit('handle_top', {'data': 'I\'m connected!'}); }); socket.on('top_response', function (res) { var top_info = res.text; document.getElementById("terminal").innerHTML = top_info; setTimeout(function () { socket.emit("handle_top", {"data": "handle_top"}); }, 2000) }); }); </script> <style type="text/css"> #terminal { background-color: black; color: white; } #terminal div { width: 1024px; text-align: justify; } table { width: 1024px; table-layout: fixed; text-align: right; } </style> </head> <body> <div> <div id="terminal"> </div> </div> </body> </html>
項目完整地址：https://github.com/Mark-IT/system_log_web
Access to XMLHttpRequest at 'http://127.0.0.1:5000/socket.io/?EIO=3&transport=polling&t=M-9xlys' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.