如何使用 Socket.IO 批量传输结构化订单数据（含订单号与状态）-html教程-PHP中文网

如何使用 Socket.IO 批量传输结构化订单数据（含订单号与状态）

本文介绍在快餐管理系统中，如何利用 socket.io 高效、可靠地将多个订单字段（如商品 id、数量、顾客信息等）打包为结构化 json 消息，一次性发送至服务器，并支持后续持久化到 sql 数据库。

本文介绍在快餐管理系统中，如何利用 socket.io 高效、可靠地将多个订单字段（如商品 id、数量、顾客信息等）打包为结构化 json 消息，一次性发送至服务器，并支持后续持久化到 sql 数据库。

在构建类似麦当劳电子看板的快餐管理系统的前后端实时通信时，不推荐使用隐藏输入框拼接字符串或逗号分隔文本——这种方式易出错、难解析、无法校验、且无法扩展（例如添加时间戳、用户身份、设备标识等）。正确做法是：定义清晰的 Socket.IO 通信协议，以 JSON 对象为载体，批量封装订单全量数据。

以下是一个生产就绪的实现方案：

✅ 1. 前端：构造结构化订单对象并 emit

使用 JavaScript（如原生或 Vue/React）监听按钮点击，动态构建订单对象，再通过 socket.emit() 发送：

// 初始化 Socket.IO 客户端（需先连接）
const socket = io('http://localhost:5000');

// 示例：点击「巨无霸」按钮（id="item-1"），添加到当前订单
let currentOrder = {
  orderId: null, // 后续由服务端生成并返回
  items: [],
  customerName: '张三',
  tableNumber: 'A12',
  timestamp: new Date().toISOString(),
  status: 'pending'
};

document.getElementById('item-1').addEventListener('click', () => {
  currentOrder.items.push({
    itemId: '1',
    name: '巨无霸',
    quantity: 1,
    price: 25.00
  });
});

// 提交完整订单（一次发送全部数据）
document.getElementById('submit-order').addEventListener('click', () => {
  socket.emit('new_order', {
    type: 'order_submit',
    payload: currentOrder,
    clientTimestamp: Date.now()
  });
});

? 关键设计说明：

type 字段用于服务端路由消息类型（如 'order_submit'、'order_update'、'status_change'）；

payload 封装业务数据，结构清晰、可嵌套、可验证；

clientTimestamp 辅助排查时序问题，服务端应以自身时间为准生成 orderId 和入库时间。

✅ 2. 后端（Python + Flask-SocketIO）：接收、处理并落库

服务端接收后，生成唯一订单号（如 ORD-20240520-0087），校验数据完整性，并写入 MySQL/PostgreSQL：

from flask_socketio import SocketIO, emit
from datetime import datetime
import secrets

socketio = SocketIO(app, cors_allowed_origins="*")

@socketio.on('new_order')
def handle_new_order(data):
    try:
        payload = data.get('payload')
        if not payload or not isinstance(payload, dict) or not payload.get('items'):
            raise ValueError("Invalid order payload: missing items")

        # 生成唯一订单号（建议用数据库自增ID + 业务前缀，此处简化示例）
        order_id = f"ORD-{datetime.now().strftime('%Y%m%d')}-{secrets.randbelow(10000):04d}"
        payload['orderId'] = order_id
        payload['createdAt'] = datetime.now()

        # ✅ 写入数据库（使用 SQLAlchemy 或 pymysql）
        db.execute(
            "INSERT INTO orders (order_id, customer_name, table_number, status, created_at) VALUES (?, ?, ?, ?, ?)",
            (order_id, payload['customerName'], payload['tableNumber'], 'pending', payload['createdAt'])
        )
        for item in payload['items']:
            db.execute(
                "INSERT INTO order_items (order_id, item_id, name, quantity, price) VALUES (?, ?, ?, ?, ?)",
                (order_id, item['itemId'], item['name'], item['quantity'], item['price'])
            )

        # ? 广播给所有看板客户端（含主屏、厨房屏）
        emit('order_received', {
            'orderId': order_id,
            'items': payload['items'],
            'tableNumber': payload['tableNumber'],
            'status': 'received',
            'timestamp': payload['createdAt'].isoformat()
        }, broadcast=True)

    except Exception as e:
        emit('error', {'message': f'Order submission failed: {str(e)}'})