如何通过Flask SocketIO持续发送数据库表模型数据

1. 服务端实现 #

需要在服务端定义SocketIO事件，完成两个核心功能：客户端连接时推送初始状态，以及状态变更时主动推送更新。

初始状态推送 #

客户端首次连接时，查询所有餐桌数据并发送给客户端：

from flask_socketio import emit

# 监听客户端连接事件
@socket.on('connect')
def send_initial_status():
    # 查询所有餐桌记录
    tables = Table.query.all()
    # 将数据转换为可序列化的字典列表（枚举类型需转为字符串）
    table_data = [
        {
            'id': table.id,
            'number': table.number,
            'status': table.status.value  # 假设枚举类有value属性，用于转为字符串
        } for table in tables
    ]
    # 向当前连接的客户端发送初始数据
    emit('initial_table_status', table_data)

状态变更实时推送 #

当后端修改餐桌状态后，立即触发SocketIO广播更新：

def update_table_status(table_id, new_status):
    table = Table.query.get_or_404(table_id)
    old_status = table.status
    table.status = new_status
    db.session.commit()

    # 向所有连接的客户端推送状态更新
    emit(
        'table_status_updated',
        {'id': table.id, 'status': table.status.value},
        broadcast=True
    )

2. 客户端实现 #

使用SocketIO的JS库接收服务端推送的数据，动态更新页面展示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<script>
    // 连接到服务端SocketIO
    const socket = io('http://localhost:5002');

    // 接收初始状态并渲染页面
    socket.on('initial_table_status', function(tables) {
        renderTables(tables);
    });

    // 接收单个餐桌的状态更新并刷新页面
    socket.on('table_status_updated', function(update) {
        refreshSingleTable(update.id, update.status);
    });

    // 渲染所有餐桌状态的函数
    function renderTables(tables) {
        const container = document.getElementById('table-container');
        container.innerHTML = '';
        tables.forEach(table => {
            const tableElement = document.createElement('div');
            tableElement.className = `table status-${table.status}`;
            tableElement.textContent = `餐桌 ${table.number}: ${table.status}`;
            tableElement.dataset.tableId = table.id;
            container.appendChild(tableElement);
        });
    }

    // 更新单个餐桌状态的函数
    function refreshSingleTable(tableId, status) {
        const tableElement = document.querySelector(`[data-table-id="${tableId}"]`);
        if (tableElement) {
            tableElement.className = `table status-${status}`;
            tableElement.textContent = `餐桌 ${tableElement.textContent.split(':')[0]}: ${status}`;
        }
    }
</script>

<!-- 用于展示餐桌状态的容器 -->
<div id="table-container"></div>

3. 关键注意事项 #

• 枚举序列化：确保TableStatusEnum枚举可以被序列化为JSON，通常通过value属性或自定义序列化方法实现。
• 广播机制：使用broadcast=True可将更新推送给所有已连接客户端，保证状态全局一致。
• 异常处理：在服务端添加数据库操作的异常捕获，避免操作失败导致SocketIO事件中断。
• 房间功能（可选）：如果需要按区域推送状态，可使用SocketIO的房间功能，让客户端加入对应房间，仅接收该区域的更新。

内容的提问来源于stack exchange，提问作者Mike D Hovhannisyan