Python中如何通过树莓派连接二维码扫描器并在Web端实时显示数据？

python2.7，gpio14 引脚接一个红外传感器触发二维码扫描器，问：扫描器的二维码的数据如何实时显示在 web 浏览器中（不刷新页面），之前试了 flask-socket，可是不知道怎么了，总是报错，除了类似 socket 这类的方案，还有什么好的解决方法吗？
Python中如何通过树莓派连接二维码扫描器并在Web端实时显示数据？

vueper 1楼

你这个要用 websocket 吧。
感觉普通的轮询不合适。

vueper 2楼

这个问题挺有意思的，把硬件、后端和前端串起来了。核心思路是：树莓派上的Python脚本通过串口（比如USB）读取扫码枪数据，然后用WebSocket把数据实时推送到网页上。

这里给你一个能跑起来的完整方案，用 pyserial 读串口，用 Flask-SocketIO 做WebSocket服务器。

1. 树莓派上的Python服务端代码 (app.py)

import serial
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from threading import Thread
import time

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

# 配置串口，参数根据你的扫码枪调整，常见的是9600波特率
SERIAL_PORT = '/dev/ttyUSB0'  # 树莓派上常见的USB串口设备名
BAUD_RATE = 9600

def read_scanner():
    """后台线程：持续读取串口数据并通过WebSocket发送"""
    try:
        ser = serial.Serial(SERIAL_PORT, BAUD_RATE, timeout=1)
        print(f"开始监听串口 {SERIAL_PORT}...")
        while True:
            if ser.in_waiting > 0:
                # 读取一行数据（扫码枪通常以回车结束）
                data = ser.readline().decode('utf-8').strip()
                if data:
                    print(f"扫描到: {data}")
                    # 通过WebSocket广播给所有连接的客户端
                    socketio.emit('scan_data', {'data': data})
            time.sleep(0.01)
    except Exception as e:
        print(f"串口读取错误: {e}")
        socketio.emit('scan_error', {'error': str(e)})

@app.route('/')
def index():
    """提供前端页面"""
    return render_template('index.html')

if __name__ == '__main__':
    # 启动后台线程读取扫码枪
    scanner_thread = Thread(target=read_scanner, daemon=True)
    scanner_thread.start()
    # 启动Web服务器，host='0.0.0.0'允许局域网访问
    socketio.run(app, host='0.0.0.0', port=5000, debug=True)

2. 前端页面 (templates/index.html)

<!DOCTYPE html>
<html>
<head>
    <title>二维码扫描器实时显示</title>
    <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script>
    <style>
        body { font-family: Arial; margin: 20px; }
        #scanData { 
            border: 1px solid #ccc; 
            padding: 20px; 
            margin-top: 20px;
            min-height: 100px;
            font-size: 18px;
            background: #f9f9f9;
        }
        .new-scan { 
            color: green; 
            font-weight: bold;
            animation: highlight 1s;
        }
        @keyframes highlight {
            from { background: yellow; }
            to { background: transparent; }
        }
    </style>
</head>
<body>
    <h1>二维码扫描器实时数据</h1>
    <p>状态: <span id="status">等待连接...</span></p>
    <div id="scanData">暂无扫描数据</div>

    <script>
        // 连接到WebSocket服务器
        const socket = io();
        const statusEl = document.getElementById('status');
        const dataEl = document.getElementById('scanData');

        socket.on('connect', () => {
            statusEl.textContent = '已连接';
            statusEl.style.color = 'green';
        });

        socket.on('scan_data', function(msg) {
            // 显示最新扫描的数据，并添加高亮效果
            const newScan = document.createElement('div');
            newScan.className = 'new-scan';
            newScan.textContent = `[${new Date().toLocaleTimeString()}] ${msg.data}`;
            dataEl.prepend(newScan); // 新数据放在最前面
        });

        socket.on('scan_error', function(msg) {
            statusEl.textContent = '错误: ' + msg.error;
            statusEl.style.color = 'red';
        });

        socket.on('disconnect', () => {
            statusEl.textContent = '连接断开';
            statusEl.style.color = 'red';
        });
    </script>
</body>
</html>

怎么用：

树莓派上：先装库 pip install pyserial flask-socketio。把扫码枪插到USB口，运行 python app.py。
电脑上：在浏览器打开 http://[树莓派IP地址]:5000，比如 http://192.168.1.100:5000。
扫码：用扫码枪扫个码，网页上就会立刻显示出来。

几个关键点：