Python中如何使用Flask搭建后台系统接收TCP连接数据并实时显示在网页上

flask+socketIO

要用Flask搭建后台系统接收TCP数据并实时显示在网页上，得用WebSocket。Flask本身不支持WebSocket，需要配合Flask-SocketIO。下面是个完整的例子：

首先安装依赖：

pip install flask flask-socketio eventlet

服务端代码 server.py：

from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import threading
import socket
import json

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")

# TCP服务器线程
class TCPServerThread(threading.Thread):
    def __init__(self, host='0.0.0.0', port=9000):
        super().__init__()
        self.host = host
        self.port = port
        self.running = True
        
    def run(self):
        server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
        server.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
        server.bind((self.host, self.port))
        server.listen(5)
        print(f"TCP服务器启动在 {self.host}:{self.port}")
        
        while self.running:
            try:
                client, addr = server.accept()
                print(f"TCP客户端连接: {addr}")
                client_handler = threading.Thread(
                    target=self.handle_client,
                    args=(client, addr)
                )
                client_handler.start()
            except Exception as e:
                print(f"TCP服务器错误: {e}")
                
    def handle_client(self, client, addr):
        with client:
            while True:
                try:
                    data = client.recv(1024)
                    if not data:
                        break
                    
                    # 解析数据并发送到WebSocket
                    message = data.decode('utf-8').strip()
                    socketio.emit('tcp_data', {
                        'client': f"{addr[0]}:{addr[1]}",
                        'data': message,
                        'timestamp': time.strftime('%H:%M:%S')
                    })
                    
                except Exception as e:
                    print(f"处理客户端 {addr} 时出错: {e}")
                    break

@app.route('/')
def index():
    return render_template('index.html')

@socketio.on('connect')
def handle_connect():
    print('WebSocket客户端连接')

if __name__ == '__main__':
    # 启动TCP服务器线程
    tcp_thread = TCPServerThread()
    tcp_thread.daemon = True
    tcp_thread.start()
    
    # 启动Flask应用
    socketio.run(app, host='0.0.0.0', port=5000, debug=True)

网页模板 templates/index.html：

<!DOCTYPE html>
<html>
<head>
    <title>TCP数据实时显示</title>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    <style>
        body { font-family: Arial; margin: 20px; }
        #data-container { 
            border: 1px solid #ccc; 
            padding: 10px; 
            height: 400px; 
            overflow-y: auto;
            margin-top: 20px;
        }
        .data-item { 
            padding: 5px; 
            border-bottom: 1px solid #eee;
            font-family: monospace;
        }
        .timestamp { color: #666; font-size: 0.9em; }
        .client { color: #007bff; font-weight: bold; }
    </style>
</head>
<body>
    <h1>TCP数据实时监控</h1>
    <div>TCP服务器: 0.0.0.0:9000</div>
    <div>WebSocket服务器: ws://localhost:5000</div>
    
    <div id="data-container"></div>
    
    <script>
        const socket = io();
        const container = document.getElementById('data-container');
        
        socket.on('tcp_data', function(data) {
            const item = document.createElement('div');
            item.className = 'data-item';
            item.innerHTML = `
                <span class="timestamp">[${data.timestamp}]</span>
                <span class="client">${data.client}:</span>
                ${data.data}
            `;
            container.appendChild(item);
            container.scrollTop = container.scrollHeight;
        });
        
        socket.on('connect', function() {
            console.log('已连接到WebSocket服务器');
        });
    </script>
</body>
</html>

测试用的TCP客户端 test_client.py：

import socket
import time

def send_tcp_data():
    client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    client.connect(('localhost', 9000))
    
    for i in range(10):
        message = f"测试数据 {i+1} - {time.strftime('%H:%M:%S')}"
        client.send(message.encode('utf-8'))
        print(f"发送: {message}")
        time.sleep(1)
    
    client.close()

if __name__ == '__main__':
    send_tcp_data()

运行步骤：