{"id":90032,"date":"2026-08-04T16:17:43","date_gmt":"2026-08-04T08:17:43","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/90032.html"},"modified":"2026-08-04T16:17:43","modified_gmt":"2026-08-04T08:17:43","slug":"fastapi-sse-websocket-%e5%a5%b6%e8%8c%b6%e5%ba%97%e5%ae%9e%e6%97%b6%e8%ae%a2%e5%8d%95%e7%9c%8b%e6%9d%bf","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/90032.html","title":{"rendered":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f"},"content":{"rendered":"

fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f<\/h2>\n

\u7528 FastAPI \u4ece\u96f6\u642d\u4e00\u4e2a\u300c\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d，\u628a SSE（\u5355\u5411\u63a8\u9001） \u548c WebSocket（\u53cc\u5411\u901a\u9053） \u4e24\u4e2a\u5b9e\u65f6\u901a\u4fe1\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u9879\u76ee\u91cc\u5bf9\u6bd4\u5b66\u4e60\u3002<\/p>\n

\u8fd9\u4efd\u6559\u53ea\u8981\u8ddf\u7740\u7ae0\u8282\u987a\u5e8f\u8bfb\u3001\u6309\u6b65\u9aa4\u6572\u4ee3\u7801，\u5c31\u80fd\u72ec\u7acb\u5199\u5b8c\u6240\u6709\u6587\u4ef6\u5e76\u8ba9\u9879\u76ee\u8dd1\u8d77\u6765\u3002\u6bcf\u4e00\u7ae0\u90fd\u5305\u542b：<\/p>\n

  • \u672c\u7ae0\u76ee\u6807 \u2014\u2014 \u8fd9\u7ae0\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898；<\/li>\n
  • \u539f\u59cb\u5b8c\u6574\u4ee3\u7801 \u2014\u2014 \u76f4\u63a5\u7167\u6284\u5373\u53ef，\u4e0d\u7701\u7565\u4efb\u4f55\u4e00\u884c；<\/li>\n
  • \u9010\u884c\u8bb2\u89e3 \u2014\u2014 \u5173\u952e\u4ee3\u7801\u4e3a\u4ec0\u4e48\u8fd9\u6837\u5199；<\/li>\n
  • \u52a8\u624b\u9a8c\u8bc1 \u2014\u2014 \u8fd9\u4e00\u6b65\u505a\u5b8c\u5e94\u8be5\u770b\u5230\u4ec0\u4e48\u3002<\/li>\n
    \n

    📖 \u672c\u5408\u8ba2\u672c\u76ee\u5f55<\/h3>\n\n\u7ae0\u6807\u9898\u8df3\u8f6c<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n
    0<\/td>\n\u9879\u76ee\u6982\u8ff0<\/td>\n\u2192 \u7b2c 0 \u7ae0<\/td>\n<\/tr>\n
    1<\/td>\n\u73af\u5883\u4e0e\u9879\u76ee\u9aa8\u67b6<\/td>\n\u2192 \u7b2c 1 \u7ae0<\/td>\n<\/tr>\n
    2<\/td>\n\u6570\u636e\u5c42 models.py<\/td>\n\u2192 \u7b2c 2 \u7ae0<\/td>\n<\/tr>\n
    3<\/td>\nSSE \u6a21\u5757 sse.py<\/td>\n\u2192 \u7b2c 3 \u7ae0<\/td>\n<\/tr>\n
    4<\/td>\nWebSocket \u6a21\u5757 ws.py<\/td>\n\u2192 \u7b2c 4 \u7ae0<\/td>\n<\/tr>\n
    5<\/td>\n\u5e7f\u64ad\u5668 broadcaster.py<\/td>\n\u2192 \u7b2c 5 \u7ae0<\/td>\n<\/tr>\n
    6<\/td>\n\u5e94\u7528\u5165\u53e3 app.py<\/td>\n\u2192 \u7b2c 6 \u7ae0<\/td>\n<\/tr>\n
    7<\/td>\n\u524d\u7aef\u770b\u677f index.html<\/td>\n\u2192 \u7b2c 7 \u7ae0<\/td>\n<\/tr>\n
    8<\/td>\n\u8fd0\u884c\u4e0e\u9a8c\u8bc1<\/td>\n\u2192 \u7b2c 8 \u7ae0<\/td>\n<\/tr>\n
    9<\/td>\nSSE vs WebSocket \u5bf9\u6bd4\u4e0e\u6269\u5c55\u7ec3\u4e60<\/td>\n\u2192 \u7b2c 9 \u7ae0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    🎯 \u5b66\u5b8c\u4f60\u80fd\u505a\u5230\u4ec0\u4e48<\/h3>\n
      \n
    • \u7406\u89e3 HTTP \u957f\u8fde\u63a5 \u7684\u4e24\u79cd\u5b9e\u73b0\u65b9\u5f0f（SSE \/ WebSocket）\u53ca\u5176\u5dee\u5f02；<\/li>\n
    • \u7528 FastAPI \u5199\u51fa\u4e00\u4e2a\u540e\u53f0\u5e7f\u64ad\u4efb\u52a1（\u5fc3\u8df3\u6e90），\u6bcf 0.8 \u79d2\u63a8\u8fdb\u4e00\u6b21\u8ba2\u5355\u72b6\u6001；<\/li>\n
    • \u7528 StreamingResponse \u5b9e\u73b0 SSE，\u8ba9\u6d4f\u89c8\u5668\u300c\u53ea\u8bfb\u300d\u5730\u63a5\u6536\u5b9e\u65f6\u8ba2\u5355；<\/li>\n
    • \u7528 WebSocket \u5b9e\u73b0\u53cc\u5411\u901a\u9053，\u8ba9\u524d\u7aef\u53d1\u547d\u4ee4（ping \/ \u52a0\u5355 \/ \u53d6\u9910 \/ \u5feb\u7167）\u5e76\u62ff\u5230\u56de\u6267；<\/li>\n
    • \u5199\u4e00\u4e2a\u7eaf\u524d\u7aef\u9875\u9762（EventSource + WebSocket），\u628a\u5b9e\u65f6\u6570\u636e\u6e32\u67d3\u6210\u5361\u7247\u770b\u677f；<\/li>\n
    • \u72ec\u7acb\u5b8c\u6210\u9879\u76ee\u9aa8\u67b6 \u2192 \u6570\u636e\u5c42 \u2192 \u4f20\u8f93\u5c42 \u2192 \u5165\u53e3 \u2192 \u524d\u7aef \u2192 \u8fd0\u884c\u5168\u6d41\u7a0b\u3002<\/li>\n<\/ul>\n

      🛠 \u6280\u672f\u6808<\/h3>\n\n\u5c42\u6280\u672f<\/tr>\n\n\n\n\n\n\n\n
      \u540e\u7aef\u6846\u67b6<\/td>\nFastAPI 0.141+<\/td>\n<\/tr>\n
      ASGI \u670d\u52a1\u5668<\/td>\nUvicorn 0.52+<\/td>\n<\/tr>\n
      \u4f20\u8f93\u534f\u8bae<\/td>\nSSE（text\/event-stream）+ WebSocket<\/td>\n<\/tr>\n
      \u5305\u7ba1\u7406<\/td>\nuv（\u63a8\u8350）\/ pip<\/td>\n<\/tr>\n
      Python \u7248\u672c<\/td>\n3.14<\/td>\n<\/tr>\n
      \u524d\u7aef<\/td>\n\u539f\u751f HTML + CSS + JS（\u65e0\u6846\u67b6）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      📁 \u6700\u7ec8\u76ee\u5f55\u7ed3\u6784<\/h3>\n

      fastapi-sse-ws-\u5976\u8336\u770b\u677f\/
      \n\u251c\u2500\u2500 pyproject.toml # \u4f9d\u8d56\u4e0e\u9879\u76ee\u5143\u4fe1\u606f
      \n\u251c\u2500\u2500 .python-version # \u56fa\u5b9a Python \u7248\u672c = 3.14
      \n\u251c\u2500\u2500 .gitignore
      \n\u251c\u2500\u2500 docs\/ # \u6559\u7a0b\u76ee\u5f55（\u5206\u7ae0\u539f\u6587\u4ef6 + \u672c\u5408\u8ba2\u672c）
      \n\u2502 \u251c\u2500\u2500 README.md
      \n\u2502 \u251c\u2500\u2500 00-\u9879\u76ee\u6982\u8ff0.md ~ 09-SSE-vs-WebSocket.md
      \n\u2502 \u251c\u2500\u2500 \u6559\u7a0b\u5408\u8ba2\u672c.md # \u2190 \u672c\u6587\u4ef6
      \n\u2502 \u251c\u2500\u2500 dashboard.png # \u8fd0\u884c\u622a\u56fe（SSE \u770b\u677f）
      \n\u2502 \u2514\u2500\u2500 dashboard-ws.png # \u8fd0\u884c\u622a\u56fe（WS \u64cd\u4f5c\u53f0 + \u901a\u4fe1\u65e5\u5fd7）
      \n\u251c\u2500\u2500 src\/ # \u540e\u7aef Python \u5305
      \n\u2502 \u251c\u2500\u2500 __init__.py
      \n\u2502 \u251c\u2500\u2500 app.py # FastAPI \u5e94\u7528\u5165\u53e3
      \n\u2502 \u251c\u2500\u2500 broadcaster.py # \u540e\u53f0\u5e7f\u64ad\u4efb\u52a1（\u5fc3\u8df3\u6e90）
      \n\u2502 \u251c\u2500\u2500 models.py # \u6570\u636e\u5c42：\u83dc\u5355 \/ \u8ba2\u5355 \/ \u63a8\u8fdb\u903b\u8f91
      \n\u2502 \u251c\u2500\u2500 sse.py # SSE \u8def\u7531
      \n\u2502 \u2514\u2500\u2500 ws.py # WebSocket \u8def\u7531
      \n\u2514\u2500\u2500 static\/
      \n \u2514\u2500\u2500 index.html # \u524d\u7aef\u770b\u677f\u9875\u9762<\/p>\n

      🚀 30 \u79d2\u901f\u89c8<\/h3>\n

      # 1. \u5b89\u88c5\u4f9d\u8d56（\u7528 uv，\u66f4\u5feb；\u6ca1\u6709 uv \u7528 pip \u4e5f\u884c，\u89c1\u7b2c 1 \u7ae0）<\/span>
      \nuv sync<\/span> # \u6216: pip install fastapi "uvicorn[standard]" websockets<\/span><\/p>\n

      # 2. \u542f\u52a8\u670d\u52a1<\/span>
      \nuv run python -m<\/span> uvicorn src.app:app –host<\/span> 127.0<\/span>.0.1 –port<\/span> 8000<\/span> –reload<\/span><\/p>\n

      # 3. \u6253\u5f00\u6d4f\u89c8\u5668<\/span>
      \n# http:\/\/127.0.0.1:8000\/<\/span><\/p>\n

      \u542f\u52a8\u6210\u529f\u540e\u4f60\u4f1a\u770b\u5230\u8fd9\u6837\u7684\u770b\u677f（\u5de6 SSE \u5355\u5411\u63a8\u9001\u3001\u53f3 WebSocket \u53cc\u5411\u901a\u9053）：<\/p>\n

      \"\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u8fd0\u884c\u622a\u56fe\"<\/p>\n

      \u70b9\u4e00\u4e0b\u53f3\u4e0b\u89d2\u7684\u64cd\u4f5c\u53f0\u6309\u94ae，\u8fd8\u80fd\u770b\u5230 WebSocket \u7684\u53cc\u5411\u901a\u4fe1\u65e5\u5fd7：<\/p>\n

      \"WebSocket<\/p>\n

      \n
      \n

      \u7b2c 0 \u7ae0 \u00b7 \u9879\u76ee\u6982\u8ff0<\/h2>\n

      \u672c\u7ae0\u76ee\u6807<\/h3>\n

      \u5728\u770b\u4efb\u4f55\u4ee3\u7801\u4e4b\u524d，\u5148\u7528\u4e00\u5f20\u56fe\u3001\u4e00\u5f20\u622a\u56fe\u641e\u6e05\u695a\u4e09\u4ef6\u4e8b：<\/p>\n

    • \u8fd9\u4e2a\u9879\u76ee\u505a\u4e86\u4ec0\u4e48；<\/li>\n
    • SSE \u548c WebSocket \u5404\u81ea\u7684\u804c\u8d23；<\/li>\n
    • \u6570\u636e\u662f\u600e\u4e48\u6d41\u52a8\u7684\u3002<\/li>\n

      \u5efa\u7acb\u5168\u5c40\u89c2\u4e4b\u540e，\u540e\u9762\u6bcf\u4e00\u7ae0\u7684\u4ee3\u7801\u4f60\u5c31\u77e5\u9053\u5b83\u300c\u5b89\u5728\u54ea\u4e00\u5c42\u300d\u3002<\/p>\n

      \n

      0.1 \u9879\u76ee\u505a\u4e86\u4ec0\u4e48<\/h3>\n

      \u6a21\u62df\u4e00\u5bb6\u5976\u8336\u5e97\u7684\u5b9e\u65f6\u8ba2\u5355\u770b\u677f：<\/p>\n

        \n
      • \u540e\u53f0\u6bcf 0.8 \u79d2 \u81ea\u52a8\u63a8\u8fdb\u4e00\u6b21\u6240\u6709\u8ba2\u5355\u7684\u5236\u4f5c\u8fdb\u5ea6（\u5f85\u5236\u4f5c \u2192 \u5236\u4f5c\u4e2d \u2192 \u5df2\u5b8c\u6210 \u2192 \u5df2\u53d6\u9910），\u5076\u5c14\u968f\u673a\u751f\u6210\u65b0\u8ba2\u5355；<\/li>\n
      • \u5de6\u4fa7\u770b\u677f\u7528 SSE（\u5355\u5411\u63a8\u9001）：\u670d\u52a1\u5668\u53ea\u7ba1\u5f80\u4e0b\u63a8\u6700\u65b0\u8ba2\u5355\u5217\u8868，\u6d4f\u89c8\u5668\u53ea\u7ba1\u6536\u548c\u6e32\u67d3；<\/li>\n
      • \u53f3\u4fa7\u64cd\u4f5c\u53f0\u7528 WebSocket（\u53cc\u5411\u901a\u9053）：\u5e97\u5458\u53ef\u4ee5\u4e3b\u52a8\u53d1\u547d\u4ee4\u2014\u2014ping（\u63a2\u6d3b）\u3001add（\u52a0\u5355）\u3001pickup（\u53d6\u9910）\u3001snapshot（\u62c9\u5feb\u7167）\u2014\u2014\u670d\u52a1\u5668\u5bf9\u6bcf\u6761\u547d\u4ee4\u7ed9\u660e\u786e\u56de\u6267\u3002<\/li>\n<\/ul>\n

        \u8bbe\u8ba1\u610f\u56fe：\u628a\u4e24\u79cd\u5b9e\u65f6\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u6570\u636e\u6e90\u4e0a\u5bf9\u6bd4，\u76f4\u89c2\u4f53\u4f1a\u300c\u5355\u5411\u300d\u548c\u300c\u53cc\u5411\u300d\u7684\u5dee\u5f02\u3002<\/p>\n

        \n

        0.2 \u6574\u4f53\u67b6\u6784\u56fe<\/h3>\n

        \"SSE\u4e0eWebSocket\u67b6\u6784\u56fe\u751f\u6210\"<\/p>\n

        0.3 \u4e09\u4e2a\u89d2\u8272<\/h3>\n\n\u89d2\u8272\u6587\u4ef6\u804c\u8d23<\/tr>\n\n\n\n\n\n\n
        \u6570\u636e\u5c42<\/td>\nmodels.py<\/td>\n\u7ba1\u83dc\u5355\u3001\u8ba2\u5355\u3001\u72b6\u6001\u63a8\u8fdb\u3002\u548c\u4f20\u8f93\u5c42\u5b8c\u5168\u89e3\u8026，\u7eaf\u5185\u5b58\u72b6\u6001\u3002<\/td>\n<\/tr>\n
        \u4f20\u8f93\u5c42<\/td>\nsse.py \/ ws.py<\/td>\n\u5404\u81ea\u7ef4\u62a4\u4e00\u4e2a\u8ba2\u9605\u8005\u96c6\u5408，\u628a\u6570\u636e\u6309\u5404\u81ea\u534f\u8bae\u63a8\u4e0b\u53bb\u3002<\/td>\n<\/tr>\n
        \u5fc3\u8df3\u6e90<\/td>\nbroadcaster.py<\/td>\n\u540e\u53f0\u534f\u7a0b，\u6bcf 0.8s \u8c03\u4e00\u6b21 advance()，\u628a\u7ed3\u679c\u540c\u65f6\u53d1\u7ed9 SSE \u548c WS \u4e24\u4e2a\u96c6\u5408\u3002\u662f\u5b83\u4eec\u5171\u4eab\u7684\u65f6\u949f\u3002<\/td>\n<\/tr>\n
        \u5165\u53e3<\/td>\napp.py<\/td>\n\u7ec4\u88c5 FastAPI\u3001\u6302\u8def\u7531\u3001\u8d77\u540e\u53f0\u4efb\u52a1\u3001\u6258\u7ba1\u9759\u6001\u9875\u3002<\/td>\n<\/tr>\n
        \u524d\u7aef<\/td>\nstatic\/index.html<\/td>\n\u7528 EventSource \u6536 SSE\u3001\u7528 WebSocket \u53d1\u6536\u547d\u4ee4\u3001\u628a\u6570\u636e\u753b\u6210\u5361\u7247\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

        0.4 \u5173\u952e\u6982\u5ff5：SSE vs WebSocket（\u5148\u8bb0\u4f4f\u4e00\u53e5\u8bdd）<\/h3>\n
          \n
        • SSE：\u670d\u52a1\u5668\u2192\u6d4f\u89c8\u5668\u7684\u5355\u5411\u6c34\u7ba1\u3002\u57fa\u4e8e HTTP，\u6d4f\u89c8\u5668\u5f00 EventSource \u5c31\u8fde\u4e0a，\u670d\u52a1\u5668\u7528 text\/event-stream \u4e00\u5e27\u4e00\u5e27\u5730\u63a8\u6587\u672c\u3002\u65ad\u7ebf\u6d4f\u89c8\u5668\u81ea\u52a8\u91cd\u8fde\u3002<\/li>\n
        • WebSocket：\u5168\u53cc\u5de5\u3002\u63e1\u624b\u540e\u5347\u7ea7\u6210 ws:\/\/，\u53cc\u65b9\u90fd\u80fd\u968f\u65f6\u53d1\u6d88\u606f\u3002\u9002\u5408\u6709\u4ea4\u4e92\u7684\u573a\u666f（\u53d1\u547d\u4ee4\u3001\u62ff\u56de\u6267）\u3002<\/li>\n<\/ul>\n

          \u672c\u9879\u76ee\u91cc：<\/p>\n

            \n
          • \u300c\u770b\u8ba2\u5355\u300d\u7528 SSE\u2014\u2014\u53ea\u9700\u670d\u52a1\u5668\u63a8\u3001\u6d4f\u89c8\u5668\u6536，\u6700\u7b80\u5355；<\/li>\n
          • \u300c\u5e97\u5458\u64cd\u4f5c\u300d\u7528 WS\u2014\u2014\u5e97\u5458\u8981\u53d1\u547d\u4ee4，\u5fc5\u987b\u53cc\u5411\u3002<\/li>\n<\/ul>\n

            0.5 \u6570\u636e\u6d41\u52a8（\u4e00\u6b21 tick）<\/h3>\n

            broadcaster \u6bcf 0.8s \u89e6\u53d1\u4e00\u6b21:
            \n 1. advance() \u2190 models.py \u63a8\u8fdb\u6240\u6709\u8ba2\u5355，\u8fd4\u56de\u5feb\u7167 dict
            \n 2. json.dumps(snapshot) \u2190 \u5e8f\u5217\u5316\u6210\u5b57\u7b26\u4e32 payload
            \n 3. \u5bf9\u6bcf\u4e2a sse_clients \u91cc\u7684 Queue:
            \n queue.put({"event":"orders", "data": payload})
            \n \u2192 sse.py \u7684 event_stream() \u4ece Queue \u53d6\u51fa，\u62fc\u6210 SSE \u5e27 yield \u51fa\u53bb
            \n 4. \u5bf9\u6bcf\u4e2a ws_clients \u91cc\u7684 WebSocket:
            \n ws.send_text(payload) \u2190 \u76f4\u63a5\u53d1，\u5931\u8d25\u5219\u4ece\u96c6\u5408\u79fb\u9664<\/p>\n

              \n
            • SSE \u7aef：\u6bcf\u4e2a\u8fde\u63a5\u6709\u81ea\u5df1\u7684 Queue，\u5e7f\u64ad\u5668\u53ea\u5f80 Queue \u91cc\u585e，\u4e0d\u76f4\u63a5\u53d1\u2014\u2014\u4fdd\u8bc1\u53d1\u9001\u4e0d\u963b\u585e\u5e7f\u64ad\u5668\u3002<\/li>\n
            • WS \u7aef：\u76f4\u63a5 send_text，\u56e0\u4e3a WS \u539f\u751f\u652f\u6301\u5f02\u6b65\u53d1\u9001\u4e14\u80fd\u611f\u77e5\u8fde\u63a5\u65ad\u5f00\u3002<\/li>\n<\/ul>\n

              0.6 \u8fd0\u884c\u6548\u679c<\/h3>\n

              \u542f\u52a8\u670d\u52a1\u3001\u6253\u5f00 http:\/\/127.0.0.1:8000\/ \u540e，\u4f60\u4f1a\u770b\u5230：<\/p>\n

              \"\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u8fd0\u884c\u622a\u56fe\"<\/p>\n

                \n
              • \u9876\u90e8：\u6807\u9898 + SSE\/WS \u8fde\u63a5\u72b6\u6001\u706f + \u5b9e\u65f6\u65f6\u949f；<\/li>\n
              • \u7edf\u8ba1\u6761：\u603b\u8ba2\u5355 \/ \u5236\u4f5c\u4e2d \/ \u5df2\u5b8c\u6210 \/ \u5df2\u53d6\u9910；<\/li>\n
              • \u5de6\u4fa7 📋 \u5b9e\u65f6\u8ba2\u5355（\u6807\u7b7e\u300cSSE \u5355\u5411\u63a8\u9001\u300d）：\u6bcf 0.8s \u5237\u65b0\u7684\u8ba2\u5355\u5361\u7247，\u5e26\u8fdb\u5ea6\u6761\u548c\u72b6\u6001\u8272\u5757；<\/li>\n
              • \u53f3\u4fa7 🎛\ufe0f \u5e97\u5458\u64cd\u4f5c\u53f0（\u6807\u7b7e\u300cWebSocket \u53cc\u5411\u901a\u9053\u300d）：\u540c\u6837\u7684\u8ba2\u5355\u5361\u7247 + \u547d\u4ee4\u8f93\u5165\u6846 + ping\/add\/snapshot \u6309\u94ae + \u9ed1\u5e95\u901a\u4fe1\u65e5\u5fd7\u3002<\/li>\n<\/ul>\n

                \u5728\u53f3\u4fa7\u64cd\u4f5c\u53f0\u70b9\u51e0\u4e0b\u6309\u94ae，\u4f1a\u770b\u5230 WS \u901a\u4fe1\u65e5\u5fd7\u91cc\u51fa\u73b0 \u2192 \u53d1\u51fa\u7684\u547d\u4ee4 \u548c \u2190 \u6536\u5230\u7684\u56de\u6267，\u8ba2\u5355\u4e5f\u4f1a\u5b9e\u65f6\u53d8\u5316：<\/p>\n

                \"WebSocket<\/p>\n

                \n

                0.7 \u9605\u8bfb\u5efa\u8bae<\/h3>\n
                  \n
                • \u5982\u679c\u4f60\u662f\u521d\u5b66\u8005：\u4e25\u683c\u6309\u7ae0\u8282\u987a\u5e8f，\u6bcf\u7ae0\u5148\u6284\u4ee3\u7801\u3001\u518d\u770b\u8bb2\u89e3\u3001\u518d\u9a8c\u8bc1\u3002<\/li>\n
                • \u5982\u679c\u4f60\u5df2\u7ecf\u4f1a FastAPI：\u53ef\u4ee5\u76f4\u63a5\u8df3\u5230\u7b2c 3\u30014 \u7ae0\u770b SSE\/WS \u4e24\u4e2a\u4f20\u8f93\u6a21\u5757\u7684\u5b9e\u73b0\u5dee\u5f02，\u518d\u770b\u7b2c 5 \u7ae0\u5e7f\u64ad\u5668\u600e\u4e48\u628a\u5b83\u4eec\u4e32\u8d77\u6765\u3002<\/li>\n
                • \u7b2c 9 \u7ae0\u662f\u5bf9\u6bd4\u603b\u7ed3 + \u6269\u5c55\u7ec3\u4e60，\u5168\u90e8\u5199\u5b8c\u540e\u56de\u5934\u770b，\u4f1a\u6709\u66f4\u6df1\u7406\u89e3\u3002<\/li>\n<\/ul>\n

                  \u4e0b\u4e00\u7ae0 \u2192 01-\u73af\u5883\u4e0e\u9879\u76ee\u9aa8\u67b6.md：\u88c5\u73af\u5883\u3001\u5efa\u76ee\u5f55\u3001\u5199\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n

                  \n

                  \u7b2c 1 \u7ae0 \u00b7 \u73af\u5883\u4e0e\u9879\u76ee\u9aa8\u67b6<\/h2>\n

                  \u672c\u7ae0\u76ee\u6807<\/h3>\n

                  \u628a\u5f00\u53d1\u73af\u5883\u88c5\u597d\u3001\u628a\u9879\u76ee\u76ee\u5f55\u548c\u914d\u7f6e\u6587\u4ef6\u5efa\u597d\u3002\u8fd9\u4e00\u7ae0\u4e0d\u5199\u4e1a\u52a1\u903b\u8f91，\u4f46\u5b83\u662f\u540e\u9762\u6240\u6709\u4ee3\u7801\u7684\u300c\u5730\u57fa\u300d\u3002<\/p>\n

                  \u5b66\u5b8c\u672c\u7ae0\u4f60\u4f1a\u6709\u8fd9\u4e9b\u6587\u4ef6（\u5168\u662f\u914d\u7f6e\/\u7a7a\u58f3）：<\/p>\n

                  fastapi-sse-ws-\u5976\u8336\u770b\u677f\/
                  \n\u251c\u2500\u2500 pyproject.toml
                  \n\u251c\u2500\u2500 .python-version
                  \n\u251c\u2500\u2500 .gitignore
                  \n\u251c\u2500\u2500 src\/
                  \n\u2502 \u2514\u2500\u2500 __init__.py
                  \n\u2514\u2500\u2500 static\/ # \u7a7a\u76ee\u5f55，\u7b2c 7 \u7ae0\u653e index.html<\/p>\n

                  \n

                  1.1 \u51c6\u5907 Python \u73af\u5883<\/h3>\n

                  \u672c\u9879\u76ee\u7528 Python 3.14\u3002\u5148\u786e\u8ba4\u4f60\u88c5\u4e86 Python 3.14：<\/p>\n

                  python –version<\/span>
                  \n# \u5e94\u8f93\u51fa\u7c7b\u4f3c: Python 3.14.x<\/span><\/p>\n

                  \u5982\u679c\u6ca1\u88c5，\u53bb python.org \u4e0b\u8f7d\u5b89\u88c5\u3002<\/p>\n

                  1.2 \u5b89\u88c5 uv（\u63a8\u8350）<\/h3>\n

                  uv \u662f\u4e00\u4e2a\u8d85\u5feb\u7684 Python \u5305\u7ba1\u7406\u5668，\u6bd4 pip \u5feb\u5f88\u591a\u3002\u88c5\u4e00\u6b21\u5373\u53ef：<\/p>\n

                  # macOS \/ Linux<\/span>
                  \ncurl<\/span> -LsSf<\/span> https:\/\/astral.sh\/uv\/install.sh |<\/span> sh<\/span><\/p>\n

                  # Windows (PowerShell)<\/span>
                  \npowershell -ExecutionPolicy<\/span> ByPass -c<\/span> "irm https:\/\/astral.sh\/uv\/install.ps1 | iex"<\/span><\/p>\n

                  # \u6216\u7528 pip \u88c5\u4e5f\u884c<\/span>
                  \npip install<\/span> uv<\/p>\n

                  \u9a8c\u8bc1：<\/p>\n

                  uv –version<\/span>
                  \n# \u5e94\u8f93\u51fa: uv 0.11.x …<\/span><\/p>\n

                  \u6ca1 uv \u4e5f\u80fd\u5b66：\u540e\u9762\u6240\u6709 uv xxx \u547d\u4ee4\u90fd\u7ed9\u51fa\u5bf9\u5e94\u7684 pip \u7248\u672c\u3002\u7528 uv \u53ea\u662f\u66f4\u5feb\u3001\u66f4\u7701\u5fc3\u3002<\/p>\n

                  1.3 \u521b\u5efa\u9879\u76ee\u76ee\u5f55<\/h3>\n

                  mkdir<\/span> fastapi-sse-ws-\u5976\u8336\u770b\u677f
                  \ncd<\/span> fastapi-sse-ws-\u5976\u8336\u770b\u677f<\/p>\n

                  1.4 .python-version \u2014\u2014 \u56fa\u5b9a Python \u7248\u672c<\/h3>\n

                  \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h4>\n

                  \u65b0\u5efa\u6587\u4ef6 .python-version，\u5185\u5bb9\u53ea\u6709\u4e00\u884c：<\/p>\n

                  3.14<\/p>\n

                  \u8bb2\u89e3<\/h4>\n
                    \n
                  • \u8fd9\u4e2a\u6587\u4ef6\u88ab uv\u3001pyenv \u7b49\u5de5\u5177\u8bc6\u522b，\u8868\u793a\u300c\u8fd9\u4e2a\u9879\u76ee\u7528 Python 3.14\u300d；<\/li>\n
                  • \u56e2\u961f\u534f\u4f5c\u65f6，\u5927\u5bb6 uv sync \u5c31\u4f1a\u81ea\u52a8\u88c5\u5bf9\u5e94\u7248\u672c，\u4e0d\u7528\u53e3\u5934\u7ea6\u5b9a；<\/li>\n
                  • \u5185\u5bb9\u5c31\u662f 3.14，\u4e0d\u5e26\u5c0f\u7248\u672c\u53f7，\u8868\u793a\u300c3.14.x \u90fd\u884c\u300d\u3002<\/li>\n<\/ul>\n

                    1.5 pyproject.toml \u2014\u2014 \u9879\u76ee\u5143\u4fe1\u606f + \u4f9d\u8d56<\/h3>\n

                    \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h4>\n

                    \u65b0\u5efa\u6587\u4ef6 pyproject.toml：<\/p>\n

                    [project]
                    \nname = "fastapi-sse-ws"
                    \nversion = "0.1.0"
                    \ndescription = "Add your description here"
                    \nrequires-python = ">=3.14"
                    \ndependencies = [
                    \n "fastapi>=0.141.1",
                    \n "uvicorn[standard]>=0.52.1",
                    \n "websockets>=17.0.1",
                    \n]<\/p>\n

                    \u8bb2\u89e3<\/h4>\n
                      \n
                    • [project]：\u73b0\u4ee3 Python \u9879\u76ee\u7684\u6807\u51c6\u5143\u4fe1\u606f\u6bb5（PEP 621）；<\/li>\n
                    • name \/ version：\u9879\u76ee\u540d\u548c\u7248\u672c，uv \/ pip \u90fd\u4f1a\u7528\u5b83\u751f\u6210\u5305\u4fe1\u606f；<\/li>\n
                    • requires-python = ">=3.14"：\u672c\u9879\u76ee\u7528\u5230\u4e86 3.14 \u7684\u7279\u6027（\u5982 datetime.UTC \u522b\u540d），\u6240\u4ee5\u8981\u6c42 3.14+；<\/li>\n
                    • dependencies \u4e09\u4e2a\u4f9d\u8d56：\n
                        \n
                      • fastapi：Web \u6846\u67b6，\u63d0\u4f9b\u8def\u7531\u3001StreamingResponse\u3001WebSocket \u7b49；<\/li>\n
                      • uvicorn[standard]：ASGI \u670d\u52a1\u5668\u3002[standard] \u8868\u793a\u88c5\u300c\u5e26\u989d\u5916\u6027\u80fd\u4f18\u5316\u300d\u7684\u7248\u672c（\u542b uvloop\u3001httptools \u7b49）；<\/li>\n
                      • websockets：WebSocket \u534f\u8bae\u5e93，Uvicorn \u5904\u7406 WS \u65f6\u9700\u8981\u5b83\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                        \u4e3a\u4ec0\u4e48 FastAPI \u4e0d\u81ea\u52a8\u5e26 websockets？\u56e0\u4e3a\u5f88\u591a\u9879\u76ee\u7528\u4e0d\u5230 WS\u3002uvicorn[standard] \u5df2\u7ecf\u628a websockets \u4f5c\u4e3a\u53ef\u9009\u4f9d\u8d56\u88c5\u4e0a\u4e86，\u8fd9\u91cc\u663e\u5f0f\u58f0\u660e\u662f\u6559\u5b66\u6e05\u6670\u8d77\u89c1\u3002<\/p>\n

                        1.6 \u5b89\u88c5\u4f9d\u8d56<\/h3>\n

                        # \u7528 uv（\u63a8\u8350）：\u4f1a\u6839\u636e pyproject.toml + .python-version \u81ea\u52a8\u5efa\u865a\u62df\u73af\u5883\u5e76\u88c5\u4f9d\u8d56<\/span>
                        \nuv sync<\/span><\/p>\n

                        # \u4e5f\u53ef\u4ee5\u76f4\u63a5\u7528 pip（\u9700\u8981\u81ea\u5df1\u5148 python -m venv .venv \u5e76\u6fc0\u6d3b）<\/span>
                        \npip install<\/span> fastapi "uvicorn[standard]"<\/span> websockets<\/p>\n

                        uv sync \u6267\u884c\u5b8c\u540e，\u76ee\u5f55\u91cc\u4f1a\u591a\u51fa .venv\/（\u865a\u62df\u73af\u5883）\u548c uv.lock（\u9501\u6587\u4ef6，\u8bb0\u5f55\u7cbe\u786e\u7248\u672c）\u3002<\/p>\n

                        1.7 .gitignore \u2014\u2014 \u4e0d\u63d0\u4ea4\u7684\u4e1c\u897f<\/h3>\n

                        \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h4>\n

                        \u65b0\u5efa\u6587\u4ef6 .gitignore：<\/p>\n

                        # Python-generated files
                        \n__pycache__\/
                        \n*.py[oc]
                        \nbuild\/
                        \ndist\/
                        \nwheels\/
                        \n*.egg-info<\/p>\n

                        # Virtual environments
                        \n.venv<\/p>\n

                        \u8bb2\u89e3<\/h4>\n
                          \n
                        • __pycache__\/\u3001*.py[oc]：Python \u8fd0\u884c\u65f6\u751f\u6210\u7684\u5b57\u8282\u7801\u7f13\u5b58，\u6ca1\u5fc5\u8981\u8fdb\u7248\u672c\u5e93；<\/li>\n
                        • build\/ dist\/ wheels\/ *.egg-info：\u6253\u5305\u4ea7\u7269；<\/li>\n
                        • .venv：\u865a\u62df\u73af\u5883\u76ee\u5f55，\u6bcf\u4e2a\u4eba\u672c\u5730\u4e00\u4efd，\u4e0d\u8fdb\u7248\u672c\u5e93\u3002<\/li>\n<\/ul>\n

                          1.8 src\/__init__.py \u2014\u2014 \u628a src \u53d8\u6210\u5305<\/h3>\n

                          \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h4>\n

                          \u65b0\u5efa\u76ee\u5f55 src\/，\u91cc\u9762\u5efa\u7a7a\u6587\u4ef6 __init__.py：<\/p>\n

                          """src \u5305: \u6559\u5b66\u6a21\u5757\u96c6\u5408."""<\/span><\/p>\n

                          \u8bb2\u89e3<\/h4>\n
                            \n
                          • \u6709 __init__.py \u7684\u76ee\u5f55，Python \u624d\u628a\u5b83\u5f53\u6210\u4e00\u4e2a\u5305，\u91cc\u9762\u7684\u6a21\u5757\u624d\u80fd\u7528 from src.app import app \u8fd9\u79cd\u65b9\u5f0f\u5bfc\u5165；<\/li>\n
                          • \u8fd9\u4e00\u884c docstring \u662f\u5305\u7684\u8bf4\u660e，\u8fd0\u884c help(src) \u65f6\u4f1a\u663e\u793a；<\/li>\n
                          • \u540e\u9762\u6211\u4eec\u8981\u5199\u7684 app.py models.py sse.py ws.py broadcaster.py \u90fd\u653e\u5728 src\/ \u4e0b，\u5b83\u4eec\u4e4b\u95f4\u7528 from .models import … \u8fd9\u79cd\u76f8\u5bf9\u5bfc\u5165\u4e92\u76f8\u5f15\u7528\u3002<\/li>\n<\/ul>\n

                            1.9 \u5efa static\/ \u76ee\u5f55<\/h3>\n

                            mkdir<\/span> static<\/p>\n

                            \u6682\u65f6\u7559\u7a7a，\u7b2c 7 \u7ae0\u5f80\u91cc\u653e index.html\u3002<\/p>\n

                            static\/ \u76ee\u5f55\u5728 app.py \u91cc\u4f1a\u88ab\u6302\u8f7d\u6210\u9759\u6001\u8d44\u6e90，\u6d4f\u89c8\u5668\u8bbf\u95ee \/static\/xxx \u5c31\u80fd\u62ff\u5230\u91cc\u9762\u7684\u6587\u4ef6\u3002<\/p>\n

                            1.10 \u73b0\u5728\u7684\u76ee\u5f55\u7ed3\u6784<\/h3>\n

                            fastapi-sse-ws-\u5976\u8336\u770b\u677f\/
                            \n\u251c\u2500\u2500 .gitignore
                            \n\u251c\u2500\u2500 .python-version
                            \n\u251c\u2500\u2500 pyproject.toml
                            \n\u251c\u2500\u2500 uv.lock # uv sync \u81ea\u52a8\u751f\u6210（\u7528 pip \u65f6\u6ca1\u6709）
                            \n\u251c\u2500\u2500 .venv\/ # uv sync \u81ea\u52a8\u751f\u6210（\u7528 pip \u65f6\u9700\u624b\u52a8\u5efa）
                            \n\u251c\u2500\u2500 src\/
                            \n\u2502 \u2514\u2500\u2500 __init__.py
                            \n\u2514\u2500\u2500 static\/ # \u7a7a\u76ee\u5f55<\/p>\n

                            1.11 \u52a8\u624b\u9a8c\u8bc1<\/h3>\n

                            # \u5728\u9879\u76ee\u6839\u76ee\u5f55\u6267\u884c，\u786e\u8ba4\u4f9d\u8d56\u88c5\u597d\u4e86<\/span>
                            \nuv run python -c<\/span> "import fastapi, uvicorn, websockets; print('OK')"<\/span>
                            \n# \u7528 pip \u7684\u8bdd: python -c "import fastapi, uvicorn, websockets; print('OK')"<\/span><\/p>\n

                            # \u671f\u671b\u8f93\u51fa:<\/span>
                            \n# OK<\/span><\/p>\n

                            \u5982\u679c\u8f93\u51fa OK，\u8bf4\u660e\u5730\u57fa\u6253\u597d\u4e86\u3002\u4e0b\u4e00\u7ae0\u6211\u4eec\u5f80 src\/ \u91cc\u5199\u7b2c\u4e00\u4e2a\u4e1a\u52a1\u6587\u4ef6：\u6570\u636e\u5c42 models.py\u3002<\/p>\n

                            \n

                            \u4e0b\u4e00\u7ae0 \u2192 02-\u6570\u636e\u5c42-models.md：\u83dc\u5355\u3001\u8ba2\u5355\u7c7b\u578b\u3001\u72b6\u6001\u63a8\u8fdb\u903b\u8f91\u3002<\/p>\n

                            \n

                            \u7b2c 2 \u7ae0 \u00b7 \u6570\u636e\u5c42 models.py<\/h2>\n

                            \u672c\u7ae0\u76ee\u6807<\/h3>\n

                            \u5199\u9879\u76ee\u7684\u300c\u5927\u8111\u300d\u2014\u2014\u6570\u636e\u5c42\u3002\u8fd9\u4e00\u5c42\u8d1f\u8d23：<\/p>\n

                              \n
                            • \u5b9a\u4e49\u83dc\u5355\u3001\u53e3\u5473\u9009\u9879；<\/li>\n
                            • \u5b9a\u4e49\u8ba2\u5355（Order）\u548c\u5feb\u7167（Snapshot）\u7684\u7c7b\u578b；<\/li>\n
                            • \u7ef4\u62a4\u6240\u6709\u8ba2\u5355\u7684\u5185\u5b58\u72b6\u6001；<\/li>\n
                            • \u63d0\u4f9b advance()：\u6bcf\u88ab\u8c03\u7528\u4e00\u6b21，\u5c31\u628a\u6240\u6709\u8ba2\u5355\u5f80\u524d\u63a8\u8fdb\u4e00\u6b65，\u5e76\u968f\u673a\u751f\u6210\u65b0\u8ba2\u5355\u3002<\/li>\n<\/ul>\n

                              \u5173\u952e\u8bbe\u8ba1：\u6570\u636e\u5c42\u5b8c\u5168\u4e0d\u77e5\u9053 SSE \/ WebSocket \u7684\u5b58\u5728\u3002\u5b83\u53ea\u7ba1\u6570\u636e，\u8c01\u8981\u63a8\u6570\u636e\u8c01\u81ea\u5df1\u53bb\u62ff\u3002\u8fd9\u6837\u540e\u9762\u8bb2\u4e24\u79cd\u4f20\u8f93\u534f\u8bae\u65f6，\u6570\u636e\u5c42\u4e00\u884c\u90fd\u4e0d\u7528\u6539\u3002<\/p>\n

                              \n

                              2.1 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                              \u65b0\u5efa\u6587\u4ef6 src\/models.py，\u5b8c\u6574\u7167\u6284：<\/p>\n

                              """
                              \n\u6570\u636e\u5c42: \u83dc\u5355\u3001\u8ba2\u5355\u72b6\u6001\u3001\u63a8\u8fdb\u903b\u8f91.<\/p>\n

                              \u4e0e\u4f20\u8f93\u5c42(SSE \/ WebSocket)\u89e3\u8026, \u65b9\u4fbf\u5355\u72ec\u8bb2\u89e3\u72b6\u6001\u7ba1\u7406.
                              \n"""<\/span><\/p>\n

                              import<\/span> random
                              \nfrom<\/span> datetime import<\/span> UTC,<\/span> datetime
                              \nfrom<\/span> itertools import<\/span> count
                              \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                              # ———- \u83dc\u5355\u4e0e\u53e3\u5473 ———-<\/span><\/p>\n

                              class<\/span> MenuItem<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                              \n name:<\/span> str<\/span>
                              \n base:<\/span> str<\/span>
                              \n price:<\/span> int<\/span><\/p>\n

                              MENU:<\/span> list<\/span>[<\/span>MenuItem]<\/span> =<\/span> [<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u73cd\u73e0\u5976\u8336"<\/span>,<\/span> "base"<\/span>:<\/span> "\u7ea2\u8336"<\/span>,<\/span> "price"<\/span>:<\/span> 12<\/span>}<\/span>,<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u6768\u679d\u7518\u9732"<\/span>,<\/span> "base"<\/span>:<\/span> "\u8292\u679c"<\/span>,<\/span> "price"<\/span>:<\/span> 18<\/span>}<\/span>,<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u828b\u6ce5\u5575\u5575"<\/span>,<\/span> "base"<\/span>:<\/span> "\u4e4c\u9f99"<\/span>,<\/span> "price"<\/span>:<\/span> 15<\/span>}<\/span>,<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u67e0\u6aac\u517b\u4e50\u591a"<\/span>,<\/span> "base"<\/span>:<\/span> "\u7eff\u8336"<\/span>,<\/span> "price"<\/span>:<\/span> 13<\/span>}<\/span>,<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u8349\u8393\u5976\u76d6"<\/span>,<\/span> "base"<\/span>:<\/span> "\u8309\u8389"<\/span>,<\/span> "price"<\/span>:<\/span> 16<\/span>}<\/span>,<\/span>
                              \n {<\/span>"name"<\/span>:<\/span> "\u8584\u8377\u51b0\u53ef\u53ef"<\/span>,<\/span> "base"<\/span>:<\/span> "\u53ef\u53ef"<\/span>,<\/span> "price"<\/span>:<\/span> 14<\/span>}<\/span>,<\/span>
                              \n]<\/span>
                              \nSUGAR =<\/span> [<\/span>"\u5168\u7cd6"<\/span>,<\/span> "\u4e03\u5206"<\/span>,<\/span> "\u534a\u7cd6"<\/span>,<\/span> "\u4e09\u5206"<\/span>,<\/span> "\u65e0\u7cd6"<\/span>]<\/span>
                              \nICE =<\/span> [<\/span>"\u6b63\u5e38\u51b0"<\/span>,<\/span> "\u5c11\u51b0"<\/span>,<\/span> "\u53bb\u51b0"<\/span>,<\/span> "\u70ed\u996e"<\/span>]<\/span>
                              \nTOPPING =<\/span> [<\/span>"\u73cd\u73e0"<\/span>,<\/span> "\u6930\u679c"<\/span>,<\/span> "\u5e03\u4e01"<\/span>,<\/span> "\u828b\u5706"<\/span>,<\/span> "\u5976\u76d6"<\/span>,<\/span> "\u4e0d\u52a0\u6599"<\/span>]<\/span><\/p>\n

                              STATUSES =<\/span> [<\/span>"\u5f85\u5236\u4f5c"<\/span>,<\/span> "\u5236\u4f5c\u4e2d"<\/span>,<\/span> "\u5df2\u5b8c\u6210"<\/span>,<\/span> "\u5df2\u53d6\u9910"<\/span>]<\/span><\/p>\n

                              # ———- \u7c7b\u578b\u5b9a\u4e49 ———-<\/span><\/p>\n

                              class<\/span> Order<\/span>(<\/span>TypedDict,<\/span> total=<\/span>False<\/span>)<\/span>:<\/span>
                              \n """\u8ba2\u5355\u7ed3\u6784. total=False \u56e0\u4e3a ready_since \u4ec5\u5728\u5236\u4f5c\u5b8c\u6210\u540e\u624d\u5b58\u5728."""<\/span>
                              \n id<\/span>:<\/span> int<\/span>
                              \n drink:<\/span> str<\/span>
                              \n base:<\/span> str<\/span>
                              \n price:<\/span> int<\/span>
                              \n sugar:<\/span> str<\/span>
                              \n ice:<\/span> str<\/span>
                              \n topping:<\/span> str<\/span>
                              \n status:<\/span> str<\/span>
                              \n progress:<\/span> int<\/span>
                              \n created_at:<\/span> str<\/span>
                              \n ready_since:<\/span> int<\/span><\/p>\n

                              class<\/span> Snapshot<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                              \n time:<\/span> str<\/span>
                              \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                              # ———- \u5171\u4eab\u72b6\u6001 ———-<\/span><\/p>\n

                              order_seq =<\/span> count(<\/span>1<\/span>)<\/span> # \u8ba2\u5355\u53f7\u81ea\u589e\u5668<\/span>
                              \norders:<\/span> dict<\/span>[<\/span>int<\/span>,<\/span> Order]<\/span> =<\/span> {<\/span>}<\/span> # order_id -> order \u8be6\u60c5<\/span><\/p>\n

                              def<\/span> now_iso<\/span>(<\/span>)<\/span> –<\/span>><\/span> str<\/span>:<\/span>
                              \n """ISO8601 \u65f6\u95f4\u6233 (Python 3.14 \u63a8\u8350\u7528 UTC \u522b\u540d, \u907f\u514d\u5e9f\u5f03\u7684 utcnow())."""<\/span>
                              \n return<\/span> datetime.<\/span>now(<\/span>UTC)<\/span>.<\/span>isoformat(<\/span>)<\/span><\/p>\n

                              def<\/span> new_order<\/span>(<\/span>)<\/span> –<\/span>><\/span> Order:<\/span>
                              \n """\u968f\u673a\u751f\u6210\u4e00\u4efd\u65b0\u8ba2\u5355."""<\/span>
                              \n m =<\/span> random.<\/span>choice(<\/span>MENU)<\/span>
                              \n return<\/span> Order(<\/span>
                              \n id<\/span>=<\/span>next<\/span>(<\/span>order_seq)<\/span>,<\/span>
                              \n drink=<\/span>m[<\/span>"name"<\/span>]<\/span>,<\/span>
                              \n base=<\/span>m[<\/span>"base"<\/span>]<\/span>,<\/span>
                              \n price=<\/span>m[<\/span>"price"<\/span>]<\/span>,<\/span>
                              \n sugar=<\/span>random.<\/span>choice(<\/span>SUGAR)<\/span>,<\/span>
                              \n ice=<\/span>random.<\/span>choice(<\/span>ICE)<\/span>,<\/span>
                              \n topping=<\/span>random.<\/span>choice(<\/span>TOPPING)<\/span>,<\/span>
                              \n status=<\/span>"\u5f85\u5236\u4f5c"<\/span>,<\/span>
                              \n progress=<\/span>0<\/span>,<\/span>
                              \n created_at=<\/span>now_iso(<\/span>)<\/span>,<\/span>
                              \n )<\/span><\/p>\n

                              def<\/span> advance<\/span>(<\/span>)<\/span> –<\/span>><\/span> Snapshot:<\/span>
                              \n """\u63a8\u8fdb\u6240\u6709\u672a\u5b8c\u6210\u8ba2\u5355, \u8fd4\u56de\u6700\u65b0\u5feb\u7167 (\u6309 id \u5012\u5e8f)."""<\/span>
                              \n # 1) \u5076\u5c14(20% \u6982\u7387)\u751f\u6210\u65b0\u8ba2\u5355<\/span>
                              \n if<\/span> random.<\/span>random(<\/span>)<\/span> <<\/span> 0.2<\/span> or<\/span> not<\/span> orders:<\/span>
                              \n o =<\/span> new_order(<\/span>)<\/span>
                              \n orders[<\/span>o[<\/span>"id"<\/span>]<\/span>]<\/span> =<\/span> o<\/p>\n

                              # 2) \u63a8\u8fdb\u8fdb\u5ea6<\/span>
                              \n completed:<\/span> list<\/span>[<\/span>int<\/span>]<\/span> =<\/span> [<\/span>]<\/span>
                              \n for<\/span> oid,<\/span> o in<\/span> orders.<\/span>items(<\/span>)<\/span>:<\/span>
                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u53d6\u9910"<\/span>:<\/span>
                              \n continue<\/span>
                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5f85\u5236\u4f5c"<\/span>:<\/span>
                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5236\u4f5c\u4e2d"<\/span>
                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5236\u4f5c\u4e2d"<\/span>:<\/span>
                              \n o[<\/span>"progress"<\/span>]<\/span> =<\/span> min<\/span>(<\/span>100<\/span>,<\/span> o[<\/span>"progress"<\/span>]<\/span> +<\/span> random.<\/span>randint(<\/span>8<\/span>,<\/span> 18<\/span>)<\/span>)<\/span>
                              \n if<\/span> o[<\/span>"progress"<\/span>]<\/span> >=<\/span> 100<\/span>:<\/span>
                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u5b8c\u6210"<\/span>
                              \n # \u5df2\u5b8c\u6210 3 \u4e2a tick \u540e\u81ea\u52a8\u51fa\u961f<\/span>
                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u5b8c\u6210"<\/span> and<\/span> o[<\/span>"progress"<\/span>]<\/span> >=<\/span> 100<\/span>:<\/span>
                              \n o[<\/span>"ready_since"<\/span>]<\/span> =<\/span> o.<\/span>get(<\/span>"ready_since"<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> 1<\/span>
                              \n if<\/span> o[<\/span>"ready_since"<\/span>]<\/span> >=<\/span> 3<\/span>:<\/span>
                              \n completed.<\/span>append(<\/span>oid)<\/span><\/p>\n

                              for<\/span> oid in<\/span> completed:<\/span>
                              \n orders[<\/span>oid]<\/span>[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u53d6\u9910"<\/span><\/p>\n

                              # 3) \u961f\u5217\u6700\u591a\u4fdd\u7559 8 \u6761\u5df2\u53d6\u9910<\/span>
                              \n finished =<\/span> [<\/span>oid for<\/span> oid,<\/span> o in<\/span> orders.<\/span>items(<\/span>)<\/span> if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u53d6\u9910"<\/span>]<\/span>
                              \n for<\/span> oid in<\/span> finished[<\/span>:<\/span>–<\/span>8<\/span>]<\/span> if<\/span> len<\/span>(<\/span>finished)<\/span> ><\/span> 8<\/span> else<\/span> [<\/span>]<\/span>:<\/span>
                              \n orders.<\/span>pop(<\/span>oid,<\/span> None<\/span>)<\/span><\/p>\n

                              return<\/span> Snapshot(<\/span>time=<\/span>now_iso(<\/span>)<\/span>,<\/span> orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>)<\/span><\/p>\n

                              def<\/span> snapshot<\/span>(<\/span>)<\/span> –<\/span>><\/span> Snapshot:<\/span>
                              \n """\u8fd4\u56de\u5f53\u524d\u5feb\u7167, \u4e0d\u6539\u53d8\u72b6\u6001."""<\/span>
                              \n return<\/span> Snapshot(<\/span>time=<\/span>now_iso(<\/span>)<\/span>,<\/span> orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>)<\/span><\/p>\n

                              \u26a0\ufe0f \u6284\u5b8c\u5148\u4e0d\u8981\u8fd0\u884c\u2014\u2014advance() \u91cc\u7528\u5230 orders，\u4f46\u76ee\u524d\u6ca1\u4eba\u8c03\u7528\u5b83\u3002\u4e0b\u4e00\u7ae0\u88c5\u597d\u8def\u7531\u3001\u7b2c 5 \u7ae0\u88c5\u597d\u5e7f\u64ad\u5668\u624d\u4f1a\u8dd1\u8d77\u6765\u3002<\/p>\n

                              \n

                              2.2 \u9010\u6bb5\u8bb2\u89e3<\/h3>\n

                              2.2.1 \u5bfc\u5165\u4e0e\u80cc\u666f<\/h4>\n

                              import<\/span> random
                              \nfrom<\/span> datetime import<\/span> UTC,<\/span> datetime
                              \nfrom<\/span> itertools import<\/span> count
                              \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                                \n
                              • random：\u751f\u6210\u65b0\u8ba2\u5355\u3001\u968f\u673a\u8fdb\u5ea6\u589e\u91cf；<\/li>\n
                              • datetime.UTC\u3001datetime：\u751f\u6210\u65f6\u95f4\u6233\u3002\u6ce8\u610f UTC：Python 3.12+ \u624d\u6709 datetime.UTC \u5e38\u91cf（3.14 \u63a8\u8350\u7528），\u8001\u7684 datetime.utcnow() \u5df2\u5e9f\u5f03（\u65f6\u533a\u4e0d\u660e\u786e）；<\/li>\n
                              • itertools.count：\u4e00\u4e2a\u65e0\u9650\u81ea\u589e\u8ba1\u6570\u5668，\u7528\u6765\u751f\u6210\u8ba2\u5355\u53f7 1, 2, 3, …；<\/li>\n
                              • typing.TypedDict：\u58f0\u660e\u300c\u5e26\u56fa\u5b9a\u5b57\u6bb5\u7684 dict \u7c7b\u578b\u300d\u3002<\/li>\n<\/ul>\n

                                2.2.2 \u83dc\u5355\u4e0e\u53e3\u5473\u5e38\u91cf<\/h4>\n

                                class<\/span> MenuItem<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                \n name:<\/span> str<\/span>
                                \n base:<\/span> str<\/span>
                                \n price:<\/span> int<\/span><\/p>\n

                                MENU:<\/span> list<\/span>[<\/span>MenuItem]<\/span> =<\/span> [<\/span> .<\/span>.<\/span>.<\/span> 6<\/span> \u6b3e\u996e\u54c1 .<\/span>.<\/span>.<\/span> ]<\/span>
                                \nSUGAR =<\/span> [<\/span>"\u5168\u7cd6"<\/span>,<\/span> "\u4e03\u5206"<\/span>,<\/span> "\u534a\u7cd6"<\/span>,<\/span> "\u4e09\u5206"<\/span>,<\/span> "\u65e0\u7cd6"<\/span>]<\/span>
                                \nICE =<\/span> [<\/span>"\u6b63\u5e38\u51b0"<\/span>,<\/span> "\u5c11\u51b0"<\/span>,<\/span> "\u53bb\u51b0"<\/span>,<\/span> "\u70ed\u996e"<\/span>]<\/span>
                                \nTOPPING =<\/span> [<\/span>"\u73cd\u73e0"<\/span>,<\/span> "\u6930\u679c"<\/span>,<\/span> "\u5e03\u4e01"<\/span>,<\/span> "\u828b\u5706"<\/span>,<\/span> "\u5976\u76d6"<\/span>,<\/span> "\u4e0d\u52a0\u6599"<\/span>]<\/span><\/p>\n

                                STATUSES =<\/span> [<\/span>"\u5f85\u5236\u4f5c"<\/span>,<\/span> "\u5236\u4f5c\u4e2d"<\/span>,<\/span> "\u5df2\u5b8c\u6210"<\/span>,<\/span> "\u5df2\u53d6\u9910"<\/span>]<\/span><\/p>\n

                                  \n
                                • MenuItem \u7528 TypedDict \u5b9a\u4e49\u4e86\u83dc\u5355\u9879\u7684\u4e09\u4e2a\u5b57\u6bb5（\u540d\u5b57\u3001\u8336\u5e95\u3001\u4ef7\u683c）\u3002TypedDict \u7684\u597d\u5904\u662f：\u5199 m["name"] \u65f6 IDE \u6709\u8865\u5168\u3001\u6709\u7c7b\u578b\u68c0\u67e5；<\/li>\n
                                • MENU \u662f 6 \u6b3e\u5976\u8336，\u6bcf\u6b3e\u6709\u56fa\u5b9a\u7684\u8336\u5e95\u548c\u4ef7\u683c；<\/li>\n
                                • SUGAR \/ ICE \/ TOPPING：\u968f\u673a\u9009\u53e3\u5473\u7528；<\/li>\n
                                • STATUSES：\u8ba2\u5355\u7684\u56db\u79cd\u72b6\u6001，\u524d\u7aef\u7528\u6765\u6e32\u67d3\u72b6\u6001\u8272\u5757\u3002<\/li>\n<\/ul>\n

                                  2.2.3 Order \u4e0e Snapshot \u7c7b\u578b<\/h4>\n

                                  class<\/span> Order<\/span>(<\/span>TypedDict,<\/span> total=<\/span>False<\/span>)<\/span>:<\/span>
                                  \n """\u8ba2\u5355\u7ed3\u6784. total=False \u56e0\u4e3a ready_since \u4ec5\u5728\u5236\u4f5c\u5b8c\u6210\u540e\u624d\u5b58\u5728."""<\/span>
                                  \n id<\/span>:<\/span> int<\/span>
                                  \n drink:<\/span> str<\/span>
                                  \n base:<\/span> str<\/span>
                                  \n price:<\/span> int<\/span>
                                  \n sugar:<\/span> str<\/span>
                                  \n ice:<\/span> str<\/span>
                                  \n topping:<\/span> str<\/span>
                                  \n status:<\/span> str<\/span>
                                  \n progress:<\/span> int<\/span>
                                  \n created_at:<\/span> str<\/span>
                                  \n ready_since:<\/span> int<\/span><\/p>\n

                                    \n
                                  • total=False \u662f\u5173\u952e：\u9ed8\u8ba4 TypedDict \u8981\u6c42\u6240\u6709\u5b57\u6bb5\u90fd\u5fc5\u987b\u5b58\u5728\u3002\u4f46\u8ba2\u5355\u91cc\u7684 ready_since（\u5df2\u5b8c\u6210\u4e86\u51e0\u4e2a tick）\u53ea\u5728\u8ba2\u5355\u53d8\u6210\u300c\u5df2\u5b8c\u6210\u300d\u4e4b\u540e\u624d\u51fa\u73b0，\u65b0\u5efa\u8ba2\u5355\u65f6\u6ca1\u6709\u3002\u6240\u4ee5\u7528 total=False \u8868\u793a\u300c\u6240\u6709\u5b57\u6bb5\u90fd\u662f\u53ef\u9009\u7684\u300d；<\/li>\n
                                  • \u8fd9\u6837\u8bbe\u8ba1\u65e2\u4fdd\u7559\u4e86\u7c7b\u578b\u63d0\u793a，\u53c8\u5141\u8bb8\u5b57\u6bb5\u6e10\u8fdb\u5f0f\u6dfb\u52a0\u3002<\/li>\n<\/ul>\n

                                    class<\/span> Snapshot<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                    \n time:<\/span> str<\/span>
                                    \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                                      \n
                                    • Snapshot \u662f\u6bcf\u6b21\u5e7f\u64ad\u8981\u63a8\u7ed9\u524d\u7aef\u7684\u5b8c\u6574\u6570\u636e：\u5f53\u524d\u65f6\u95f4 + \u6240\u6709\u8ba2\u5355\u5217\u8868\u3002<\/li>\n<\/ul>\n

                                      2.2.4 \u5171\u4eab\u72b6\u6001<\/h4>\n

                                      order_seq =<\/span> count(<\/span>1<\/span>)<\/span> # \u8ba2\u5355\u53f7\u81ea\u589e\u5668<\/span>
                                      \norders:<\/span> dict<\/span>[<\/span>int<\/span>,<\/span> Order]<\/span> =<\/span> {<\/span>}<\/span> # order_id -> order \u8be6\u60c5<\/span><\/p>\n

                                        \n
                                      • order_seq = count(1)：count(1) \u8fd4\u56de\u4e00\u4e2a\u751f\u6210\u5668，\u6bcf\u6b21 next(order_seq) \u5f97\u5230 1, 2, 3, \u2026\u3002\u6bd4\u624b\u52a8\u7ef4\u62a4 id += 1 \u66f4\u4f18\u96c5，\u7ebf\u7a0b\u5b89\u5168（\u867d\u7136\u672c\u9879\u76ee\u5355\u7ebf\u7a0b）；<\/li>\n
                                      • orders：\u6240\u6709\u8ba2\u5355\u7684\u5b57\u5178，key \u662f\u8ba2\u5355\u53f7，value \u662f Order\u3002\u8fd9\u662f\u6574\u4e2a\u5e94\u7528\u7684\u300c\u5185\u5b58\u6570\u636e\u5e93\u300d\u3002<\/li>\n<\/ul>\n

                                        \u8fd9\u4e24\u4e2a\u662f\u6a21\u5757\u7ea7\u53d8\u91cf，\u6574\u4e2a\u8fdb\u7a0b\u5171\u4eab\u3002\u6240\u6709 advance()\u3001new_order()\u3001snapshot() \u90fd\u5728\u64cd\u4f5c\u5b83\u4eec\u3002\u8fd9\u4e5f\u662f\u4e3a\u4ec0\u4e48\u6570\u636e\u5c42\u8981\u548c\u4f20\u8f93\u5c42\u89e3\u8026\u2014\u2014\u72b6\u6001\u96c6\u4e2d\u7ba1\u7406，\u8c01\u8981\u7528\u8c01\u62ff\u3002<\/p>\n

                                        2.2.5 \u65f6\u95f4\u6233\u51fd\u6570<\/h4>\n

                                        def<\/span> now_iso<\/span>(<\/span>)<\/span> –<\/span>><\/span> str<\/span>:<\/span>
                                        \n """ISO8601 \u65f6\u95f4\u6233 (Python 3.14 \u63a8\u8350\u7528 UTC \u522b\u540d, \u907f\u514d\u5e9f\u5f03\u7684 utcnow())."""<\/span>
                                        \n return<\/span> datetime.<\/span>now(<\/span>UTC)<\/span>.<\/span>isoformat(<\/span>)<\/span><\/p>\n

                                          \n
                                        • \u8fd4\u56de\u5f62\u5982 "2026-08-04T12:34:56.789+00:00" \u7684\u5b57\u7b26\u4e32；<\/li>\n
                                        • \u524d\u7aef\u7528 new Date(iso) \u89e3\u6790\u540e\u53d6\u65f6\u5206\u79d2\u663e\u793a\u5728\u65f6\u949f\u4e0a；<\/li>\n
                                        • \u7528 UTC \u800c\u975e utcnow()：\u524d\u8005\u8fd4\u56de\u5e26\u65f6\u533a\u7684 datetime，\u540e\u8005\u8fd4\u56de\u65e0\u65f6\u533a\u7684（\u5df2\u5e9f\u5f03）\u3002<\/li>\n<\/ul>\n

                                          2.2.6 \u751f\u6210\u65b0\u8ba2\u5355<\/h4>\n

                                          def<\/span> new_order<\/span>(<\/span>)<\/span> –<\/span>><\/span> Order:<\/span>
                                          \n """\u968f\u673a\u751f\u6210\u4e00\u4efd\u65b0\u8ba2\u5355."""<\/span>
                                          \n m =<\/span> random.<\/span>choice(<\/span>MENU)<\/span>
                                          \n return<\/span> Order(<\/span>
                                          \n id<\/span>=<\/span>next<\/span>(<\/span>order_seq)<\/span>,<\/span>
                                          \n drink=<\/span>m[<\/span>"name"<\/span>]<\/span>,<\/span>
                                          \n base=<\/span>m[<\/span>"base"<\/span>]<\/span>,<\/span>
                                          \n price=<\/span>m[<\/span>"price"<\/span>]<\/span>,<\/span>
                                          \n sugar=<\/span>random.<\/span>choice(<\/span>SUGAR)<\/span>,<\/span>
                                          \n ice=<\/span>random.<\/span>choice(<\/span>ICE)<\/span>,<\/span>
                                          \n topping=<\/span>random.<\/span>choice(<\/span>TOPPING)<\/span>,<\/span>
                                          \n status=<\/span>"\u5f85\u5236\u4f5c"<\/span>,<\/span>
                                          \n progress=<\/span>0<\/span>,<\/span>
                                          \n created_at=<\/span>now_iso(<\/span>)<\/span>,<\/span>
                                          \n )<\/span><\/p>\n

                                            \n
                                          • \u968f\u673a\u9009\u4e00\u6b3e\u83dc\u5355\u3001\u968f\u673a\u9009\u7cd6\u5ea6\/\u51b0\u5ea6\/\u52a0\u6599；<\/li>\n
                                          • id \u7528 next(order_seq) \u81ea\u589e；<\/li>\n
                                          • \u65b0\u8ba2\u5355\u521d\u59cb\u72b6\u6001 "\u5f85\u5236\u4f5c"\u3001\u8fdb\u5ea6 0；<\/li>\n
                                          • Order(…) \u770b\u8d77\u6765\u50cf\u6784\u9020\u51fd\u6570，\u5176\u5b9e TypedDict \u53ea\u662f\u7c7b\u578b\u63d0\u793a，\u8fd0\u884c\u65f6\u5b83\u5c31\u662f\u666e\u901a dict，Order(…) \u7b49\u4ef7\u4e8e {"id": …, "drink": …, …}\u3002<\/li>\n<\/ul>\n

                                            2.2.7 \u6838\u5fc3：advance() \u63a8\u8fdb\u903b\u8f91<\/h4>\n

                                            \u8fd9\u662f\u6570\u636e\u5c42\u6700\u590d\u6742\u7684\u51fd\u6570，\u9010\u6bb5\u62c6：<\/p>\n

                                            def<\/span> advance<\/span>(<\/span>)<\/span> –<\/span>><\/span> Snapshot:<\/span>
                                            \n """\u63a8\u8fdb\u6240\u6709\u672a\u5b8c\u6210\u8ba2\u5355, \u8fd4\u56de\u6700\u65b0\u5feb\u7167 (\u6309 id \u5012\u5e8f)."""<\/span>
                                            \n # 1) \u5076\u5c14(20% \u6982\u7387)\u751f\u6210\u65b0\u8ba2\u5355<\/span>
                                            \n if<\/span> random.<\/span>random(<\/span>)<\/span> <<\/span> 0.2<\/span> or<\/span> not<\/span> orders:<\/span>
                                            \n o =<\/span> new_order(<\/span>)<\/span>
                                            \n orders[<\/span>o[<\/span>"id"<\/span>]<\/span>]<\/span> =<\/span> o<\/p>\n

                                              \n
                                            • random.random() \u8fd4\u56de [0, 1) \u7684\u6d6e\u70b9\u6570，\u5c0f\u4e8e 0.2 \u7684\u6982\u7387\u7ea6 20%；<\/li>\n
                                            • or not orders：\u5982\u679c\u5f53\u524d\u4e00\u4e2a\u8ba2\u5355\u90fd\u6ca1\u6709（\u521a\u542f\u52a8），\u5f3a\u5236\u751f\u6210\u4e00\u4e2a，\u907f\u514d\u770b\u677f\u7a7a\u767d；<\/li>\n
                                            • \u751f\u6210\u540e\u5b58\u8fdb orders \u5b57\u5178\u3002<\/li>\n<\/ul>\n

                                              # 2) \u63a8\u8fdb\u8fdb\u5ea6<\/span>
                                              \n completed:<\/span> list<\/span>[<\/span>int<\/span>]<\/span> =<\/span> [<\/span>]<\/span>
                                              \n for<\/span> oid,<\/span> o in<\/span> orders.<\/span>items(<\/span>)<\/span>:<\/span>
                                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u53d6\u9910"<\/span>:<\/span>
                                              \n continue<\/span> # \u5df2\u53d6\u9910\u7684\u4e0d\u518d\u63a8\u8fdb<\/span>
                                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5f85\u5236\u4f5c"<\/span>:<\/span>
                                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5236\u4f5c\u4e2d"<\/span> # \u5f85\u5236\u4f5c \u2192 \u5236\u4f5c\u4e2d（\u4e00\u6b21\u6027）<\/span>
                                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5236\u4f5c\u4e2d"<\/span>:<\/span>
                                              \n o[<\/span>"progress"<\/span>]<\/span> =<\/span> min<\/span>(<\/span>100<\/span>,<\/span> o[<\/span>"progress"<\/span>]<\/span> +<\/span> random.<\/span>randint(<\/span>8<\/span>,<\/span> 18<\/span>)<\/span>)<\/span>
                                              \n if<\/span> o[<\/span>"progress"<\/span>]<\/span> >=<\/span> 100<\/span>:<\/span>
                                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u5b8c\u6210"<\/span>
                                              \n # \u5df2\u5b8c\u6210 3 \u4e2a tick \u540e\u81ea\u52a8\u51fa\u961f<\/span>
                                              \n if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u5b8c\u6210"<\/span> and<\/span> o[<\/span>"progress"<\/span>]<\/span> >=<\/span> 100<\/span>:<\/span>
                                              \n o[<\/span>"ready_since"<\/span>]<\/span> =<\/span> o.<\/span>get(<\/span>"ready_since"<\/span>,<\/span> 0<\/span>)<\/span> +<\/span> 1<\/span>
                                              \n if<\/span> o[<\/span>"ready_since"<\/span>]<\/span> >=<\/span> 3<\/span>:<\/span>
                                              \n completed.<\/span>append(<\/span>oid)<\/span><\/p>\n

                                              \u72b6\u6001\u673a：<\/p>\n

                                              \u5f85\u5236\u4f5c \u2500\u2500(\u9996\u6b21advance)\u2500\u2500> \u5236\u4f5c\u4e2d \u2500\u2500(progress\u6bcftick +8~18)\u2500\u2500> \u5df2\u5b8c\u6210 \u2500\u2500(\u518d3 tick)\u2500\u2500> \u5df2\u53d6\u9910<\/p>\n

                                                \n
                                              • \u5f85\u5236\u4f5c \u2192 \u5236\u4f5c\u4e2d：\u8fdb\u5165 advance \u7684\u7b2c\u4e00\u4e2a tick \u5c31\u8f6c，\u53ea\u8f6c\u4e00\u6b21；<\/li>\n
                                              • \u5236\u4f5c\u4e2d：\u6bcf tick \u8fdb\u5ea6\u968f\u673a\u52a0 8~18，\u5c01\u9876 100\u3002\u5230 100 \u5c31 \u5df2\u5b8c\u6210；<\/li>\n
                                              • \u5df2\u5b8c\u6210：\u7528\u4e00\u4e2a ready_since \u8ba1\u6570\u5668，\u8bb0\u5f55\u5df2\u5b8c\u6210\u51e0\u4e2a tick\u3002\u6ee1 3 \u4e2a tick \u540e\u6807\u8bb0\u4e3a\u300c\u5df2\u53d6\u9910\u300d（\u653e\u8fdb completed \u5217\u8868，\u5faa\u73af\u5916\u7edf\u4e00\u5904\u7406）；<\/li>\n
                                              • o.get("ready_since", 0)：\u56e0\u4e3a ready_since \u662f\u6e10\u8fdb\u5b57\u6bb5（\u65b0\u5efa\u65f6\u6ca1\u6709），\u7528 .get \u5e26\u9ed8\u8ba4\u503c，\u907f\u514d KeyError\u3002<\/li>\n<\/ul>\n

                                                for<\/span> oid in<\/span> completed:<\/span>
                                                \n orders[<\/span>oid]<\/span>[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u53d6\u9910"<\/span><\/p>\n

                                                # 3) \u961f\u5217\u6700\u591a\u4fdd\u7559 8 \u6761\u5df2\u53d6\u9910<\/span>
                                                \n finished =<\/span> [<\/span>oid for<\/span> oid,<\/span> o in<\/span> orders.<\/span>items(<\/span>)<\/span> if<\/span> o[<\/span>"status"<\/span>]<\/span> ==<\/span> "\u5df2\u53d6\u9910"<\/span>]<\/span>
                                                \n for<\/span> oid in<\/span> finished[<\/span>:<\/span>–<\/span>8<\/span>]<\/span> if<\/span> len<\/span>(<\/span>finished)<\/span> ><\/span> 8<\/span> else<\/span> [<\/span>]<\/span>:<\/span>
                                                \n orders.<\/span>pop(<\/span>oid,<\/span> None<\/span>)<\/span><\/p>\n

                                                  \n
                                                • \u5148\u628a completed \u5217\u8868\u91cc\u7684\u8ba2\u5355\u6b63\u5f0f\u6539\u6210\u300c\u5df2\u53d6\u9910\u300d；<\/li>\n
                                                • \u7136\u540e\u505a\u6e05\u7406：\u5df2\u53d6\u9910\u7684\u8ba2\u5355\u5982\u679c\u8d85\u8fc7 8 \u6761，\u628a\u6700\u8001\u7684\u51e0\u6761\u4ece\u5b57\u5178\u91cc\u5220\u6389，\u9632\u6b62\u5185\u5b58\u65e0\u9650\u589e\u957f；<\/li>\n
                                                • finished[:-8]：\u5207\u7247，\u4fdd\u7559\u6700\u540e 8 \u6761（\u6700\u65b0\u7684），\u524d\u9762\u7684\u5168\u90e8 pop \u6389；<\/li>\n
                                                • if len(finished) > 8 else []：\u4e0d\u8db3 8 \u6761\u65f6\u5207\u7247\u7ed3\u679c\u662f\u5168\u90e8，\u4f1a\u8bef\u5220，\u6240\u4ee5\u52a0\u8fd9\u4e2a\u5224\u65ad；<\/li>\n
                                                • orders.pop(oid, None)：\u5220\u9664 key，\u4e0d\u5b58\u5728\u4e5f\u4e0d\u62a5\u9519\u3002<\/li>\n<\/ul>\n

                                                  return<\/span> Snapshot(<\/span>time=<\/span>now_iso(<\/span>)<\/span>,<\/span> orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>)<\/span><\/p>\n

                                                    \n
                                                  • \u8fd4\u56de\u5f53\u524d\u5feb\u7167：\u65f6\u95f4 + \u6240\u6709\u8ba2\u5355（\u6309 id \u5012\u5e8f，\u6700\u65b0\u7684\u5728\u6700\u524d\u9762，\u65b9\u4fbf\u524d\u7aef\u5c55\u793a）；<\/li>\n
                                                  • key=lambda o: -o["id"]：\u7528\u8d1f\u53f7\u5b9e\u73b0\u5012\u5e8f，\u7b49\u4ef7\u4e8e reverse=True\u3002<\/li>\n<\/ul>\n

                                                    2.2.8 snapshot() \u2014\u2014 \u4e0d\u6539\u53d8\u72b6\u6001\u7684\u67e5\u8be2<\/h4>\n

                                                    def<\/span> snapshot<\/span>(<\/span>)<\/span> –<\/span>><\/span> Snapshot:<\/span>
                                                    \n """\u8fd4\u56de\u5f53\u524d\u5feb\u7167, \u4e0d\u6539\u53d8\u72b6\u6001."""<\/span>
                                                    \n return<\/span> Snapshot(<\/span>time=<\/span>now_iso(<\/span>)<\/span>,<\/span> orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>)<\/span><\/p>\n

                                                      \n
                                                    • \u548c advance() \u7684\u8fd4\u56de\u503c\u4e00\u6837，\u4f46\u4e0d\u63a8\u8fdb\u8fdb\u5ea6\u3001\u4e0d\u751f\u6210\u8ba2\u5355；<\/li>\n
                                                    • \u7ed9 WebSocket \u7684 snapshot \u547d\u4ee4\u7528\u2014\u2014\u524d\u7aef\u60f3\u968f\u65f6\u62c9\u4e00\u6b21\u5f53\u524d\u72b6\u6001，\u4e0d\u5e94\u8be5\u6539\u53d8\u5b83\u3002<\/li>\n<\/ul>\n
                                                      \n

                                                      2.3 \u72b6\u6001\u673a\u4e00\u89c8<\/h3>\n

                                                      \"\u8ba2\u5355\u5904\u7406\u6d41\u7a0b\u56fe\"<\/p>\n

                                                        \n
                                                      • \u6bcf\u6b21\u8c03\u7528 advance() = \u4e00\u4e2a tick = 0.8 \u79d2（\u7531\u7b2c 5 \u7ae0\u5e7f\u64ad\u5668\u63a7\u5236）；<\/li>\n
                                                      • \u4e00\u4e2a\u8ba2\u5355\u4ece\u751f\u6210\u5230\u300c\u5df2\u53d6\u9910\u300d\u5927\u7ea6\u9700\u8981：1（\u8f6c\u5236\u4f5c\u4e2d）+ ~7（\u8fdb\u5ea6\u5230100）+ 3（\u7b49\u53d6\u9910）\u2248 11 \u4e2a tick \u2248 9 \u79d2\u3002<\/li>\n<\/ul>\n

                                                        2.4 \u4e3a\u4ec0\u4e48\u8fd9\u4e00\u7ae0\u6ca1\u6709\u300c\u8fd0\u884c\u9a8c\u8bc1\u300d？<\/h3>\n

                                                        \u6570\u636e\u5c42\u6ca1\u6709\u5165\u53e3\u51fd\u6570，\u5355\u72ec\u8dd1\u770b\u4e0d\u5230\u6548\u679c\u3002\u4f46\u5b83\u4f1a\u5728\u540e\u7eed\u7ae0\u8282\u88ab broadcaster.py（\u6bcf 0.8s \u8c03 advance()）\u548c ws.py（\u54cd\u5e94 add\/snapshot\/pickup \u547d\u4ee4）\u4f7f\u7528\u3002<\/p>\n

                                                        \u5982\u679c\u4f60\u60f3\u73b0\u5728\u5c31\u9a8c\u8bc1\u5b83\u903b\u8f91\u5bf9\u4e0d\u5bf9，\u53ef\u4ee5\u4e34\u65f6\u5199\u4e2a\u6d4b\u8bd5：<\/p>\n

                                                        uv run python -c<\/span> "
                                                        \nfrom src.models import advance, orders
                                                        \nimport time
                                                        \nfor _ in range(15):
                                                        \n snap = advance()
                                                        \n print(f'\u5171 {len(snap[\\\\"<\/span>orders\\\\"<\/span>])} \u5355:', [(o['id'], o['status'], o['progress']) for o in snap['orders'][:3]])
                                                        \n time.sleep(0.3)
                                                        \n"<\/span><\/p>\n

                                                        \u4f60\u4f1a\u770b\u5230\u8ba2\u5355\u4ece\u300c\u5f85\u5236\u4f5c\u300d\u9010\u6e10\u63a8\u8fdb\u5230\u300c\u5df2\u53d6\u9910\u300d，\u8001\u7684\u5df2\u53d6\u9910\u8ba2\u5355\u4f1a\u6d88\u5931\u3002<\/p>\n

                                                        \n

                                                        \u4e0b\u4e00\u7ae0 \u2192 03-SSE\u6a21\u5757-sse.md：\u7528 StreamingResponse \u5b9e\u73b0 SSE \u5355\u5411\u63a8\u9001\u3002<\/p>\n

                                                        \n

                                                        \u7b2c 3 \u7ae0 \u00b7 SSE \u6a21\u5757 sse.py<\/h2>\n

                                                        \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                        \u5b9e\u73b0\u9879\u76ee\u7b2c\u4e00\u4e2a\u4f20\u8f93\u6a21\u5757\u2014\u2014SSE（Server-Sent Events，\u670d\u52a1\u5668\u5355\u5411\u63a8\u9001）\u3002\u5b66\u5b8c\u672c\u7ae0\u4f60\u5c06\u7406\u89e3：<\/p>\n

                                                          \n
                                                        • SSE \u662f\u4ec0\u4e48\u3001\u4e3a\u4ec0\u4e48\u5b83\u300c\u591f\u7528\u53c8\u7b80\u5355\u300d；<\/li>\n
                                                        • \u7528 FastAPI \u7684 StreamingResponse \u600e\u4e48\u5b9e\u73b0\u4e00\u4e2a SSE \u7aef\u70b9；<\/li>\n
                                                        • \u6bcf\u4e2a\u8fde\u63a5\u72ec\u4eab\u4e00\u4e2a asyncio.Queue，\u5e7f\u64ad\u5668\u53ea\u8d1f\u8d23\u5f80 Queue \u91cc\u585e\u4e8b\u4ef6，\u53d1\u9001\u4e0d\u963b\u585e；<\/li>\n
                                                        • SSE \u5e27\u7684\u6587\u672c\u683c\u5f0f（event: \/ data: \/ \u7a7a\u884c）；<\/li>\n
                                                        • \u4e09\u4e2a\u5173\u952e\u54cd\u5e94\u5934\u7684\u4f5c\u7528\u3002<\/li>\n<\/ul>\n
                                                          \n

                                                          3.1 \u5148\u7406\u89e3 SSE \u662f\u4ec0\u4e48<\/h3>\n

                                                          SSE（Server-Sent Events）\u662f HTML5 \u6807\u51c6\u91cc\u57fa\u4e8e HTTP \u7684\u670d\u52a1\u5668\u63a8\u9001\u6280\u672f：<\/p>\n

                                                            \n
                                                          • \n

                                                            \u670d\u52a1\u5668\u54cd\u5e94\u5934 Content-Type: text\/event-stream，\u544a\u8bc9\u6d4f\u89c8\u5668\u300c\u8fd9\u662f\u4e00\u6761\u4e8b\u4ef6\u6d41\u300d；<\/p>\n<\/li>\n

                                                          • \n

                                                            \u6d4f\u89c8\u5668\u7528 new EventSource(url) \u5efa\u7acb\u8fde\u63a5，\u81ea\u52a8\u91cd\u8fde（\u65ad\u4e86\u6d4f\u89c8\u5668\u4f1a\u81ea\u52a8\u91cd\u8fde）；<\/p>\n<\/li>\n

                                                          • \n

                                                            \u670d\u52a1\u5668\u628a\u6570\u636e\u6309\u8fd9\u4e2a\u683c\u5f0f\u4e00\u6bb5\u6bb5\u53d1：<\/p>\n

                                                            event: \u4e8b\u4ef6\u540d
                                                            \ndata: \u6570\u636e(\u4e00\u884c\u6216\u591a\u884c)<\/p>\n

                                                            \u6bcf\u6bb5\u4e4b\u95f4\u7528\u7a7a\u884c\u5206\u9694\u3002\u6d4f\u89c8\u5668\u6536\u5230\u540e\u89e6\u53d1 es.addEventListener("\u4e8b\u4ef6\u540d", …)\u3002<\/p>\n<\/li>\n

                                                          • \n

                                                            \u5355\u5411：\u670d\u52a1\u5668 \u2192 \u6d4f\u89c8\u5668\u3002\u6d4f\u89c8\u5668\u4e0d\u80fd\u901a\u8fc7\u540c\u4e00\u6761\u8fde\u63a5\u53d1\u6570\u636e\u56de\u53bb\u3002<\/p>\n<\/li>\n<\/ul>\n

                                                            \u9002\u5408：\u80a1\u7968\u884c\u60c5\u3001\u901a\u77e5\u3001\u65e5\u5fd7\u6d41\u3001\u6211\u4eec\u7684\u300c\u8ba2\u5355\u770b\u677f\u300d\u2014\u2014\u670d\u52a1\u5668\u63a8\u3001\u6d4f\u89c8\u5668\u53ea\u770b\u3002<\/p>\n

                                                            3.2 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                                                            \u65b0\u5efa\u6587\u4ef6 src\/sse.py，\u5b8c\u6574\u7167\u6284：<\/p>\n

                                                            """
                                                            \n\u6559\u5b66\u6a21\u5757 1: SSE \u5355\u5411\u63a8\u9001.<\/p>\n

                                                            \u5173\u952e\u70b9
                                                            \n——
                                                            \n– \u6bcf\u4e2a\u8fde\u63a5\u72ec\u5360\u4e00\u4e2a asyncio.Queue, \u540e\u53f0\u5e7f\u64ad\u4efb\u52a1\u628a\u4e8b\u4ef6\u585e\u8fdb\u6bcf\u4e2a Queue
                                                            \n– StreamingResponse \u7684 media_type='text\/event-stream' \u544a\u8bc9\u6d4f\u89c8\u5668\u8fd9\u662f SSE
                                                            \n– \u5173\u95ed\u8fde\u63a5\u65f6 (Generator Exit \/ \u5f02\u5e38) \u81ea\u52a8\u4ece\u8ba2\u9605\u96c6\u5408\u79fb\u9664, \u9632\u6b62\u5185\u5b58\u6cc4\u6f0f
                                                            \n– \u4e09\u6761\u5173\u952e\u54cd\u5e94\u5934:
                                                            \n Cache-Control: no-cache \u4e0d\u7f13\u5b58
                                                            \n Connection: keep-alive \u4fdd\u6301\u957f\u8fde\u63a5
                                                            \n X-Accel-Buffering: no \u5173\u95ed nginx \u7f13\u51b2, \u5b9e\u65f6\u63a8\u9001
                                                            \n"""<\/span><\/p>\n

                                                            import<\/span> asyncio
                                                            \nimport<\/span> json
                                                            \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                                                            from<\/span> fastapi import<\/span> APIRouter
                                                            \nfrom<\/span> fastapi.<\/span>responses import<\/span> StreamingResponse<\/p>\n

                                                            from<\/span> .<\/span>models import<\/span> MENU,<\/span> STATUSES<\/p>\n

                                                            class<\/span> _QueueItem<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                            \n """broadcaster \u63a8\u5165 Queue \u7684\u4e8b\u4ef6\u9879."""<\/span>
                                                            \n event:<\/span> str<\/span>
                                                            \n data:<\/span> str<\/span><\/p>\n

                                                            router =<\/span> APIRouter(<\/span>)<\/span><\/p>\n

                                                            # \u6240\u6709 SSE \u5ba2\u6237\u7aef\u7684 Queue \u96c6\u5408 (\u7531 broadcaster \u5199\u5165)<\/span>
                                                            \nsse_clients:<\/span> set<\/span>[<\/span>asyncio.<\/span>Queue[<\/span>_QueueItem]<\/span>]<\/span> =<\/span> set<\/span>(<\/span>)<\/span><\/p>\n

                                                            @router.<\/span>get<\/span>(<\/span>"\/sse\/orders"<\/span>)<\/span>
                                                            \nasync<\/span> def<\/span> sse_orders<\/span>(<\/span>)<\/span> –<\/span>><\/span> StreamingResponse:<\/span>
                                                            \n """\u5efa\u7acb SSE \u8fde\u63a5, \u6301\u7eed\u63a5\u6536 orders \u4e8b\u4ef6."""<\/span>
                                                            \n queue:<\/span> asyncio.<\/span>Queue[<\/span>_QueueItem]<\/span> =<\/span> asyncio.<\/span>Queue(<\/span>)<\/span>
                                                            \n sse_clients.<\/span>add(<\/span>queue)<\/span><\/p>\n

                                                            async<\/span> def<\/span> event_stream<\/span>(<\/span>)<\/span>:<\/span>
                                                            \n try<\/span>:<\/span>
                                                            \n # \u9996\u6b21\u53d1 hello, \u8ba9\u524d\u7aef\u7acb\u5373\u611f\u77e5\u8fde\u63a5\u6210\u529f\u5e76\u62ff\u5230\u83dc\u5355<\/span>
                                                            \n hello =<\/span> {<\/span>"menu"<\/span>:<\/span> [<\/span>m[<\/span>"name"<\/span>]<\/span> for<\/span> m in<\/span> MENU]<\/span>,<\/span> "statuses"<\/span>:<\/span> STATUSES}<\/span>
                                                            \n yield<\/span> f"event: hello\\\\ndata: <\/span>{<\/span>json.<\/span>dumps(<\/span>hello,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span>}<\/span><\/span>\\\\n\\\\n"<\/span><\/span><\/p>\n

                                                            # \u4e3b\u5faa\u73af: \u4ece Queue \u53d6\u4e8b\u4ef6\u5e76\u4ee5 SSE \u5e27\u683c\u5f0f\u5199\u51fa<\/span>
                                                            \n while<\/span> True<\/span>:<\/span>
                                                            \n item =<\/span> await<\/span> queue.<\/span>get(<\/span>)<\/span>
                                                            \n yield<\/span> f"event: <\/span>{<\/span>item[<\/span>'event'<\/span>]<\/span>}<\/span><\/span>\\\\ndata: <\/span>{<\/span>item[<\/span>'data'<\/span>]<\/span>}<\/span><\/span>\\\\n\\\\n"<\/span><\/span>
                                                            \n finally<\/span>:<\/span>
                                                            \n # \u5ba2\u6237\u7aef\u65ad\u5f00 \/ \u5f02\u5e38 -> \u9000\u8ba2, \u907f\u514d\u6cc4\u6f0f<\/span>
                                                            \n sse_clients.<\/span>discard(<\/span>queue)<\/span><\/p>\n

                                                            return<\/span> StreamingResponse(<\/span>
                                                            \n event_stream(<\/span>)<\/span>,<\/span>
                                                            \n media_type=<\/span>"text\/event-stream"<\/span>,<\/span>
                                                            \n headers=<\/span>{<\/span>
                                                            \n "Cache-Control"<\/span>:<\/span> "no-cache"<\/span>,<\/span>
                                                            \n "Connection"<\/span>:<\/span> "keep-alive"<\/span>,<\/span>
                                                            \n "X-Accel-Buffering"<\/span>:<\/span> "no"<\/span>,<\/span>
                                                            \n }<\/span>,<\/span>
                                                            \n )<\/span><\/p>\n

                                                            \n

                                                            3.3 \u9010\u6bb5\u8bb2\u89e3<\/h3>\n

                                                            3.3.1 \u5bfc\u5165<\/h4>\n

                                                            import<\/span> asyncio
                                                            \nimport<\/span> json
                                                            \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                                                            from<\/span> fastapi import<\/span> APIRouter
                                                            \nfrom<\/span> fastapi.<\/span>responses import<\/span> StreamingResponse<\/p>\n

                                                            from<\/span> .<\/span>models import<\/span> MENU,<\/span> STATUSES<\/p>\n

                                                              \n
                                                            • asyncio：\u7528 asyncio.Queue \u7ed9\u6bcf\u4e2a\u8fde\u63a5\u5f53\u300c\u4fe1\u7bb1\u300d；<\/li>\n
                                                            • json：\u5e8f\u5217\u5316 hello \u6d88\u606f；<\/li>\n
                                                            • APIRouter：FastAPI \u7684\u8def\u7531\u5206\u7ec4\u5de5\u5177，\u628a \/sse\/orders \u5355\u72ec\u88c5\u8fdb sse.router，\u7b2c 6 \u7ae0\u5728 app.py \u91cc include_router \u6302\u4e0a\u53bb；<\/li>\n
                                                            • StreamingResponse：FastAPI \u7684\u6d41\u5f0f\u54cd\u5e94\u7c7b，\u63a5\u6536\u4e00\u4e2a\u5f02\u6b65\u751f\u6210\u5668，\u751f\u6210\u5668 yield \u4ec0\u4e48\u5c31\u5f80\u5ba2\u6237\u7aef\u53d1\u4ec0\u4e48；<\/li>\n
                                                            • from .models import MENU, STATUSES：\u76f8\u5bf9\u5bfc\u5165，\u62ff\u83dc\u5355\u548c\u72b6\u6001\u5217\u8868，\u63e1\u624b\u65f6\u53d1\u7ed9\u524d\u7aef\u3002\u6ce8\u610f . \u8868\u793a\u300c\u540c\u5305（src）\u5185\u300d\u3002<\/li>\n<\/ul>\n

                                                              3.3.2 Queue \u4e8b\u4ef6\u9879\u7684\u7c7b\u578b<\/h4>\n

                                                              class<\/span> _QueueItem<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                              \n """broadcaster \u63a8\u5165 Queue \u7684\u4e8b\u4ef6\u9879."""<\/span>
                                                              \n event:<\/span> str<\/span>
                                                              \n data:<\/span> str<\/span><\/p>\n

                                                                \n
                                                              • \u5e7f\u64ad\u5668（\u7b2c 5 \u7ae0）\u5f80\u6bcf\u4e2a Queue \u63a8\u7684\u662f {"event": "orders", "data": "…json\u5b57\u7b26\u4e32…"}；<\/li>\n
                                                              • \u7528 TypedDict \u7ed9\u4e2a\u7c7b\u578b\u540d，\u4e0b\u9762 sse_clients \u7684\u7c7b\u578b\u6807\u6ce8\u66f4\u6e05\u6670；<\/li>\n
                                                              • \u540d\u5b57\u5e26\u4e0b\u5212\u7ebf _QueueItem：\u7ea6\u5b9a\u4fd7\u6210\u8868\u793a\u300c\u6a21\u5757\u5185\u90e8\u7528\u300d\u3002<\/li>\n<\/ul>\n

                                                                3.3.3 \u8def\u7531\u5bf9\u8c61 + \u5ba2\u6237\u7aef\u96c6\u5408<\/h4>\n

                                                                router =<\/span> APIRouter(<\/span>)<\/span><\/p>\n

                                                                # \u6240\u6709 SSE \u5ba2\u6237\u7aef\u7684 Queue \u96c6\u5408 (\u7531 broadcaster \u5199\u5165)<\/span>
                                                                \nsse_clients:<\/span> set<\/span>[<\/span>asyncio.<\/span>Queue[<\/span>_QueueItem]<\/span>]<\/span> =<\/span> set<\/span>(<\/span>)<\/span><\/p>\n

                                                                  \n
                                                                • router = APIRouter()：\u521b\u5efa\u4e00\u4e2a\u72ec\u7acb\u8def\u7531\u7ec4，\u672c\u6a21\u5757\u6240\u6709\u8def\u7531\u90fd\u6302\u5728\u5b83\u4e0a\u9762；<\/li>\n
                                                                • sse_clients：\u6240\u6709\u5f53\u524d SSE \u8fde\u63a5\u7684 Queue \u96c6\u5408\u3002\u8fd9\u662f\u4e00\u4e2a\u6a21\u5757\u7ea7\u5168\u5c40\u53d8\u91cf，\u4f1a\u88ab\u7b2c 5 \u7ae0\u7684 broadcaster.py \u5bfc\u5165\u5e76\u5f80\u91cc\u585e\u4e8b\u4ef6；<\/li>\n
                                                                • \u4e3a\u4ec0\u4e48\u5b58\u7684\u662f Queue \u800c\u4e0d\u662f\u8fde\u63a5\u5bf9\u8c61？\u56e0\u4e3a SSE \u7684 StreamingResponse \u6ca1\u6709\u73b0\u6210\u7684\u300c\u53d1\u9001\u65b9\u6cd5\u300d，\u6211\u4eec\u7528\u4e00\u4e2a Queue \u5f53\u7f13\u51b2：\u5e7f\u64ad\u5668 queue.put(…)，\u8fde\u63a5\u534f\u7a0b queue.get() \u540e yield \u51fa\u53bb\u3002\u8fd9\u6837\u5e7f\u64ad\u5668\u4e0d\u7528\u7b49\u5ba2\u6237\u7aef，\u53d1\u9001\u4e5f\u4e0d\u4f1a\u963b\u585e\u5e7f\u64ad\u5faa\u73af\u3002<\/li>\n<\/ul>\n

                                                                  3.3.4 SSE \u7aef\u70b9<\/h4>\n

                                                                  @router.<\/span>get<\/span>(<\/span>"\/sse\/orders"<\/span>)<\/span>
                                                                  \nasync<\/span> def<\/span> sse_orders<\/span>(<\/span>)<\/span> –<\/span>><\/span> StreamingResponse:<\/span>
                                                                  \n """\u5efa\u7acb SSE \u8fde\u63a5, \u6301\u7eed\u63a5\u6536 orders \u4e8b\u4ef6."""<\/span>
                                                                  \n queue:<\/span> asyncio.<\/span>Queue[<\/span>_QueueItem]<\/span> =<\/span> asyncio.<\/span>Queue(<\/span>)<\/span>
                                                                  \n sse_clients.<\/span>add(<\/span>queue)<\/span><\/p>\n

                                                                    \n
                                                                  • \u6bcf\u4e2a\u5ba2\u6237\u7aef\u8fde\u8fdb\u6765，\u5c31\u65b0\u5efa\u4e00\u4e2a\u4e13\u5c5e Queue，\u52a0\u8fdb sse_clients \u96c6\u5408；<\/li>\n
                                                                  • \u6ce8\u610f\u662f async def：\u56e0\u4e3a\u91cc\u9762\u8981 await queue.get()\u3002<\/li>\n<\/ul>\n

                                                                    3.3.5 \u4e8b\u4ef6\u6d41\u751f\u6210\u5668<\/h4>\n

                                                                    async<\/span> def<\/span> event_stream<\/span>(<\/span>)<\/span>:<\/span>
                                                                    \n try<\/span>:<\/span>
                                                                    \n # \u9996\u6b21\u53d1 hello, \u8ba9\u524d\u7aef\u7acb\u5373\u611f\u77e5\u8fde\u63a5\u6210\u529f\u5e76\u62ff\u5230\u83dc\u5355<\/span>
                                                                    \n hello =<\/span> {<\/span>"menu"<\/span>:<\/span> [<\/span>m[<\/span>"name"<\/span>]<\/span> for<\/span> m in<\/span> MENU]<\/span>,<\/span> "statuses"<\/span>:<\/span> STATUSES}<\/span>
                                                                    \n yield<\/span> f"event: hello\\\\ndata: <\/span>{<\/span>json.<\/span>dumps(<\/span>hello,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span>}<\/span><\/span>\\\\n\\\\n"<\/span><\/span><\/p>\n

                                                                    # \u4e3b\u5faa\u73af: \u4ece Queue \u53d6\u4e8b\u4ef6\u5e76\u4ee5 SSE \u5e27\u683c\u5f0f\u5199\u51fa<\/span>
                                                                    \n while<\/span> True<\/span>:<\/span>
                                                                    \n item =<\/span> await<\/span> queue.<\/span>get(<\/span>)<\/span>
                                                                    \n yield<\/span> f"event: <\/span>{<\/span>item[<\/span>'event'<\/span>]<\/span>}<\/span><\/span>\\\\ndata: <\/span>{<\/span>item[<\/span>'data'<\/span>]<\/span>}<\/span><\/span>\\\\n\\\\n"<\/span><\/span>
                                                                    \n finally<\/span>:<\/span>
                                                                    \n # \u5ba2\u6237\u7aef\u65ad\u5f00 \/ \u5f02\u5e38 -> \u9000\u8ba2, \u907f\u514d\u6cc4\u6f0f<\/span>
                                                                    \n sse_clients.<\/span>discard(<\/span>queue)<\/span><\/p>\n

                                                                    \u8fd9\u662f SSE \u7684\u6838\u5fc3，\u9010\u884c\u770b：<\/p>\n

                                                                  • \n

                                                                    \u5148\u53d1 hello：\u8fde\u63a5\u521a\u5efa\u7acb，\u7acb\u523b yield \u4e00\u5e27 hello \u4e8b\u4ef6，\u628a\u83dc\u5355\u548c\u72b6\u6001\u5217\u8868\u7ed9\u524d\u7aef\u3002\u524d\u7aef\u62ff\u5230\u540e\u5c31\u80fd\u6e32\u67d3\u72b6\u6001\u8272\u5757\u3001\u663e\u793a\u83dc\u5355\u3002\u8fd9\u6837\u524d\u7aef\u4e0d\u7528\u989d\u5916\u53d1\u8bf7\u6c42\u62ff\u83dc\u5355；<\/p>\n<\/li>\n

                                                                  • \n

                                                                    SSE \u5e27\u683c\u5f0f：<\/p>\n

                                                                    event: hello\\\\n
                                                                    \ndata: {"menu": […], "statuses": […]} \\\\n
                                                                    \n\\\\n<\/p>\n

                                                                      \n
                                                                    • event: \u884c：\u4e8b\u4ef6\u540d；<\/li>\n
                                                                    • data: \u884c：\u6570\u636e（\u4e00\u6bb5 JSON \u5b57\u7b26\u4e32）；<\/li>\n
                                                                    • \u672b\u5c3e\u4e24\u4e2a \\\\n：\u4e00\u4e2a\u7ed3\u675f data \u884c，\u4e00\u4e2a\u7a7a\u884c\u8868\u793a\u8fd9\u4e00\u5e27\u7ed3\u675f（SSE \u89c4\u8303\u8981\u6c42）；<\/li>\n<\/ul>\n<\/li>\n
                                                                    • \n

                                                                      \u4e3b\u5faa\u73af：await queue.get() \u963b\u585e\u7b49\u5f85，\u76f4\u5230\u5e7f\u64ad\u5668\u5f80\u8fd9\u4e2a Queue \u91cc put \u4e86\u4e8b\u4ef6\u3002\u62ff\u5230\u540e\u62fc\u6210 SSE \u5e27 yield \u51fa\u53bb，\u53d1\u7ed9\u6d4f\u89c8\u5668；<\/p>\n<\/li>\n

                                                                    • \n

                                                                      finally \u9000\u8ba2：\u5ba2\u6237\u7aef\u65ad\u5f00（\u5173\u9875\u9762\u3001\u7f51\u7edc\u65ad\u4e86）\u4f1a\u8ba9 yield \u629b GeneratorExit \u6216\u5f02\u5e38，\u8fdb\u5165 finally\u3002\u8fd9\u91cc sse_clients.discard(queue) \u628a\u81ea\u5df1\u4ece\u96c6\u5408\u79fb\u9664\u3002\u8fd9\u4e00\u6b65\u81f3\u5173\u91cd\u8981\u2014\u2014\u5982\u679c\u4e0d\u79fb\u9664，\u5e7f\u64ad\u5668\u8fd8\u4f1a\u7ee7\u7eed\u5f80\u8fd9\u4e2a\u300c\u6b7b\u8fde\u63a5\u300d\u7684 Queue \u91cc\u585e\u6570\u636e，Queue \u65e0\u9650\u589e\u957f = \u5185\u5b58\u6cc4\u6f0f\u3002<\/p>\n<\/li>\n

                                                                      json.dumps(hello, ensure_ascii=False)：\u8ba9\u4e2d\u6587（\u73cd\u73e0\u5976\u8336\u7b49）\u539f\u6837\u8f93\u51fa，\u4e0d\u88ab\u8f6c\u6210 \u73cd\u73e0\u3002<\/p>\n

                                                                      3.3.6 \u8fd4\u56de StreamingResponse<\/h4>\n

                                                                      return<\/span> StreamingResponse(<\/span>
                                                                      \n event_stream(<\/span>)<\/span>,<\/span>
                                                                      \n media_type=<\/span>"text\/event-stream"<\/span>,<\/span>
                                                                      \n headers=<\/span>{<\/span>
                                                                      \n "Cache-Control"<\/span>:<\/span> "no-cache"<\/span>,<\/span>
                                                                      \n "Connection"<\/span>:<\/span> "keep-alive"<\/span>,<\/span>
                                                                      \n "X-Accel-Buffering"<\/span>:<\/span> "no"<\/span>,<\/span>
                                                                      \n }<\/span>,<\/span>
                                                                      \n )<\/span><\/p>\n

                                                                        \n
                                                                      • event_stream()：\u6ce8\u610f\u8fd9\u91cc\u8c03\u7528\u4e86\u751f\u6210\u5668\u51fd\u6570（\u5e26 ()），\u4f20\u8fdb\u53bb\u7684\u662f\u751f\u6210\u5668\u5bf9\u8c61；<\/li>\n
                                                                      • media_type="text\/event-stream"：SSE \u7684\u6807\u5fd7，\u6d4f\u89c8\u5668\u770b\u5230\u8fd9\u4e2a\u624d\u4f1a\u6309 SSE \u89e3\u6790，EventSource \u624d\u80fd\u6b63\u5e38\u5de5\u4f5c；<\/li>\n
                                                                      • \u4e09\u4e2a\u54cd\u5e94\u5934：\n
                                                                          \n
                                                                        • Cache-Control: no-cache：\u522b\u7f13\u5b58\u4e8b\u4ef6\u6d41，\u6bcf\u6b21\u90fd\u8981\u65b0\u7684；<\/li>\n
                                                                        • Connection: keep-alive：\u4fdd\u6301\u957f\u8fde\u63a5，\u4e0d\u8981\u53d1\u5b8c\u5c31\u65ad；<\/li>\n
                                                                        • X-Accel-Buffering: no：\u7ed9 nginx \u770b\u7684\u3002\u5982\u679c\u90e8\u7f72\u5728 nginx \u540e\u9762，nginx \u9ed8\u8ba4\u4f1a\u7f13\u51b2\u54cd\u5e94\u518d\u6279\u91cf\u53d1，\u8fd9\u4f1a\u8ba9 SSE \u5931\u53bb\u5b9e\u65f6\u6027\u3002\u8fd9\u884c\u544a\u8bc9 nginx\u300c\u522b\u7f13\u51b2\u6211，\u6536\u5230\u5c31\u8f6c\u53d1\u300d\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
                                                                          \n

                                                                          3.4 \u6570\u636e\u6d41\u56de\u987e<\/h3>\n

                                                                          \u6d4f\u89c8\u5668 EventSource('\/sse\/orders')
                                                                          \n \u2502 HTTP GET, Upgrade \u957f\u8fde\u63a5
                                                                          \n \u25bc
                                                                          \nsse_orders() \u2192 \u65b0\u5efa Queue \u52a0\u5165 sse_clients \u2192 \u8fd4\u56de StreamingResponse
                                                                          \n \u2502
                                                                          \n \u2502 event_stream() \u751f\u6210\u5668\u6301\u7eed\u8fd0\u884c:
                                                                          \n \u2502 1. \u5148 yield hello \u5e27
                                                                          \n \u2502 2. \u5faa\u73af await queue.get() \u2192 yield orders \u5e27
                                                                          \n \u2502
                                                                          \n \u25bc
                                                                          \n\u6d4f\u89c8\u5668\u6536\u5230 event:hello \u2192 \u663e\u793a\u83dc\u5355
                                                                          \n\u6d4f\u89c8\u5668\u6536\u5230 event:orders \u2192 \u5237\u65b0\u8ba2\u5355\u5361\u7247
                                                                          \n \u2502
                                                                          \n（\u65ad\u5f00\u65f6） finally: sse_clients.discard(queue) \u2190 \u9632\u6cc4\u6f0f<\/p>\n

                                                                          \u8c01\u5f80 Queue \u91cc put？\u7b54\u6848\u662f\u7b2c 5 \u7ae0\u7684\u5e7f\u64ad\u5668\u3002\u5b83\u6bcf 0.8s \u8c03 advance()，\u7136\u540e\u628a\u7ed3\u679c put \u8fdb\u6bcf\u4e00\u4e2a sse_clients \u7684 Queue\u3002<\/p>\n

                                                                          3.5 \u52a8\u624b\u9a8c\u8bc1（\u9700\u8981\u5148\u8df3\u5230\u7b2c 6 \u7ae0\u628a app.py \u5199\u5b8c）<\/h3>\n

                                                                          \u8fd9\u4e00\u7ae0\u7684\u4ee3\u7801\u5355\u72ec\u8fd8\u4e0d\u80fd\u8dd1（\u7f3a\u5165\u53e3）\u3002\u5982\u679c\u4f60\u5df2\u7ecf\u6309\u987a\u5e8f\u5199\u5230\u4e86\u7b2c 6 \u7ae0，\u53ef\u4ee5\u8fd9\u6837\u9a8c\u8bc1 SSE：<\/p>\n

                                                                          # \u542f\u52a8\u670d\u52a1（\u7b2c 6 \u7ae0\u7684\u547d\u4ee4）<\/span>
                                                                          \nuv run python -m<\/span> uvicorn src.app:app –host<\/span> 127.0<\/span>.0.1 –port<\/span> 8000<\/span> –reload<\/span><\/p>\n

                                                                          # \u53e6\u5f00\u7ec8\u7aef，\u7528 curl \u8fde SSE（-N \u8868\u793a\u4e0d\u7f13\u51b2）<\/span>
                                                                          \ncurl<\/span> -N<\/span> http:\/\/127.0.0.1:8000\/sse\/orders<\/p>\n

                                                                          \u4f60\u4f1a\u6301\u7eed\u770b\u5230：<\/p>\n

                                                                          event: hello
                                                                          \ndata: {"menu": ["\u73cd\u73e0\u5976\u8336", "\u6768\u679d\u7518\u9732", …], "statuses": ["\u5f85\u5236\u4f5c", "\u5236\u4f5c\u4e2d", "\u5df2\u5b8c\u6210", "\u5df2\u53d6\u9910"]}<\/p>\n

                                                                          event: orders
                                                                          \ndata: {"time": "…", "orders": [{…}, {…}]}<\/p>\n

                                                                          event: orders
                                                                          \ndata: {"time": "…", "orders": [{…}, {…}]}
                                                                          \n…<\/p>\n

                                                                          \u6bcf 0.8 \u79d2\u4e00\u5e27 orders，\u6309 Ctrl+C \u9000\u51fa\u3002<\/p>\n

                                                                          3.6 \u5c0f\u7ed3<\/h3>\n\n\u8981\u70b9\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n
                                                                          \u534f\u8bae<\/td>\nHTTP + text\/event-stream<\/td>\n<\/tr>\n
                                                                          \u65b9\u5411<\/td>\n\u670d\u52a1\u5668 \u2192 \u6d4f\u89c8\u5668（\u5355\u5411）<\/td>\n<\/tr>\n
                                                                          \u6d4f\u89c8\u5668 API<\/td>\nnew EventSource(url)<\/td>\n<\/tr>\n
                                                                          \u91cd\u8fde<\/td>\n\u6d4f\u89c8\u5668\u81ea\u52a8\u91cd\u8fde<\/td>\n<\/tr>\n
                                                                          \u6bcf\u8fde\u63a5\u7f13\u51b2<\/td>\n\u4e00\u4e2a asyncio.Queue<\/td>\n<\/tr>\n
                                                                          \u5e27\u683c\u5f0f<\/td>\nevent: \/ data: \/ \u7a7a\u884c<\/td>\n<\/tr>\n
                                                                          \u9632\u6cc4\u6f0f<\/td>\nfinally \u91cc discard<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                                                                          \n

                                                                          \u4e0b\u4e00\u7ae0 \u2192 04-WebSocket\u6a21\u5757-ws.md：\u7528 WebSocket \u5b9e\u73b0\u53cc\u5411\u901a\u9053，\u8ba9\u524d\u7aef\u80fd\u53d1\u547d\u4ee4\u3002<\/p>\n

                                                                          \n

                                                                          \u7b2c 4 \u7ae0 \u00b7 WebSocket \u6a21\u5757 ws.py<\/h2>\n

                                                                          \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                          \u5b9e\u73b0\u9879\u76ee\u7684\u7b2c\u4e8c\u4e2a\u4f20\u8f93\u6a21\u5757\u2014\u2014WebSocket（\u53cc\u5411\u901a\u9053）\u3002\u548c SSE \u7684\u300c\u53ea\u63a8\u4e0d\u6536\u300d\u4e0d\u540c，WebSocket \u8ba9\u524d\u7aef\u80fd\u4e3b\u52a8\u53d1\u547d\u4ee4，\u670d\u52a1\u5668\u7ed9\u660e\u786e\u56de\u6267\u3002\u5b66\u5b8c\u672c\u7ae0\u4f60\u5c06\u7406\u89e3：<\/p>\n

                                                                            \n
                                                                          • WebSocket \u5728 FastAPI \u91cc\u7684\u5199\u6cd5（@router.websocket\u3001accept\u3001receive_text\u3001send_text）；<\/li>\n
                                                                          • \u547d\u4ee4\u5206\u53d1\u6a21\u5f0f：cmd + arg，\u6bcf\u79cd\u547d\u4ee4\u4e00\u4e2a\u5206\u652f，\u6bcf\u6761\u547d\u4ee4\u90fd\u6709\u56de\u6267；<\/li>\n
                                                                          • \u7528 TypedDict \u7ed9\u6bcf\u79cd\u6d88\u606f\u5b9a\u4e49\u7c7b\u578b，\u524d\u7aef\u540e\u7aef\u7ea6\u5b9a\u6e05\u6670；<\/li>\n
                                                                          • WebSocketDisconnect \u5f02\u5e38 + finally \u6e05\u7406\u8fde\u63a5，\u9632\u6cc4\u6f0f\u3002<\/li>\n<\/ul>\n
                                                                            \n

                                                                            4.1 \u5148\u7406\u89e3 WebSocket \u662f\u4ec0\u4e48<\/h3>\n

                                                                            WebSocket \u662f HTML5 \u7684\u5168\u53cc\u5de5\u534f\u8bae：<\/p>\n

                                                                              \n
                                                                            • \u63e1\u624b\u9636\u6bb5\u7528 HTTP，\u4e4b\u540e\u300c\u5347\u7ea7\u300d\u6210 ws:\/\/，\u8fde\u63a5\u4fdd\u6301，\u53cc\u65b9\u53ef\u968f\u65f6\u4e92\u53d1\u6d88\u606f；<\/li>\n
                                                                            • \u6d4f\u89c8\u5668\u7528 new WebSocket(url) \u8fde\u63a5（\u4e0d\u81ea\u52a8\u91cd\u8fde，\u65ad\u4e86\u8981\u81ea\u5df1\u91cd\u8fde，\u7b2c 7 \u7ae0\u524d\u7aef\u4f1a\u5904\u7406）；<\/li>\n
                                                                            • \u9002\u5408\u6709\u4ea4\u4e92\u7684\u573a\u666f：\u804a\u5929\u3001\u534f\u4f5c\u7f16\u8f91\u3001\u6211\u4eec\u7684\u300c\u5e97\u5458\u64cd\u4f5c\u53f0\u300d（\u53d1\u547d\u4ee4 + \u62ff\u56de\u6267）\u3002<\/li>\n<\/ul>\n

                                                                              \u672c\u9879\u76ee\u91cc WebSocket \u652f\u6301\u56db\u79cd\u547d\u4ee4：<\/p>\n\n\u547d\u4ee4\u542b\u4e49\u670d\u52a1\u5668\u56de\u6267<\/tr>\n\n\n\n\n\n
                                                                              ping<\/td>\n\u63a2\u6d3b，\u6d4b\u5ef6\u8fdf<\/td>\n{"type":"pong","time":"…"}<\/td>\n<\/tr>\n
                                                                              add<\/td>\n\u7acb\u523b\u52a0\u4e00\u676f\u968f\u673a\u8ba2\u5355<\/td>\n{"type":"added","order":{…}}<\/td>\n<\/tr>\n
                                                                              pickup<\/td>\n\u6309 id \u53d6\u9910（\u4ec5\u300c\u5df2\u5b8c\u6210\u300d\u53ef\u53d6）<\/td>\n{"type":"picked","order":{…}} \u6216 {"type":"error",…}<\/td>\n<\/tr>\n
                                                                              snapshot<\/td>\n\u62c9\u4e00\u6b21\u5f53\u524d\u5feb\u7167<\/td>\n{"type":"snapshot","time":"…","orders":[…]}<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                              4.2 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                                                                              \u65b0\u5efa\u6587\u4ef6 src\/ws.py，\u5b8c\u6574\u7167\u6284：<\/p>\n

                                                                              """\u6559\u5b66\u6a21\u5757 2: WebSocket \u53cc\u5411\u901a\u9053.<\/p>\n

                                                                              \u5173\u952e\u70b9
                                                                              \n——
                                                                              \n– \u5168\u53cc\u5de5: \u5ba2\u6237\u7aef\u548c\u670d\u52a1\u7aef\u90fd\u53ef\u4e3b\u52a8\u53d1\u9001\u6d88\u606f
                                                                              \n– \u63a5\u53d7\u8fde\u63a5\u540e\u52a0\u5165 ws_clients \u96c6\u5408, \u5e7f\u64ad\u5668\u7edf\u4e00\u63a8\u9001
                                                                              \n– \u63a5\u6536\u5ba2\u6237\u7aef\u547d\u4ee4: ping \/ add \/ pickup \/ snapshot, \u6bcf\u6761\u547d\u4ee4\u90fd\u6709\u660e\u786e\u56de\u6267
                                                                              \n– WebSocketDisconnect \u5f02\u5e38\u8868\u793a\u5ba2\u6237\u7aef\u4e3b\u52a8\u5173\u95ed, finally \u6e05\u7406\u8fde\u63a5
                                                                              \n"""<\/span><\/p>\n

                                                                              import<\/span> json
                                                                              \nfrom<\/span> datetime import<\/span> UTC,<\/span> datetime
                                                                              \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                                                                              from<\/span> fastapi import<\/span> APIRouter,<\/span> WebSocket,<\/span> WebSocketDisconnect<\/p>\n

                                                                              from<\/span> .<\/span>models import<\/span> MENU,<\/span> STATUSES,<\/span> Order,<\/span> Snapshot,<\/span> new_order,<\/span> orders,<\/span> snapshot<\/p>\n

                                                                              class<\/span> HelloMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n menu:<\/span> list<\/span>[<\/span>str<\/span>]<\/span>
                                                                              \n statuses:<\/span> list<\/span>[<\/span>str<\/span>]<\/span>
                                                                              \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                                                                              class<\/span> PongMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n time:<\/span> str<\/span><\/p>\n

                                                                              class<\/span> AddedMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n order:<\/span> Order<\/p>\n

                                                                              class<\/span> PickedMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n order:<\/span> Order<\/p>\n

                                                                              class<\/span> SnapshotMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n time:<\/span> str<\/span>
                                                                              \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                                                                              class<\/span> ErrorMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                              \n type<\/span>:<\/span> str<\/span>
                                                                              \n error:<\/span> str<\/span><\/p>\n

                                                                              router =<\/span> APIRouter(<\/span>)<\/span><\/p>\n

                                                                              # \u6240\u6709\u5df2\u8fde\u63a5\u7684 WebSocket \u5ba2\u6237\u7aef (\u7531 broadcaster \u5199\u5165)<\/span>
                                                                              \nws_clients:<\/span> set<\/span>[<\/span>WebSocket]<\/span> =<\/span> set<\/span>(<\/span>)<\/span><\/p>\n

                                                                              def<\/span> now_iso<\/span>(<\/span>)<\/span> –<\/span>><\/span> str<\/span>:<\/span>
                                                                              \n return<\/span> datetime.<\/span>now(<\/span>UTC)<\/span>.<\/span>isoformat(<\/span>)<\/span><\/p>\n

                                                                              @router.<\/span>websocket<\/span>(<\/span>"\/ws\/orders"<\/span>)<\/span>
                                                                              \nasync<\/span> def<\/span> ws_orders<\/span>(<\/span>ws:<\/span> WebSocket)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                              \n """\u5efa\u7acb WS \u8fde\u63a5, \u5904\u7406\u5ba2\u6237\u7aef\u547d\u4ee4."""<\/span>
                                                                              \n await<\/span> ws.<\/span>accept(<\/span>)<\/span>
                                                                              \n ws_clients.<\/span>add(<\/span>ws)<\/span><\/p>\n

                                                                              async<\/span> def<\/span> send<\/span>(<\/span>msg:<\/span> dict<\/span>[<\/span>str<\/span>,<\/span> object<\/span>]<\/span>)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                              \n await<\/span> ws.<\/span>send_text(<\/span>json.<\/span>dumps(<\/span>msg,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span>)<\/span><\/p>\n

                                                                              try<\/span>:<\/span>
                                                                              \n # \u63e1\u624b\u6210\u529f\u540e\u7acb\u5373\u53d1 hello, \u628a\u83dc\u5355\u548c\u5f53\u524d\u5feb\u7167\u7ed9\u5ba2\u6237\u7aef<\/span>
                                                                              \n await<\/span> send(<\/span>HelloMsg(<\/span>
                                                                              \n type<\/span>=<\/span>"hello"<\/span>,<\/span>
                                                                              \n menu=<\/span>[<\/span>m[<\/span>"name"<\/span>]<\/span> for<\/span> m in<\/span> MENU]<\/span>,<\/span>
                                                                              \n statuses=<\/span>STATUSES,<\/span>
                                                                              \n orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>,<\/span>
                                                                              \n )<\/span>)<\/span><\/p>\n

                                                                              # \u547d\u4ee4\u5206\u53d1<\/span>
                                                                              \n while<\/span> True<\/span>:<\/span>
                                                                              \n raw =<\/span> await<\/span> ws.<\/span>receive_text(<\/span>)<\/span>
                                                                              \n try<\/span>:<\/span>
                                                                              \n msg =<\/span> json.<\/span>loads(<\/span>raw)<\/span>
                                                                              \n except<\/span> json.<\/span>JSONDecodeError:<\/span>
                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>"invalid json"<\/span>)<\/span>)<\/span>
                                                                              \n continue<\/span><\/p>\n

                                                                              cmd =<\/span> str<\/span>(<\/span>msg.<\/span>get(<\/span>"cmd"<\/span>,<\/span> ""<\/span>)<\/span>)<\/span>.<\/span>lower(<\/span>)<\/span>
                                                                              \n arg =<\/span> msg.<\/span>get(<\/span>"arg"<\/span>)<\/span><\/p>\n

                                                                              if<\/span> cmd ==<\/span> "ping"<\/span>:<\/span>
                                                                              \n await<\/span> send(<\/span>PongMsg(<\/span>type<\/span>=<\/span>"pong"<\/span>,<\/span> time=<\/span>now_iso(<\/span>)<\/span>)<\/span>)<\/span>
                                                                              \n elif<\/span> cmd ==<\/span> "add"<\/span>:<\/span>
                                                                              \n o =<\/span> new_order(<\/span>)<\/span>
                                                                              \n orders[<\/span>o[<\/span>"id"<\/span>]<\/span>]<\/span> =<\/span> o
                                                                              \n await<\/span> send(<\/span>AddedMsg(<\/span>type<\/span>=<\/span>"added"<\/span>,<\/span> order=<\/span>o)<\/span>)<\/span>
                                                                              \n elif<\/span> cmd ==<\/span> "pickup"<\/span>:<\/span>
                                                                              \n try<\/span>:<\/span>
                                                                              \n oid =<\/span> int<\/span>(<\/span>arg)<\/span>
                                                                              \n except<\/span> (<\/span>TypeError,<\/span> ValueError)<\/span>:<\/span>
                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>"arg must be int order_id"<\/span>)<\/span>)<\/span>
                                                                              \n continue<\/span>
                                                                              \n o =<\/span> orders.<\/span>get(<\/span>oid)<\/span>
                                                                              \n if<\/span> not<\/span> o:<\/span>
                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"order <\/span>{<\/span>oid}<\/span><\/span> not found"<\/span><\/span>)<\/span>)<\/span>
                                                                              \n elif<\/span> o[<\/span>"status"<\/span>]<\/span> !=<\/span> "\u5df2\u5b8c\u6210"<\/span>:<\/span>
                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"order <\/span>{<\/span>oid}<\/span><\/span> not ready"<\/span><\/span>)<\/span>)<\/span>
                                                                              \n else<\/span>:<\/span>
                                                                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u53d6\u9910"<\/span>
                                                                              \n await<\/span> send(<\/span>PickedMsg(<\/span>type<\/span>=<\/span>"picked"<\/span>,<\/span> order=<\/span>o)<\/span>)<\/span>
                                                                              \n elif<\/span> cmd ==<\/span> "snapshot"<\/span>:<\/span>
                                                                              \n snap:<\/span> Snapshot =<\/span> snapshot(<\/span>)<\/span>
                                                                              \n await<\/span> send(<\/span>SnapshotMsg(<\/span>type<\/span>=<\/span>"snapshot"<\/span>,<\/span> time=<\/span>snap[<\/span>"time"<\/span>]<\/span>,<\/span> orders=<\/span>snap[<\/span>"orders"<\/span>]<\/span>)<\/span>)<\/span>
                                                                              \n else<\/span>:<\/span>
                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"unknown cmd: <\/span>{<\/span>cmd}<\/span><\/span>"<\/span><\/span>)<\/span>)<\/span>
                                                                              \n except<\/span> WebSocketDisconnect:<\/span>
                                                                              \n pass<\/span>
                                                                              \n finally<\/span>:<\/span>
                                                                              \n ws_clients.<\/span>discard(<\/span>ws)<\/span><\/p>\n

                                                                              \n

                                                                              4.3 \u9010\u6bb5\u8bb2\u89e3<\/h3>\n

                                                                              4.3.1 \u5bfc\u5165<\/h4>\n

                                                                              import<\/span> json
                                                                              \nfrom<\/span> datetime import<\/span> UTC,<\/span> datetime
                                                                              \nfrom<\/span> typing import<\/span> TypedDict<\/p>\n

                                                                              from<\/span> fastapi import<\/span> APIRouter,<\/span> WebSocket,<\/span> WebSocketDisconnect<\/p>\n

                                                                              from<\/span> .<\/span>models import<\/span> MENU,<\/span> STATUSES,<\/span> Order,<\/span> Snapshot,<\/span> new_order,<\/span> orders,<\/span> snapshot<\/p>\n

                                                                                \n
                                                                              • WebSocket：FastAPI \u7684 WebSocket \u8fde\u63a5\u5bf9\u8c61，\u51fd\u6570\u53c2\u6570\u6ce8\u89e3\u4e3a WebSocket \u65f6 FastAPI \u81ea\u52a8\u6ce8\u5165；<\/li>\n
                                                                              • WebSocketDisconnect：Starlette \u63d0\u4f9b\u7684\u5f02\u5e38，\u5ba2\u6237\u7aef\u4e3b\u52a8\u65ad\u5f00\u65f6 receive_text() \u4f1a\u629b\u5b83；<\/li>\n
                                                                              • \u4ece models \u5bfc\u5165\u4e00\u5806：\u83dc\u5355\u3001\u72b6\u6001\u3001\u8ba2\u5355\u7c7b\u578b\u3001new_order（\u52a0\u5355\u7528）\u3001orders（\u53d6\/\u6539\u8ba2\u5355\u7528）\u3001snapshot（\u62c9\u5feb\u7167\u7528）\u3002<\/li>\n<\/ul>\n

                                                                                4.3.2 \u6d88\u606f\u7c7b\u578b（\u524d\u7aef\/\u540e\u7aef\u7684\u5951\u7ea6）<\/h4>\n

                                                                                class<\/span> HelloMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n menu:<\/span> list<\/span>[<\/span>str<\/span>]<\/span>
                                                                                \n statuses:<\/span> list<\/span>[<\/span>str<\/span>]<\/span>
                                                                                \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                                                                                class<\/span> PongMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n time:<\/span> str<\/span><\/p>\n

                                                                                class<\/span> AddedMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n order:<\/span> Order<\/p>\n

                                                                                class<\/span> PickedMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n order:<\/span> Order<\/p>\n

                                                                                class<\/span> SnapshotMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n time:<\/span> str<\/span>
                                                                                \n orders:<\/span> list<\/span>[<\/span>Order]<\/span><\/p>\n

                                                                                class<\/span> ErrorMsg<\/span>(<\/span>TypedDict)<\/span>:<\/span>
                                                                                \n type<\/span>:<\/span> str<\/span>
                                                                                \n error:<\/span> str<\/span><\/p>\n

                                                                                  \n
                                                                                • \u6bcf\u79cd\u670d\u52a1\u5668\u2192\u5ba2\u6237\u7aef\u7684\u6d88\u606f\u90fd\u5b9a\u4e49\u4e00\u4e2a TypedDict，\u6240\u6709\u6d88\u606f\u90fd\u6709\u4e00\u4e2a type \u5b57\u6bb5\u8868\u793a\u6d88\u606f\u7c7b\u578b；<\/li>\n
                                                                                • \u8fd9\u662f WebSocket \u901a\u4fe1\u7684\u5e38\u89c1\u6a21\u5f0f：\u7528 type \u5b57\u6bb5\u505a\u6d88\u606f\u5206\u53d1，\u524d\u7aef ws.onmessage \u91cc switch(msg.type)；<\/li>\n
                                                                                • HelloMsg：\u63e1\u624b\u540e\u53d1\u7684\u6b22\u8fce\u6d88\u606f（\u83dc\u5355 + \u5f53\u524d\u6240\u6709\u8ba2\u5355）；<\/li>\n
                                                                                • PongMsg：ping \u7684\u56de\u6267；<\/li>\n
                                                                                • AddedMsg：add \u7684\u56de\u6267（\u65b0\u8ba2\u5355\u8be6\u60c5）；<\/li>\n
                                                                                • PickedMsg：pickup \u6210\u529f\u7684\u56de\u6267；<\/li>\n
                                                                                • SnapshotMsg：snapshot \u7684\u56de\u6267；<\/li>\n
                                                                                • ErrorMsg：\u4efb\u4f55\u9519\u8bef\u7684\u56de\u6267\u3002<\/li>\n<\/ul>\n

                                                                                  \u4e3a\u4ec0\u4e48\u7528 TypedDict \u800c\u4e0d\u662f dataclass \u6216 pydantic.BaseModel？\u56e0\u4e3a\u8fd9\u91cc\u6d88\u606f\u76f4\u63a5 json.dumps \u6210 dict，TypedDict \u96f6\u8fd0\u884c\u65f6\u5f00\u9500，\u7eaf\u7cb9\u662f\u7c7b\u578b\u63d0\u793a，\u6700\u8f7b\u91cf\u3002<\/p>\n

                                                                                  4.3.3 \u8def\u7531 + \u5ba2\u6237\u7aef\u96c6\u5408<\/h4>\n

                                                                                  router =<\/span> APIRouter(<\/span>)<\/span><\/p>\n

                                                                                  # \u6240\u6709\u5df2\u8fde\u63a5\u7684 WebSocket \u5ba2\u6237\u7aef (\u7531 broadcaster \u5199\u5165)<\/span>
                                                                                  \nws_clients:<\/span> set<\/span>[<\/span>WebSocket]<\/span> =<\/span> set<\/span>(<\/span>)<\/span><\/p>\n

                                                                                    \n
                                                                                  • \u548c SSE \u4e00\u6837\u7528 APIRouter；<\/li>\n
                                                                                  • ws_clients：\u6240\u6709\u5f53\u524d WS \u8fde\u63a5\u7684\u96c6\u5408\u3002\u5e7f\u64ad\u5668（\u7b2c 5 \u7ae0）\u4f1a\u904d\u5386\u5b83 send_text；<\/li>\n
                                                                                  • \u6ce8\u610f\u8fd9\u91cc\u5b58\u7684\u662f**WebSocket \u5bf9\u8c61\u672c\u8eab**，\u4e0d\u50cf SSE \u5b58 Queue\u3002\u56e0\u4e3a WebSocket \u539f\u751f\u652f\u6301\u5f02\u6b65 send_text，\u53ef\u4ee5\u76f4\u63a5\u53d1\u3002<\/li>\n<\/ul>\n

                                                                                    4.3.4 \u63a5\u53d7\u8fde\u63a5 + \u5185\u90e8 send \u8f85\u52a9<\/h4>\n

                                                                                    @router.<\/span>websocket<\/span>(<\/span>"\/ws\/orders"<\/span>)<\/span>
                                                                                    \nasync<\/span> def<\/span> ws_orders<\/span>(<\/span>ws:<\/span> WebSocket)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                                    \n """\u5efa\u7acb WS \u8fde\u63a5, \u5904\u7406\u5ba2\u6237\u7aef\u547d\u4ee4."""<\/span>
                                                                                    \n await<\/span> ws.<\/span>accept(<\/span>)<\/span>
                                                                                    \n ws_clients.<\/span>add(<\/span>ws)<\/span><\/p>\n

                                                                                    async<\/span> def<\/span> send<\/span>(<\/span>msg:<\/span> dict<\/span>[<\/span>str<\/span>,<\/span> object<\/span>]<\/span>)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                                    \n await<\/span> ws.<\/span>send_text(<\/span>json.<\/span>dumps(<\/span>msg,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span>)<\/span><\/p>\n

                                                                                      \n
                                                                                    • @router.websocket(…)：\u58f0\u660e\u8fd9\u662f\u4e00\u4e2a WebSocket \u8def\u7531（\u4e0d\u662f HTTP GET）；<\/li>\n
                                                                                    • await ws.accept()：\u5fc5\u987b\u5148 accept，\u5b8c\u6210 WebSocket \u63e1\u624b，\u4e4b\u540e\u624d\u80fd\u6536\u53d1；<\/li>\n
                                                                                    • ws_clients.add(ws)：\u52a0\u5165\u5e7f\u64ad\u96c6\u5408；<\/li>\n
                                                                                    • \u5185\u90e8 send \u8f85\u52a9\u51fd\u6570：\u628a dict \u5e8f\u5217\u5316\u6210 JSON \u5b57\u7b26\u4e32\u518d\u53d1\u3002\u540e\u9762\u6240\u6709\u547d\u4ee4\u56de\u6267\u90fd\u8c03\u5b83，\u907f\u514d\u91cd\u590d\u5199 json.dumps\u3002<\/li>\n<\/ul>\n

                                                                                      4.3.5 \u63e1\u624b hello<\/h4>\n

                                                                                      try<\/span>:<\/span>
                                                                                      \n # \u63e1\u624b\u6210\u529f\u540e\u7acb\u5373\u53d1 hello, \u628a\u83dc\u5355\u548c\u5f53\u524d\u5feb\u7167\u7ed9\u5ba2\u6237\u7aef<\/span>
                                                                                      \n await<\/span> send(<\/span>HelloMsg(<\/span>
                                                                                      \n type<\/span>=<\/span>"hello"<\/span>,<\/span>
                                                                                      \n menu=<\/span>[<\/span>m[<\/span>"name"<\/span>]<\/span> for<\/span> m in<\/span> MENU]<\/span>,<\/span>
                                                                                      \n statuses=<\/span>STATUSES,<\/span>
                                                                                      \n orders=<\/span>sorted<\/span>(<\/span>orders.<\/span>values(<\/span>)<\/span>,<\/span> key=<\/span>lambda<\/span> o:<\/span> –<\/span>o[<\/span>"id"<\/span>]<\/span>)<\/span>,<\/span>
                                                                                      \n )<\/span>)<\/span><\/p>\n

                                                                                        \n
                                                                                      • \u548c SSE \u4e00\u6837，\u8fde\u4e0a\u7acb\u523b\u53d1 hello，\u4f46 WS \u7684 hello \u591a\u5e26\u4e00\u4e2a orders：\u5f53\u524d\u6240\u6709\u8ba2\u5355\u3002\u8fd9\u6837\u524d\u7aef\u4e00\u8fde\u4e0a\u5c31\u80fd\u7acb\u523b\u6e32\u67d3\u64cd\u4f5c\u53f0\u7684\u8ba2\u5355\u5361\u7247，\u4e0d\u7528\u7b49\u4e0b\u4e00\u6b21\u5e7f\u64ad；<\/li>\n
                                                                                      • sorted(…, key=lambda o: -o["id"])：\u6309 id \u5012\u5e8f，\u6700\u65b0\u5728\u524d\u3002<\/li>\n<\/ul>\n

                                                                                        4.3.6 \u547d\u4ee4\u5206\u53d1\u5faa\u73af<\/h4>\n

                                                                                        # \u547d\u4ee4\u5206\u53d1<\/span>
                                                                                        \n while<\/span> True<\/span>:<\/span>
                                                                                        \n raw =<\/span> await<\/span> ws.<\/span>receive_text(<\/span>)<\/span>
                                                                                        \n try<\/span>:<\/span>
                                                                                        \n msg =<\/span> json.<\/span>loads(<\/span>raw)<\/span>
                                                                                        \n except<\/span> json.<\/span>JSONDecodeError:<\/span>
                                                                                        \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>"invalid json"<\/span>)<\/span>)<\/span>
                                                                                        \n continue<\/span><\/p>\n

                                                                                        cmd =<\/span> str<\/span>(<\/span>msg.<\/span>get(<\/span>"cmd"<\/span>,<\/span> ""<\/span>)<\/span>)<\/span>.<\/span>lower(<\/span>)<\/span>
                                                                                        \n arg =<\/span> msg.<\/span>get(<\/span>"arg"<\/span>)<\/span><\/p>\n

                                                                                          \n
                                                                                        • await ws.receive_text()：\u963b\u585e\u7b49\u5f85\u5ba2\u6237\u7aef\u53d1\u6765\u7684\u4e0b\u4e00\u6761\u6587\u672c\u6d88\u606f；<\/li>\n
                                                                                        • \u524d\u7aef\u53d1\u7684\u683c\u5f0f\u7ea6\u5b9a\u4e3a JSON：{"cmd": "add"} \u6216 {"cmd": "pickup", "arg": 3}；<\/li>\n
                                                                                        • json.loads \u89e3\u6790，\u5931\u8d25\u5c31\u56de error: invalid json，continue \u7ee7\u7eed\u7b49\u4e0b\u4e00\u6761；<\/li>\n
                                                                                        • cmd \u53d6\u5c0f\u5199；arg \u662f\u53ef\u9009\u53c2\u6570（pickup \u9700\u8981）\u3002<\/li>\n<\/ul>\n

                                                                                          4.3.7 \u56db\u4e2a\u547d\u4ee4\u5206\u652f<\/h4>\n

                                                                                          if<\/span> cmd ==<\/span> "ping"<\/span>:<\/span>
                                                                                          \n await<\/span> send(<\/span>PongMsg(<\/span>type<\/span>=<\/span>"pong"<\/span>,<\/span> time=<\/span>now_iso(<\/span>)<\/span>)<\/span>)<\/span><\/p>\n

                                                                                            \n
                                                                                          • ping：\u6700\u7b80\u5355，\u56de pong + \u5f53\u524d\u65f6\u95f4\u3002\u524d\u7aef\u7528\u6765\u6d4b\u5f80\u8fd4\u5ef6\u8fdf\u3002<\/li>\n<\/ul>\n

                                                                                            elif<\/span> cmd ==<\/span> "add"<\/span>:<\/span>
                                                                                            \n o =<\/span> new_order(<\/span>)<\/span>
                                                                                            \n orders[<\/span>o[<\/span>"id"<\/span>]<\/span>]<\/span> =<\/span> o
                                                                                            \n await<\/span> send(<\/span>AddedMsg(<\/span>type<\/span>=<\/span>"added"<\/span>,<\/span> order=<\/span>o)<\/span>)<\/span><\/p>\n

                                                                                              \n
                                                                                            • add：\u8c03 new_order() \u751f\u6210\u4e00\u676f\u968f\u673a\u8ba2\u5355，\u5b58\u8fdb orders，\u56de added + \u65b0\u8ba2\u5355\u8be6\u60c5\u3002\u524d\u7aef\u62ff\u5230\u540e\u53ef\u4ee5\u9ad8\u4eae\u663e\u793a\u65b0\u8ba2\u5355\u3002<\/li>\n<\/ul>\n

                                                                                              elif<\/span> cmd ==<\/span> "pickup"<\/span>:<\/span>
                                                                                              \n try<\/span>:<\/span>
                                                                                              \n oid =<\/span> int<\/span>(<\/span>arg)<\/span>
                                                                                              \n except<\/span> (<\/span>TypeError,<\/span> ValueError)<\/span>:<\/span>
                                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>"arg must be int order_id"<\/span>)<\/span>)<\/span>
                                                                                              \n continue<\/span>
                                                                                              \n o =<\/span> orders.<\/span>get(<\/span>oid)<\/span>
                                                                                              \n if<\/span> not<\/span> o:<\/span>
                                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"order <\/span>{<\/span>oid}<\/span><\/span> not found"<\/span><\/span>)<\/span>)<\/span>
                                                                                              \n elif<\/span> o[<\/span>"status"<\/span>]<\/span> !=<\/span> "\u5df2\u5b8c\u6210"<\/span>:<\/span>
                                                                                              \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"order <\/span>{<\/span>oid}<\/span><\/span> not ready"<\/span><\/span>)<\/span>)<\/span>
                                                                                              \n else<\/span>:<\/span>
                                                                                              \n o[<\/span>"status"<\/span>]<\/span> =<\/span> "\u5df2\u53d6\u9910"<\/span>
                                                                                              \n await<\/span> send(<\/span>PickedMsg(<\/span>type<\/span>=<\/span>"picked"<\/span>,<\/span> order=<\/span>o)<\/span>)<\/span><\/p>\n

                                                                                                \n
                                                                                              • pickup \u6700\u590d\u6742，\u8981\u5e26 arg（\u8ba2\u5355 id）：\n
                                                                                              • \u5148\u628a arg \u8f6c\u6210 int，\u5931\u8d25\u56de\u9519（arg must be int order_id）；<\/li>\n
                                                                                              • \u67e5\u8ba2\u5355\u5b58\u4e0d\u5b58\u5728，\u4e0d\u5b58\u5728\u56de\u9519；<\/li>\n
                                                                                              • \u53ea\u6709 \u5df2\u5b8c\u6210 \u7684\u8ba2\u5355\u80fd\u53d6\u9910，\u5236\u4f5c\u4e2d \u4e0d\u884c（\u56de not ready）；<\/li>\n
                                                                                              • \u6ee1\u8db3\u6761\u4ef6\u5c31\u6539\u6210 \u5df2\u53d6\u9910，\u56de picked + \u66f4\u65b0\u540e\u7684\u8ba2\u5355\u3002<\/li>\n<\/li>\n
                                                                                              • \u8fd9\u79cd\u300c\u6821\u9a8c \u2192 \u64cd\u4f5c \u2192 \u56de\u6267\u300d\u4e09\u6bb5\u5f0f\u662f\u547d\u4ee4\u5904\u7406\u7684\u901a\u7528\u6a21\u5f0f\u3002<\/li>\n<\/ul>\n

                                                                                                elif<\/span> cmd ==<\/span> "snapshot"<\/span>:<\/span>
                                                                                                \n snap:<\/span> Snapshot =<\/span> snapshot(<\/span>)<\/span>
                                                                                                \n await<\/span> send(<\/span>SnapshotMsg(<\/span>type<\/span>=<\/span>"snapshot"<\/span>,<\/span> time=<\/span>snap[<\/span>"time"<\/span>]<\/span>,<\/span> orders=<\/span>snap[<\/span>"orders"<\/span>]<\/span>)<\/span>)<\/span><\/p>\n

                                                                                                  \n
                                                                                                • snapshot：\u8c03 models.snapshot()（\u4e0d\u6539\u53d8\u72b6\u6001）\u62ff\u5f53\u524d\u5feb\u7167，\u56de snapshot + \u65f6\u95f4 + \u6240\u6709\u8ba2\u5355\u3002\u524d\u7aef\u60f3\u968f\u65f6\u5237\u65b0\u7528\u3002<\/li>\n<\/ul>\n

                                                                                                  else<\/span>:<\/span>
                                                                                                  \n await<\/span> send(<\/span>ErrorMsg(<\/span>type<\/span>=<\/span>"error"<\/span>,<\/span> error=<\/span>f"unknown cmd: <\/span>{<\/span>cmd}<\/span><\/span>"<\/span><\/span>)<\/span>)<\/span><\/p>\n

                                                                                                    \n
                                                                                                  • \u672a\u77e5\u547d\u4ee4：\u56de\u9519\u3002\u8fd9\u5f88\u91cd\u8981\u2014\u2014\u524d\u7aef\u8c03\u8bd5\u65f6\u6253\u9519\u547d\u4ee4\u80fd\u7acb\u523b\u770b\u5230\u53cd\u9988\u3002<\/li>\n<\/ul>\n

                                                                                                    4.3.8 \u65ad\u5f00\u5904\u7406<\/h4>\n

                                                                                                    except<\/span> WebSocketDisconnect:<\/span>
                                                                                                    \n pass<\/span>
                                                                                                    \n finally<\/span>:<\/span>
                                                                                                    \n ws_clients.<\/span>discard(<\/span>ws)<\/span><\/p>\n

                                                                                                      \n
                                                                                                    • WebSocketDisconnect：\u5ba2\u6237\u7aef\u4e3b\u52a8\u5173\u8fde\u63a5\u65f6，receive_text() \u629b\u8fd9\u4e2a\u5f02\u5e38\u3002\u6211\u4eec pass（\u4e0d\u5f53\u4f5c\u9519\u8bef）；<\/li>\n
                                                                                                    • finally：\u65e0\u8bba\u6b63\u5e38\u9000\u51fa\u8fd8\u662f\u5f02\u5e38，\u90fd\u628a\u81ea\u5df1\u4ece ws_clients \u79fb\u9664\u3002\u548c SSE \u7684 finally discard \u4e00\u6837，\u9632\u5185\u5b58\u6cc4\u6f0f\u2014\u2014\u5426\u5219\u5e7f\u64ad\u5668\u4f1a\u4e00\u76f4\u5f80\u65ad\u5f00\u7684\u8fde\u63a5\u53d1，send_text \u629b\u5f02\u5e38\u8fd8\u5f97\u5904\u7406\u3002<\/li>\n<\/ul>\n

                                                                                                      \u5bf9\u6bd4 SSE：SSE \u65ad\u5f00\u4f1a\u8ba9 yield \u629b GeneratorExit；WS \u65ad\u5f00\u8ba9 receive_text \u629b WebSocketDisconnect\u3002\u5904\u7406\u4f4d\u7f6e\u4e0d\u540c，\u4f46\u76ee\u7684\u4e00\u6837\u2014\u2014\u6e05\u7406\u8ba2\u9605\u3002<\/p>\n

                                                                                                      \n

                                                                                                      4.4 \u6570\u636e\u6d41\u56de\u987e<\/h3>\n

                                                                                                      \u6d4f\u89c8\u5668 new WebSocket('ws:\/\/…')
                                                                                                      \n \u2502 \u63e1\u624b\u5347\u7ea7
                                                                                                      \n \u25bc
                                                                                                      \nws_orders() \u2192 accept \u2192 \u52a0\u5165 ws_clients \u2192 \u53d1 hello(\u542b\u5f53\u524d\u8ba2\u5355)
                                                                                                      \n \u2502
                                                                                                      \n \u2502 \u5faa\u73af await receive_text():
                                                                                                      \n \u2502 {"cmd":"ping"} \u2192 \u56de {"type":"pong",…}
                                                                                                      \n \u2502 {"cmd":"add"} \u2192 new_order + \u56de {"type":"added",…}
                                                                                                      \n \u2502 {"cmd":"pickup","arg":3} \u2192 \u6539\u72b6\u6001 + \u56de {"type":"picked",…}
                                                                                                      \n \u2502 {"cmd":"snapshot"} \u2192 \u56de {"type":"snapshot",…}
                                                                                                      \n \u2502 \u975e\u6cd5\/\u672a\u77e5 \u2192 \u56de {"type":"error",…}
                                                                                                      \n \u2502
                                                                                                      \n（\u65ad\u5f00\u65f6） WebSocketDisconnect \u2192 finally: ws_clients.discard(ws)<\/p>\n

                                                                                                      \u6b64\u5916，\u5e7f\u64ad\u5668（\u7b2c 5 \u7ae0）\u6bcf 0.8s \u4e5f\u4f1a\u904d\u5386 ws_clients \u7ed9\u6bcf\u4e2a\u8fde\u63a5 send_text(payload)\u2014\u2014\u90a3\u662f\u53e6\u4e00\u6761\u63a8\u9001\u7ebf，\u548c\u8fd9\u91cc\u7684\u547d\u4ee4\u56de\u6267\u7ebf\u5e76\u884c\u3002\u6240\u4ee5 WS \u5ba2\u6237\u7aef\u4f1a\u540c\u65f6\u6536\u5230：\u2460 \u81ea\u5df1\u547d\u4ee4\u7684\u56de\u6267；\u2461 \u5e7f\u64ad\u5668\u63a8\u7684\u5168\u91cf\u8ba2\u5355\u66f4\u65b0\u3002<\/p>\n

                                                                                                      4.5 SSE vs WS \u5199\u6cd5\u5bf9\u6bd4（\u5148\u770b\u4e00\u773c，\u7b2c 9 \u7ae0\u7ec6\u8bb2）<\/h3>\n\n\u7ef4\u5ea6SSE（sse.py）WebSocket（ws.py）<\/tr>\n\n\n\n\n\n\n\n\n
                                                                                                      \u88c5\u9970\u5668<\/td>\n@router.get<\/td>\n@router.websocket<\/td>\n<\/tr>\n
                                                                                                      \u63e1\u624b<\/td>\n\u65e0\u9700 accept<\/td>\n\u5fc5\u987b await ws.accept()<\/td>\n<\/tr>\n
                                                                                                      \u53d1\u9001\u65b9\u5f0f<\/td>\nyield（\u5f02\u6b65\u751f\u6210\u5668）<\/td>\nawait ws.send_text(…)<\/td>\n<\/tr>\n
                                                                                                      \u63a5\u6536\u65b9\u5f0f<\/td>\n\u4e0d\u80fd\u63a5\u6536<\/td>\nawait ws.receive_text()<\/td>\n<\/tr>\n
                                                                                                      \u5ba2\u6237\u7aef\u96c6\u5408\u5b58\u4ec0\u4e48<\/td>\nQueue（\u7f13\u51b2）<\/td>\nWebSocket（\u76f4\u63a5\u53d1）<\/td>\n<\/tr>\n
                                                                                                      \u65ad\u5f00\u5f02\u5e38<\/td>\nGeneratorExit<\/td>\nWebSocketDisconnect<\/td>\n<\/tr>\n
                                                                                                      \u6d4f\u89c8\u5668 API<\/td>\nEventSource（\u81ea\u52a8\u91cd\u8fde）<\/td>\nWebSocket（\u624b\u52a8\u91cd\u8fde）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                      4.6 \u52a8\u624b\u9a8c\u8bc1（\u9700\u5199\u5b8c\u7b2c 6 \u7ae0\u5165\u53e3\u540e）<\/h3>\n

                                                                                                      WebSocket \u4e0d\u80fd\u7528 curl \u76f4\u63a5\u6d4b（\u9700\u8981 ws \u534f\u8bae\u63e1\u624b）\u3002\u5199\u5b8c\u7b2c 6 \u7ae0\u540e，\u6700\u7b80\u5355\u7684\u9a8c\u8bc1\u662f\u7528\u6d4f\u89c8\u5668\u63a7\u5236\u53f0：<\/p>\n

                                                                                                      \/\/ \u5728 http:\/\/127.0.0.1:8000\/ \u9875\u9762\u7684 F12 \u63a7\u5236\u53f0\u6267\u884c<\/span>
                                                                                                      \nconst<\/span> ws =<\/span> new<\/span> WebSocket<\/span>(<\/span>"ws:\/\/127.0.0.1:8000\/ws\/orders"<\/span>)<\/span>;<\/span>
                                                                                                      \nws.<\/span>onmessage<\/span> =<\/span> e<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>)<\/span>;<\/span>
                                                                                                      \nws.<\/span>onopen<\/span> =<\/span> (<\/span>)<\/span> =><\/span> ws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "ping"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ 2 \u79d2\u540e\u4f1a\u770b\u5230 {type:"pong"}<\/span>
                                                                                                      \n\/\/ \u7b49 2 \u79d2\u518d\u8bd5:<\/span>
                                                                                                      \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "add"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"added", order:{…}}<\/span>
                                                                                                      \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "snapshot"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"snapshot", …}<\/span><\/p>\n

                                                                                                      \u6216\u8005\u76f4\u63a5\u7528\u9879\u76ee\u81ea\u5e26\u7684\u9875\u9762（\u7b2c 7 \u7ae0），\u70b9\u53f3\u4fa7\u300c📡 ping \/ \u2795 \u52a0\u5355 \/ 📸 snapshot\u300d\u6309\u94ae，\u9ed1\u5e95\u65e5\u5fd7\u533a\u4f1a\u663e\u793a\u6536\u53d1\u6d88\u606f\u3002<\/p>\n

                                                                                                      \n

                                                                                                      \u4e0b\u4e00\u7ae0 \u2192 05-\u5e7f\u64ad\u5668-broadcaster.md：\u5199\u540e\u53f0\u5fc3\u8df3，\u628a\u6570\u636e\u540c\u65f6\u63a8\u7ed9 SSE \u548c WS \u4e24\u4e2a\u96c6\u5408\u3002<\/p>\n

                                                                                                      \n

                                                                                                      \u7b2c 5 \u7ae0 \u00b7 \u5e7f\u64ad\u5668 broadcaster.py<\/h2>\n

                                                                                                      \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                                                      \u5199\u4e00\u4e2a\u540e\u53f0\u534f\u7a0b\u300c\u5e7f\u64ad\u5668\u300d，\u5b83\u662f SSE \u548c WS \u5171\u4eab\u7684\u5fc3\u8df3\u6e90\u3002\u6bcf 0.8 \u79d2：<\/p>\n

                                                                                                    • \u8c03 models.advance() \u63a8\u8fdb\u6240\u6709\u8ba2\u5355，\u62ff\u5230\u5feb\u7167；<\/li>\n
                                                                                                    • \u628a\u5feb\u7167\u5e8f\u5217\u5316\u6210 JSON；<\/li>\n
                                                                                                    • \u540c\u65f6\u5206\u53d1\u7ed9\u6240\u6709 SSE \u5ba2\u6237\u7aef\u7684 Queue \u548c\u6240\u6709 WS \u5ba2\u6237\u7aef\u7684 WebSocket\u3002<\/li>\n

                                                                                                      \u5b66\u5b8c\u672c\u7ae0\u4f60\u5c06\u7406\u89e3：<\/p>\n

                                                                                                        \n
                                                                                                      • \u540e\u53f0\u4efb\u52a1\u4e3a\u4ec0\u4e48\u7528\u534f\u7a0b\u800c\u4e0d\u662f\u7ebf\u7a0b；<\/li>\n
                                                                                                      • asyncio.create_task + task.cancel() \u7684\u751f\u547d\u5468\u671f\u7ba1\u7406；<\/li>\n
                                                                                                      • \u4e3a\u4ec0\u4e48 SSE \u7528 queue.put\u3001WS \u7528 send_text \u4e24\u79cd\u4e0d\u540c\u5206\u53d1\u65b9\u5f0f；<\/li>\n
                                                                                                      • \u600e\u4e48\u505a\u5230\u300c\u4e00\u5904\u63a8\u8fdb，\u4e24\u8def\u5206\u53d1\u300d\u3002<\/li>\n<\/ul>\n
                                                                                                        \n

                                                                                                        5.1 \u4e3a\u4ec0\u4e48\u9700\u8981\u5e7f\u64ad\u5668？<\/h3>\n

                                                                                                        \u7b2c 3\u30014 \u7ae0\u5404\u81ea\u7ef4\u62a4\u4e86\u8ba2\u9605\u8005\u96c6\u5408（sse_clients \/ ws_clients），\u4f46\u5b83\u4eec\u81ea\u5df1\u4e0d\u77e5\u9053\u4f55\u65f6\u8be5\u63a8\u6570\u636e\u3002\u5982\u679c\u8ba9\u6bcf\u4e2a\u8fde\u63a5\u81ea\u5df1\u53bb\u8f6e\u8be2 advance()，\u4f1a\u6709\u4e24\u4e2a\u95ee\u9898：<\/p>\n

                                                                                                      • \u91cd\u590d\u63a8\u8fdb：\u6bcf\u4e2a\u8fde\u63a5\u90fd\u8c03 advance()，\u8ba2\u5355\u8fdb\u5ea6\u4f1a\u6309\u8fde\u63a5\u6570\u500d\u589e，\u72b6\u6001\u5168\u4e71；<\/li>\n
                                                                                                      • \u4e0d\u4e00\u81f4：\u4e0d\u540c\u8fde\u63a5\u62ff\u5230\u4e0d\u540c\u65f6\u523b\u7684\u5feb\u7167，\u770b\u677f\u5404\u4e0d\u76f8\u540c\u3002<\/li>\n

                                                                                                        \u6b63\u786e\u505a\u6cd5：\u53ea\u6709\u4e00\u4e2a\u65f6\u949f\u2014\u2014\u5e7f\u64ad\u5668\u3002\u5b83\u6bcf 0.8s \u8c03\u4e00\u6b21 advance()，\u628a\u7ed3\u679c\u540c\u65f6\u53d1\u7ed9\u6240\u6709\u8ba2\u9605\u8005\u3002\u6240\u6709\u8fde\u63a5\u770b\u5230\u7684\u662f\u540c\u4e00\u4efd\u6570\u636e\u3001\u540c\u4e00\u65f6\u523b\u7684\u66f4\u65b0\u3002<\/p>\n

                                                                                                        5.2 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                                                                                                        \u65b0\u5efa\u6587\u4ef6 src\/broadcaster.py，\u5b8c\u6574\u7167\u6284：<\/p>\n

                                                                                                        """
                                                                                                        \n\u540e\u53f0\u5e7f\u64ad\u4efb\u52a1: \u6bcf 0.8s \u63a8\u8fdb\u8ba2\u5355\u5e76\u5206\u53d1\u7ed9\u6240\u6709 SSE \/ WS \u5ba2\u6237\u7aef.<\/p>\n

                                                                                                        \u8fd9\u662f SSE \u4e0e WS \u5171\u4eab\u7684"\u5fc3\u8df3\u6e90". \u5404\u81ea\u7ef4\u62a4\u81ea\u5df1\u7684\u8ba2\u9605\u8005\u96c6\u5408,
                                                                                                        \n\u5e7f\u64ad\u5668\u53ea\u8d1f\u8d23: \u63a8\u8fdb\u72b6\u6001 -> \u7f16\u7801 JSON -> \u6295\u9012\u5230\u4e24\u4e2a\u96c6\u5408.
                                                                                                        \n"""<\/span><\/p>\n

                                                                                                        import<\/span> asyncio
                                                                                                        \nimport<\/span> json<\/p>\n

                                                                                                        from<\/span> .<\/span>models import<\/span> advance
                                                                                                        \nfrom<\/span> .<\/span>sse import<\/span> sse_clients
                                                                                                        \nfrom<\/span> .<\/span>ws import<\/span> ws_clients<\/p>\n

                                                                                                        async<\/span> def<\/span> broadcaster<\/span>(<\/span>interval:<\/span> float<\/span> =<\/span> 0.8<\/span>)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                                                        \n """\u6c38\u4e45\u5faa\u73af: \u63a8\u8fdb\u72b6\u6001\u5e76\u5e7f\u64ad; \u534f\u7a0b\u88ab\u53d6\u6d88\u65f6\u81ea\u52a8\u9000\u51fa."""<\/span>
                                                                                                        \n while<\/span> True<\/span>:<\/span>
                                                                                                        \n snapshot =<\/span> advance(<\/span>)<\/span>
                                                                                                        \n payload =<\/span> json.<\/span>dumps(<\/span>snapshot,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span><\/p>\n

                                                                                                        # SSE: \u6bcf\u4e2a\u8ba2\u9605\u8005\u4e00\u4efd Queue, \u4e3b\u7ebf\u7a0b\u975e\u963b\u585e\u5730\u585e\u5165\u65b0\u4e8b\u4ef6<\/span>
                                                                                                        \n for<\/span> queue in<\/span> list<\/span>(<\/span>sse_clients)<\/span>:<\/span>
                                                                                                        \n await<\/span> queue.<\/span>put(<\/span>{<\/span>"event"<\/span>:<\/span> "orders"<\/span>,<\/span> "data"<\/span>:<\/span> payload}<\/span>)<\/span><\/p>\n

                                                                                                        # WS: \u76f4\u63a5 send_text, \u53d1\u9001\u5931\u8d25\u8bf4\u660e\u8fde\u63a5\u5df2\u65ad, \u4ece\u96c6\u5408\u79fb\u9664<\/span>
                                                                                                        \n for<\/span> ws in<\/span> list<\/span>(<\/span>ws_clients)<\/span>:<\/span>
                                                                                                        \n try<\/span>:<\/span>
                                                                                                        \n await<\/span> ws.<\/span>send_text(<\/span>payload)<\/span>
                                                                                                        \n except<\/span> Exception:<\/span>
                                                                                                        \n ws_clients.<\/span>discard(<\/span>ws)<\/span><\/p>\n

                                                                                                        await<\/span> asyncio.<\/span>sleep(<\/span>interval)<\/span><\/p>\n

                                                                                                        \n

                                                                                                        5.3 \u9010\u6bb5\u8bb2\u89e3<\/h3>\n

                                                                                                        5.3.1 \u5bfc\u5165<\/h4>\n

                                                                                                        import<\/span> asyncio
                                                                                                        \nimport<\/span> json<\/p>\n

                                                                                                        from<\/span> .<\/span>models import<\/span> advance
                                                                                                        \nfrom<\/span> .<\/span>sse import<\/span> sse_clients
                                                                                                        \nfrom<\/span> .<\/span>ws import<\/span> ws_clients<\/p>\n

                                                                                                          \n
                                                                                                        • advance：\u6bcf tick \u8c03\u4e00\u6b21，\u63a8\u8fdb\u8ba2\u5355\u72b6\u6001\u5e76\u8fd4\u56de\u5feb\u7167；<\/li>\n
                                                                                                        • sse_clients：\u4ece sse.py \u5bfc\u5165\u7684 Queue \u96c6\u5408；<\/li>\n
                                                                                                        • ws_clients：\u4ece ws.py \u5bfc\u5165\u7684 WebSocket \u96c6\u5408；<\/li>\n
                                                                                                        • \u6ce8\u610f broadcaster.py \u540c\u65f6\u4f9d\u8d56\u4e24\u4e2a\u4f20\u8f93\u6a21\u5757\u2014\u2014\u5b83\u662f\u628a\u4e24\u8005\u4e32\u8d77\u6765\u7684\u300c\u80f6\u6c34\u300d\u3002<\/li>\n<\/ul>\n

                                                                                                          5.3.2 \u4e3b\u5faa\u73af<\/h4>\n

                                                                                                          async<\/span> def<\/span> broadcaster<\/span>(<\/span>interval:<\/span> float<\/span> =<\/span> 0.8<\/span>)<\/span> –<\/span>><\/span> None<\/span>:<\/span>
                                                                                                          \n """\u6c38\u4e45\u5faa\u73af: \u63a8\u8fdb\u72b6\u6001\u5e76\u5e7f\u64ad; \u534f\u7a0b\u88ab\u53d6\u6d88\u65f6\u81ea\u52a8\u9000\u51fa."""<\/span>
                                                                                                          \n while<\/span> True<\/span>:<\/span>
                                                                                                          \n snapshot =<\/span> advance(<\/span>)<\/span>
                                                                                                          \n payload =<\/span> json.<\/span>dumps(<\/span>snapshot,<\/span> ensure_ascii=<\/span>False<\/span>)<\/span><\/p>\n

                                                                                                            \n
                                                                                                          • async def：\u534f\u7a0b\u3002\u56e0\u4e3a\u8981 await \u53d1\u9001\u64cd\u4f5c\u548c sleep；<\/li>\n
                                                                                                          • interval=0.8：\u9ed8\u8ba4 0.8 \u79d2\u4e00 tick\u3002\u8c03\u6162\u70b9（\u5982 2.0）\u80fd\u770b\u5f97\u66f4\u6e05\u695a，\u8c03\u5feb\u70b9（\u5982 0.3）\u66f4\u523a\u6fc0；<\/li>\n
                                                                                                          • while True：\u6c38\u4e45\u5faa\u73af，\u76f4\u5230\u88ab\u53d6\u6d88；<\/li>\n
                                                                                                          • advance()：\u540c\u6b65\u8c03\u7528（\u4e0d\u662f await），\u56e0\u4e3a\u5b83\u64cd\u4f5c\u7684\u662f\u666e\u901a dict，\u6ca1\u6709 IO；<\/li>\n
                                                                                                          • json.dumps(snapshot, ensure_ascii=False)：\u6574\u4e2a\u5feb\u7167\u5e8f\u5217\u5316\u6210\u5b57\u7b26\u4e32，\u7ed9 SSE \u548c WS \u5171\u7528\u4e00\u4efd（SSE \u628a\u5b83\u5305\u8fdb data:，WS \u76f4\u63a5\u53d1）\u3002<\/li>\n<\/ul>\n

                                                                                                            5.3.3 \u5206\u53d1\u7ed9 SSE：queue.put<\/h4>\n

                                                                                                            # SSE: \u6bcf\u4e2a\u8ba2\u9605\u8005\u4e00\u4efd Queue, \u4e3b\u7ebf\u7a0b\u975e\u963b\u585e\u5730\u585e\u5165\u65b0\u4e8b\u4ef6<\/span>
                                                                                                            \n for<\/span> queue in<\/span> list<\/span>(<\/span>sse_clients)<\/span>:<\/span>
                                                                                                            \n await<\/span> queue.<\/span>put(<\/span>{<\/span>"event"<\/span>:<\/span> "orders"<\/span>,<\/span> "data"<\/span>:<\/span> payload}<\/span>)<\/span><\/p>\n

                                                                                                              \n
                                                                                                            • \u904d\u5386\u6240\u6709 SSE \u5ba2\u6237\u7aef\u7684 Queue，\u628a {"event": "orders", "data": payload} \u585e\u8fdb\u53bb；<\/li>\n
                                                                                                            • list(sse_clients)：\u5148\u8f6c list \u518d\u904d\u5386\u2014\u2014\u9632\u6b62\u904d\u5386\u8fc7\u7a0b\u4e2d\u96c6\u5408\u88ab\u4fee\u6539（\u8fde\u63a5\u65ad\u5f00\u65f6 sse.py \u7684 finally \u4f1a discard，\u6539\u53d8\u96c6\u5408\u5927\u5c0f，\u76f4\u63a5\u904d\u5386 set \u4f1a\u629b RuntimeError: Set changed size during iteration）；<\/li>\n
                                                                                                            • await queue.put(…)：asyncio.Queue \u9ed8\u8ba4\u65e0\u754c，put \u51e0\u4e4e\u4e0d\u963b\u585e（\u9664\u975e\u8bbe\u7f6e\u4e86 maxsize）\u3002\u6240\u4ee5\u5e7f\u64ad\u5668\u4e0d\u4f1a\u56e0\u4e3a\u67d0\u4e2a SSE \u5ba2\u6237\u7aef\u8bfb\u5f97\u6162\u800c\u88ab\u5361\u4f4f\u2014\u2014\u4e8b\u4ef6\u4f1a\u5728\u90a3\u4e2a\u5ba2\u6237\u7aef\u7684 Queue \u91cc\u79ef\u538b，\u7b49\u5b83\u6162\u6162\u6d88\u8d39\u3002<\/li>\n<\/ul>\n

                                                                                                              \u8fd9\u5c31\u662f SSE \u7528 Queue \u7684\u6838\u5fc3\u597d\u5904：\u751f\u4ea7\u8005（\u5e7f\u64ad\u5668）\u548c\u6d88\u8d39\u8005（\u8fde\u63a5\u534f\u7a0b）\u89e3\u8026，\u4e92\u4e0d\u963b\u585e\u3002<\/p>\n

                                                                                                              5.3.4 \u5206\u53d1\u7ed9 WS：send_text + \u5f02\u5e38\u6e05\u7406<\/h4>\n

                                                                                                              # WS: \u76f4\u63a5 send_text, \u53d1\u9001\u5931\u8d25\u8bf4\u660e\u8fde\u63a5\u5df2\u65ad, \u4ece\u96c6\u5408\u79fb\u9664<\/span>
                                                                                                              \n for<\/span> ws in<\/span> list<\/span>(<\/span>ws_clients)<\/span>:<\/span>
                                                                                                              \n try<\/span>:<\/span>
                                                                                                              \n await<\/span> ws.<\/span>send_text(<\/span>payload)<\/span>
                                                                                                              \n except<\/span> Exception:<\/span>
                                                                                                              \n ws_clients.<\/span>discard(<\/span>ws)<\/span><\/p>\n

                                                                                                                \n
                                                                                                              • \u904d\u5386\u6240\u6709 WS \u8fde\u63a5，\u76f4\u63a5 await ws.send_text(payload)；<\/li>\n
                                                                                                              • \u540c\u6837 list(ws_clients) \u9632\u904d\u5386\u4e2d\u96c6\u5408\u53d8\u5316；<\/li>\n
                                                                                                              • try\/except：\u5982\u679c\u67d0\u4e2a WS \u5df2\u7ecf\u65ad\u4e86，send_text \u4f1a\u629b\u5f02\u5e38\u3002\u6211\u4eec\u6355\u83b7\u540e\u628a\u5b83\u4ece\u96c6\u5408\u79fb\u9664\u2014\u2014\u8fd9\u6837\u4e0b\u6b21\u5e7f\u64ad\u5c31\u4e0d\u4f1a\u518d\u5c1d\u8bd5\u7ed9\u5b83\u53d1；<\/li>\n
                                                                                                              • \u4e3a\u4ec0\u4e48 SSE \u4e0d\u7528 try\/except？\u56e0\u4e3a SSE \u662f\u5f80 Queue \u91cc\u585e，\u4e0d\u76f4\u63a5\u63a5\u89e6\u8fde\u63a5，\u8fde\u63a5\u65ad\u4e86 Queue \u8fd8\u5728（\u76f4\u5230 SSE \u534f\u7a0b\u7684 finally \u6e05\u7406）\u3002WS \u662f\u76f4\u63a5\u53d1，\u5fc5\u987b\u5f53\u573a\u5904\u7406\u5931\u8d25\u3002<\/li>\n<\/ul>\n

                                                                                                                \u4e24\u79cd\u5206\u53d1\u65b9\u5f0f\u7684\u5dee\u5f02，\u672c\u8d28\u662f\u300c\u7f13\u51b2 vs \u76f4\u53d1\u300d：SSE \u6709 Queue \u7f13\u51b2，WS \u65e0\u7f13\u51b2\u76f4\u53d1\u3002\u5404\u6709\u53d6\u820d：SSE \u5bb9\u9519\u597d\u4f46\u65ad\u8fde\u6e05\u7406\u9760\u534f\u7a0b\u81ea\u5df1；WS \u5373\u65f6\u4f46\u5931\u8d25\u8981\u5f53\u573a\u5904\u7406\u3002<\/p>\n

                                                                                                                5.3.5 \u8282\u62cd<\/h4>\n

                                                                                                                await<\/span> asyncio.<\/span>sleep(<\/span>interval)<\/span><\/p>\n

                                                                                                                  \n
                                                                                                                • \u6bcf\u8f6e\u7ed3\u675f\u7761 interval \u79d2，\u63a7\u5236\u5fc3\u8df3\u9891\u7387；<\/li>\n
                                                                                                                • await asyncio.sleep \u4f1a\u8ba9\u51fa\u4e8b\u4ef6\u5faa\u73af，\u8ba9\u5176\u4ed6\u534f\u7a0b（\u5404\u8fde\u63a5\u7684\u6536\u53d1）\u6709\u673a\u4f1a\u8fd0\u884c；<\/li>\n
                                                                                                                • \u7528 sleep \u800c\u4e0d\u662f time.sleep：time.sleep \u4f1a\u963b\u585e\u6574\u4e2a\u4e8b\u4ef6\u5faa\u73af，\u6240\u6709\u8fde\u63a5\u90fd\u4f1a\u5361\u4f4f\u3002asyncio.sleep \u662f\u534f\u7a0b\u53cb\u597d\u7684\u3002<\/li>\n<\/ul>\n

                                                                                                                  5.4 \u5e7f\u64ad\u5668\u7684\u4e00\u751f（\u751f\u547d\u5468\u671f）<\/h3>\n

                                                                                                                  \u5e7f\u64ad\u5668\u4e0d\u662f\u81ea\u5df1\u542f\u52a8\u7684，\u5b83\u7531 app.py \u7684 lifespan \u5728\u5e94\u7528\u542f\u52a8\u65f6\u521b\u5efa：<\/p>\n

                                                                                                                  \u5e94\u7528\u542f\u52a8 (lifespan yield \u4e4b\u524d)
                                                                                                                  \n \u2502
                                                                                                                  \n \u251c\u2500 asyncio.create_task(broadcaster()) \u2190 \u542f\u52a8\u540e\u53f0\u534f\u7a0b
                                                                                                                  \n \u2502 \u2502
                                                                                                                  \n \u2502 \u2514\u2500 while True: advance() + \u5206\u53d1 + sleep \u2190 \u4e00\u76f4\u8dd1
                                                                                                                  \n \u2502
                                                                                                                  \n \u25bc (yield: \u5e94\u7528\u8fd0\u884c\u4e2d, \u5904\u7406\u8bf7\u6c42)
                                                                                                                  \n \u2502
                                                                                                                  \n\u5e94\u7528\u5173\u95ed (lifespan yield \u4e4b\u540e, finally)
                                                                                                                  \n \u2502
                                                                                                                  \n \u2514\u2500 task.cancel() \u2190 \u53d6\u6d88\u5e7f\u64ad\u5668\u534f\u7a0b
                                                                                                                  \n \u2502
                                                                                                                  \n \u2514\u2500 broadcaster \u7684 await \u70b9\u629b CancelledError, while True \u9000\u51fa<\/p>\n

                                                                                                                  task.cancel() \u4f1a\u8ba9\u5e7f\u64ad\u5668\u534f\u7a0b\u5728\u4e0b\u4e00\u6b21 await（queue.put \/ send_text \/ sleep）\u5904\u629b CancelledError，\u4ece\u800c\u8df3\u51fa while True\u3002\u5e7f\u64ad\u5668\u4e0d\u9700\u8981\u81ea\u5df1\u5199 try\/except CancelledError\u2014\u2014\u534f\u7a0b\u88ab\u53d6\u6d88\u662f\u6b63\u5e38\u9000\u51fa\u8def\u5f84\u3002<\/p>\n

                                                                                                                  5.5 \u6570\u636e\u6d41\u603b\u89c8（\u4e09\u4e2a\u6587\u4ef6\u8054\u52a8）<\/h3>\n

                                                                                                                  \u6bcf 0.8 \u79d2:
                                                                                                                  \n broadcaster.py
                                                                                                                  \n \u2502
                                                                                                                  \n \u251c\u2500 advance() \u2192 models.py \u63a8\u8fdb\u8ba2\u5355, \u8fd4\u56de Snapshot
                                                                                                                  \n \u2502
                                                                                                                  \n \u251c\u2500 json.dumps(snapshot) \u2192 payload \u5b57\u7b26\u4e32
                                                                                                                  \n \u2502
                                                                                                                  \n \u251c\u2500 for queue in sse_clients: queue.put({"event":"orders","data":payload})
                                                                                                                  \n \u2502 \u2502
                                                                                                                  \n \u2502 \u2514\u2500 sse.py \u5404 event_stream() \u7684 await queue.get() \u53d6\u51fa
                                                                                                                  \n \u2502 \u2192 yield "event: orders\\\\ndata: payload\\\\n\\\\n" \u2192 \u6d4f\u89c8\u5668
                                                                                                                  \n \u2502
                                                                                                                  \n \u2514\u2500 for ws in ws_clients: await ws.send_text(payload)
                                                                                                                  \n \u2502
                                                                                                                  \n \u2514\u2500 \u6d4f\u89c8\u5668 ws.onmessage \u6536\u5230 JSON, \u6309 type \u5206\u53d1(\u4f46\u5e7f\u64ad\u6ca1 type,\u524d\u7aef\u5f53 orders \u7528)<\/p>\n

                                                                                                                  \u6ce8\u610f：\u5e7f\u64ad\u5668\u63a8\u7ed9 WS \u7684 payload \u662f\u7eaf\u5feb\u7167 JSON（{"time":…,"orders":[…]}），\u6ca1\u6709 type \u5b57\u6bb5\u3002\u524d\u7aef\u7684 ws.onmessage \u4f1a\u5224\u65ad：\u5982\u679c\u6d88\u606f\u6ca1\u6709 type \u6216\u8005 type \u4e0d\u5728\u5df2\u77e5\u5217\u8868\u91cc，\u5c31\u5f53\u4f5c\u300c\u8ba2\u5355\u66f4\u65b0\u300d\u5904\u7406（\u8be6\u89c1\u7b2c 7 \u7ae0\u524d\u7aef）\u3002\u8fd9\u662f\u9879\u76ee\u7684\u4e00\u4e2a\u5c0f\u7ea6\u5b9a\u3002<\/p>\n

                                                                                                                  5.6 \u52a8\u624b\u9a8c\u8bc1（\u9700\u5199\u5b8c\u7b2c 6 \u7ae0）<\/h3>\n

                                                                                                                  \u5199\u5b8c app.py \u540e\u542f\u52a8\u670d\u52a1，\u4f60\u4f1a\u770b\u5230：<\/p>\n

                                                                                                                    \n
                                                                                                                  • \u6d4f\u89c8\u5668\u770b\u677f\u6bcf 0.8 \u79d2\u5237\u65b0\u4e00\u6b21（\u8ba2\u5355\u8fdb\u5ea6\u6761\u5728\u6da8\u3001\u72b6\u6001\u5728\u53d8）；<\/li>\n
                                                                                                                  • \u7ec8\u7aef\u65e5\u5fd7\u91cc uvicorn \u4f1a\u6301\u7eed\u6253\u5370 INFO: … \u7684\u8fde\u63a5\u4fe1\u606f，\u4f46\u4e0d\u4f1a\u6709\u5e7f\u64ad\u65e5\u5fd7（\u5e7f\u64ad\u5668\u4e0d print）；<\/li>\n
                                                                                                                  • \u5173\u95ed\u6d4f\u89c8\u5668，SSE\/WS \u534f\u7a0b\u7684 finally \u4f1a\u6e05\u7406 sse_clients\/ws_clients，\u5e7f\u64ad\u5668\u4e0b\u4e00\u8f6e\u904d\u5386\u7684\u96c6\u5408\u5c31\u5c11\u4e86\u4e00\u4e2a\u5143\u7d20，\u4e0d\u4f1a\u62a5\u9519\u3002<\/li>\n<\/ul>\n

                                                                                                                    5.7 \u5c0f\u7ed3<\/h3>\n\n\u8981\u70b9\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n
                                                                                                                    \u89d2\u8272<\/td>\nSSE \u548c WS \u5171\u4eab\u7684\u552f\u4e00\u5fc3\u8df3\u6e90<\/td>\n<\/tr>\n
                                                                                                                    \u5b9e\u73b0<\/td>\nasync def + while True + asyncio.sleep<\/td>\n<\/tr>\n
                                                                                                                    \u542f\u505c<\/td>\napp.py \u7684 lifespan \u7528 create_task \/ cancel<\/td>\n<\/tr>\n
                                                                                                                    SSE \u5206\u53d1<\/td>\nawait queue.put(…)，\u7f13\u51b2\u3001\u4e0d\u963b\u585e<\/td>\n<\/tr>\n
                                                                                                                    WS \u5206\u53d1<\/td>\nawait ws.send_text(…)，\u76f4\u53d1\u3001\u5931\u8d25\u5373\u6e05\u7406<\/td>\n<\/tr>\n
                                                                                                                    \u9632\u904d\u5386\u7a81\u53d8<\/td>\nlist(sse_clients) \/ list(ws_clients)<\/td>\n<\/tr>\n
                                                                                                                    \u9891\u7387<\/td>\ninterval=0.8 \u79d2\/\u6b21<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                                                                                                                    \n

                                                                                                                    \u4e0b\u4e00\u7ae0 \u2192 06-\u5e94\u7528\u5165\u53e3-app.md：\u5199 app.py，\u628a\u6570\u636e\u5c42\u3001\u4e24\u4e2a\u4f20\u8f93\u6a21\u5757\u3001\u5e7f\u64ad\u5668\u3001\u9759\u6001\u9875\u9762\u7ec4\u88c5\u6210\u4e00\u4e2a\u5b8c\u6574\u7684 FastAPI \u5e94\u7528\u3002<\/p>\n

                                                                                                                    \n

                                                                                                                    \u7b2c 6 \u7ae0 \u00b7 \u5e94\u7528\u5165\u53e3 app.py<\/h2>\n

                                                                                                                    \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                                                                    \u5199 src\/app.py，\u628a\u524d\u9762\u6240\u6709\u96f6\u4ef6\u7ec4\u88c5\u6210\u4e00\u4e2a\u80fd\u8dd1\u7684 FastAPI \u5e94\u7528\u3002\u5b66\u5b8c\u672c\u7ae0\u4f60\u5c06\u7406\u89e3：<\/p>\n

                                                                                                                      \n
                                                                                                                    • FastAPI \u7684 lifespan（\u751f\u547d\u5468\u671f）\u673a\u5236：\u542f\u52a8\u65f6\u5e72\u4ec0\u4e48\u3001\u5173\u95ed\u65f6\u5e72\u4ec0\u4e48；<\/li>\n
                                                                                                                    • \u600e\u4e48\u7528 asyncio.create_task \u542f\u52a8\u540e\u53f0\u5e7f\u64ad\u5668，\u5173\u95ed\u65f6 cancel \u5b83；<\/li>\n
                                                                                                                    • CORS \u4e2d\u95f4\u4ef6\u4e3a\u4ec0\u4e48\u300c\u5168\u5f00\u300d；<\/li>\n
                                                                                                                    • \u600e\u4e48\u7528 include_router \u6302\u8f7d\u72ec\u7acb\u6a21\u5757\u7684\u8def\u7531；<\/li>\n
                                                                                                                    • \u600e\u4e48\u7528 StaticFiles \u6302\u8f7d\u9759\u6001\u76ee\u5f55\u3001\u7528 FileResponse \u6e32\u67d3\u9996\u9875\u3002<\/li>\n<\/ul>\n

                                                                                                                      \u5199\u5b8c\u8fd9\u4e00\u7ae0，\u540e\u7aef\u5c31\u5b8c\u6574\u4e86，\u53ef\u4ee5\u542f\u52a8\u9a8c\u8bc1\u3002<\/p>\n

                                                                                                                      \n

                                                                                                                      6.1 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                                                                                                                      \u65b0\u5efa\u6587\u4ef6 src\/app.py，\u5b8c\u6574\u7167\u6284：<\/p>\n

                                                                                                                      """fastapi-sse-ws \u5165\u53e3.<\/p>\n

                                                                                                                      – lifespan: \u542f\u52a8\u540e\u53f0\u5e7f\u64ad\u4efb\u52a1 (broadcaster.py)
                                                                                                                      \n– CORS: \u5168\u5f00
                                                                                                                      \n– \u8def\u7531: \/sse\/orders (sse.py)
                                                                                                                      \n \/ws\/orders (ws.py)
                                                                                                                      \n \/ -> static\/index.html
                                                                                                                      \n"""<\/span><\/p>\n

                                                                                                                      import<\/span> asyncio
                                                                                                                      \nfrom<\/span> collections.<\/span>abc import<\/span> AsyncGenerator
                                                                                                                      \nfrom<\/span> contextlib import<\/span> asynccontextmanager
                                                                                                                      \nfrom<\/span> pathlib import<\/span> Path<\/p>\n

                                                                                                                      import<\/span> uvicorn
                                                                                                                      \nfrom<\/span> fastapi import<\/span> FastAPI
                                                                                                                      \nfrom<\/span> fastapi.<\/span>middleware.<\/span>cors import<\/span> CORSMiddleware
                                                                                                                      \nfrom<\/span> fastapi.<\/span>responses import<\/span> FileResponse
                                                                                                                      \nfrom<\/span> fastapi.<\/span>staticfiles import<\/span> StaticFiles<\/p>\n

                                                                                                                      from<\/span> .<\/span> import<\/span> sse,<\/span> ws
                                                                                                                      \nfrom<\/span> .<\/span>broadcaster import<\/span> broadcaster<\/p>\n

                                                                                                                      @asynccontextmanager<\/span>
                                                                                                                      \nasync<\/span> def<\/span> lifespan<\/span>(<\/span>_<\/span>:<\/span> FastAPI)<\/span> –<\/span>><\/span> AsyncGenerator[<\/span>None<\/span>]<\/span>:<\/span>
                                                                                                                      \n """\u542f\u52a8\u540e\u53f0\u5e7f\u64ad\u4efb\u52a1, \u5173\u95ed\u65f6\u81ea\u52a8\u53d6\u6d88."""<\/span>
                                                                                                                      \n task =<\/span> asyncio.<\/span>create_task(<\/span>broadcaster(<\/span>)<\/span>)<\/span>
                                                                                                                      \n try<\/span>:<\/span>
                                                                                                                      \n yield<\/span>
                                                                                                                      \n finally<\/span>:<\/span>
                                                                                                                      \n task.<\/span>cancel(<\/span>)<\/span><\/p>\n

                                                                                                                      app =<\/span> FastAPI(<\/span>title=<\/span>"milk-tea-board"<\/span>,<\/span> version=<\/span>"0.1.0"<\/span>,<\/span> lifespan=<\/span>lifespan)<\/span><\/p>\n

                                                                                                                      # CORS \u5168\u5f00<\/span>
                                                                                                                      \napp.<\/span>add_middleware(<\/span>
                                                                                                                      \n CORSMiddleware,<\/span>
                                                                                                                      \n allow_origins=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                      \n allow_methods=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                      \n allow_headers=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                      \n allow_credentials=<\/span>True<\/span>,<\/span>
                                                                                                                      \n)<\/span><\/p>\n

                                                                                                                      # \u6302\u8f7d\u72ec\u7acb\u6a21\u5757\u8def\u7531<\/span>
                                                                                                                      \napp.<\/span>include_router(<\/span>sse.<\/span>router)<\/span>
                                                                                                                      \napp.<\/span>include_router(<\/span>ws.<\/span>router)<\/span><\/p>\n

                                                                                                                      # \u9759\u6001\u9875\u9762 (\u4f4d\u4e8e\u9879\u76ee\u6839 static\/)<\/span>
                                                                                                                      \nSTATIC_DIR =<\/span> Path(<\/span>__file__)<\/span>.<\/span>parent.<\/span>parent \/<\/span> "static"<\/span>
                                                                                                                      \napp.<\/span>mount(<\/span>"\/static"<\/span>,<\/span> StaticFiles(<\/span>directory=<\/span>STATIC_DIR)<\/span>,<\/span> name=<\/span>"static"<\/span>)<\/span><\/p>\n

                                                                                                                      @app.<\/span>get<\/span>(<\/span>"\/"<\/span>)<\/span>
                                                                                                                      \nasync<\/span> def<\/span> index<\/span>(<\/span>)<\/span> –<\/span>><\/span> FileResponse:<\/span>
                                                                                                                      \n """\u9996\u9875: \u6e32\u67d3 static\/index.html."""<\/span>
                                                                                                                      \n return<\/span> FileResponse(<\/span>STATIC_DIR \/<\/span> "index.html"<\/span>)<\/span><\/p>\n

                                                                                                                      if<\/span> __name__ ==<\/span> "__main__"<\/span>:<\/span>
                                                                                                                      \n uvicorn.<\/span>run(<\/span>"src.app:app"<\/span>,<\/span> host=<\/span>"127.0.0.1"<\/span>,<\/span> port=<\/span>8000<\/span>,<\/span> reload<\/span>=<\/span>True<\/span>)<\/span><\/p>\n

                                                                                                                      \n

                                                                                                                      6.2 \u9010\u6bb5\u8bb2\u89e3<\/h3>\n

                                                                                                                      6.2.1 \u5bfc\u5165<\/h4>\n

                                                                                                                      import<\/span> asyncio
                                                                                                                      \nfrom<\/span> collections.<\/span>abc import<\/span> AsyncGenerator
                                                                                                                      \nfrom<\/span> contextlib import<\/span> asynccontextmanager
                                                                                                                      \nfrom<\/span> pathlib import<\/span> Path<\/p>\n

                                                                                                                      import<\/span> uvicorn
                                                                                                                      \nfrom<\/span> fastapi import<\/span> FastAPI
                                                                                                                      \nfrom<\/span> fastapi.<\/span>middleware.<\/span>cors import<\/span> CORSMiddleware
                                                                                                                      \nfrom<\/span> fastapi.<\/span>responses import<\/span> FileResponse
                                                                                                                      \nfrom<\/span> fastapi.<\/span>staticfiles import<\/span> StaticFiles<\/p>\n

                                                                                                                      from<\/span> .<\/span> import<\/span> sse,<\/span> ws
                                                                                                                      \nfrom<\/span> .<\/span>broadcaster import<\/span> broadcaster<\/p>\n

                                                                                                                        \n
                                                                                                                      • asyncio：\u542f\u52a8\u540e\u53f0\u4efb\u52a1\u7528；<\/li>\n
                                                                                                                      • AsyncGenerator \/ asynccontextmanager：\u7ed9 lifespan \u6807\u6ce8\u7c7b\u578b\u548c\u88c5\u9970\u6210\u5f02\u6b65\u4e0a\u4e0b\u6587\u7ba1\u7406\u5668（\u4e0b\u9762\u8be6\u8ff0）；<\/li>\n
                                                                                                                      • Path：\u8de8\u5e73\u53f0\u62fc\u9759\u6001\u76ee\u5f55\u8def\u5f84；<\/li>\n
                                                                                                                      • uvicorn：\u5e95\u90e8 if __name__ \u7528\u5b83\u76f4\u63a5\u542f\u52a8；<\/li>\n
                                                                                                                      • FastAPI \/ CORSMiddleware \/ FileResponse \/ StaticFiles：FastAPI \u6838\u5fc3\u7ec4\u4ef6；<\/li>\n
                                                                                                                      • from . import sse, ws：\u5bfc\u5165\u4e24\u4e2a\u4f20\u8f93\u6a21\u5757（\u7528\u5230\u5b83\u4eec\u7684 router）；<\/li>\n
                                                                                                                      • from .broadcaster import broadcaster：\u5bfc\u5165\u5e7f\u64ad\u5668\u534f\u7a0b\u3002<\/li>\n<\/ul>\n

                                                                                                                        6.2.2 lifespan：\u751f\u547d\u5468\u671f\u7ba1\u7406<\/h4>\n

                                                                                                                        @asynccontextmanager<\/span>
                                                                                                                        \nasync<\/span> def<\/span> lifespan<\/span>(<\/span>_<\/span>:<\/span> FastAPI)<\/span> –<\/span>><\/span> AsyncGenerator[<\/span>None<\/span>]<\/span>:<\/span>
                                                                                                                        \n """\u542f\u52a8\u540e\u53f0\u5e7f\u64ad\u4efb\u52a1, \u5173\u95ed\u65f6\u81ea\u52a8\u53d6\u6d88."""<\/span>
                                                                                                                        \n task =<\/span> asyncio.<\/span>create_task(<\/span>broadcaster(<\/span>)<\/span>)<\/span>
                                                                                                                        \n try<\/span>:<\/span>
                                                                                                                        \n yield<\/span>
                                                                                                                        \n finally<\/span>:<\/span>
                                                                                                                        \n task.<\/span>cancel(<\/span>)<\/span><\/p>\n

                                                                                                                        \u8fd9\u662f\u672c\u7ae0\u6700\u5173\u952e\u7684\u4e00\u6bb5，\u6162\u6162\u770b：<\/p>\n

                                                                                                                          \n
                                                                                                                        • lifespan \u662f\u4ec0\u4e48：FastAPI（\u5e95\u5c42 Starlette）\u63d0\u4f9b\u7684\u4e00\u4e2a\u94a9\u5b50，\u8ba9\u4f60\u5728\u5e94\u7528\u542f\u52a8\u524d\u548c\u5173\u95ed\u540e\u5404\u6267\u884c\u4e00\u6bb5\u4ee3\u7801\u3002\u5b83\u662f\u4e00\u4e2a\u5f02\u6b65\u4e0a\u4e0b\u6587\u7ba1\u7406\u5668；<\/li>\n
                                                                                                                        • @asynccontextmanager：\u628a\u4e00\u4e2a\u5e26 yield \u7684 async def \u53d8\u6210\u5f02\u6b65\u4e0a\u4e0b\u6587\u7ba1\u7406\u5668\u3002yield \u4e4b\u524d = \u542f\u52a8\u903b\u8f91，yield \u4e4b\u540e = \u5173\u95ed\u903b\u8f91；<\/li>\n
                                                                                                                        • yield \u4e4b\u524d（\u542f\u52a8）：asyncio.create_task(broadcaster()) \u628a\u5e7f\u64ad\u5668\u534f\u7a0b\u8c03\u5ea6\u5230\u540e\u53f0\u8fd0\u884c，\u7acb\u523b\u8fd4\u56de\u4e00\u4e2a Task \u5bf9\u8c61\u3002\u6b64\u65f6\u5e7f\u64ad\u5668\u5df2\u7ecf\u5f00\u59cb while True \u5faa\u73af\u4e86；<\/li>\n
                                                                                                                        • yield：\u628a\u63a7\u5236\u6743\u4ea4\u8fd8\u7ed9 FastAPI，\u5e94\u7528\u5f00\u59cb\u63a5\u6536\u8bf7\u6c42\u3002\u5e7f\u64ad\u5668\u5728\u540e\u53f0\u6301\u7eed\u8dd1；<\/li>\n
                                                                                                                        • finally（\u5173\u95ed）：\u5e94\u7528\u6536\u5230\u5173\u95ed\u4fe1\u53f7（Ctrl+C \/ \u505c\u6b62）\u65f6，yield \u4e4b\u540e\u6267\u884c\u3002task.cancel() \u53d6\u6d88\u5e7f\u64ad\u5668\u534f\u7a0b，\u5b83\u4f1a\u5728\u4e0b\u4e00\u4e2a await \u70b9\u629b CancelledError \u800c\u9000\u51fa，\u4e0d\u4f1a\u6cc4\u6f0f\u3002<\/li>\n<\/ul>\n

                                                                                                                          _ \u53c2\u6570：lifespan \u51fd\u6570\u7b7e\u540d\u8981\u6c42\u63a5\u6536 FastAPI \u5b9e\u4f8b，\u4f46\u8fd9\u91cc\u7528\u4e0d\u5230，\u6309\u60ef\u4f8b\u547d\u540d _\u3002<\/p>\n

                                                                                                                            \n
                                                                                                                          • \u8fd4\u56de\u7c7b\u578b AsyncGenerator[None]：asynccontextmanager \u88c5\u9970\u540e\u7684\u51fd\u6570\u5b9e\u9645\u8fd4\u56de\u5f02\u6b65\u751f\u6210\u5668，None \u8868\u793a yield \u51fa\u53bb\u7684\u503c\u4e0d\u88ab\u4f7f\u7528\u3002<\/li>\n<\/ul>\n

                                                                                                                            6.2.3 \u521b\u5efa app + \u7ed1\u5b9a lifespan<\/h4>\n

                                                                                                                            app =<\/span> FastAPI(<\/span>title=<\/span>"milk-tea-board"<\/span>,<\/span> version=<\/span>"0.1.0"<\/span>,<\/span> lifespan=<\/span>lifespan)<\/span><\/p>\n

                                                                                                                              \n
                                                                                                                            • FastAPI(…)：\u521b\u5efa\u5e94\u7528\u5b9e\u4f8b；<\/li>\n
                                                                                                                            • title \/ version：\u4f1a\u663e\u793a\u5728\u81ea\u52a8\u751f\u6210\u7684 \/docs（Swagger UI）\u9875\u9762；<\/li>\n
                                                                                                                            • lifespan=lifespan：\u628a\u4e0a\u9762\u5b9a\u4e49\u7684 lifespan \u94a9\u5b50\u7ed1\u4e0a\u3002FastAPI \u4f1a\u5728\u542f\u52a8\/\u5173\u95ed\u65f6\u81ea\u52a8\u8c03\u7528\u5b83\u3002<\/li>\n<\/ul>\n

                                                                                                                              6.2.4 CORS \u4e2d\u95f4\u4ef6（\u5168\u5f00）<\/h4>\n

                                                                                                                              # CORS \u5168\u5f00<\/span>
                                                                                                                              \napp.<\/span>add_middleware(<\/span>
                                                                                                                              \n CORSMiddleware,<\/span>
                                                                                                                              \n allow_origins=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                              \n allow_methods=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                              \n allow_headers=<\/span>[<\/span>"*"<\/span>]<\/span>,<\/span>
                                                                                                                              \n allow_credentials=<\/span>True<\/span>,<\/span>
                                                                                                                              \n)<\/span><\/p>\n

                                                                                                                                \n
                                                                                                                              • CORS（\u8de8\u57df\u8d44\u6e90\u5171\u4eab）：\u6d4f\u89c8\u5668\u6709\u540c\u6e90\u7b56\u7565，\u9ed8\u8ba4\u7981\u6b62\u8de8\u57df\u8bf7\u6c42\u3002\u5982\u679c\u524d\u7aef\u4e0d\u5728 127.0.0.1:8000 \u800c\u5728\u522b\u5904（\u5982 localhost:5173 \u8dd1 Vue\/React \u5f00\u53d1\u670d\u52a1\u5668），\u5c31\u9700\u8981\u670d\u52a1\u5668\u5141\u8bb8\u8de8\u57df；<\/li>\n
                                                                                                                              • \u8fd9\u91cc\u5168\u5f00（\u6559\u5b66\u9879\u76ee）：\n
                                                                                                                                  \n
                                                                                                                                • allow_origins=["*"]：\u5141\u8bb8\u4efb\u4f55\u6765\u6e90；<\/li>\n
                                                                                                                                • allow_methods=["*"]：\u5141\u8bb8\u4efb\u4f55 HTTP \u65b9\u6cd5；<\/li>\n
                                                                                                                                • allow_headers=["*"]：\u5141\u8bb8\u4efb\u4f55\u8bf7\u6c42\u5934；<\/li>\n
                                                                                                                                • allow_credentials=True：\u5141\u8bb8\u5e26 cookie（\u672c\u9879\u76ee\u5176\u5b9e\u7528\u4e0d\u5230，\u4fdd\u7559）；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                • \u751f\u4ea7\u73af\u5883\u4e0d\u8981\u8fd9\u6837\u5168\u5f00，\u8981\u7cbe\u786e\u6307\u5b9a\u5141\u8bb8\u7684\u6e90\u3002<\/li>\n<\/ul>\n

                                                                                                                                  \u6ce8\u610f：allow_origins=["*"] + allow_credentials=True \u5728\u4e25\u683c\u6d4f\u89c8\u5668\u91cc\u5176\u5b9e\u6709\u51b2\u7a81（CORS \u89c4\u8303\u4e0d\u5141\u8bb8 * \u914d\u5408 credentials），\u4f46 FastAPI \u7684 CORS \u4e2d\u95f4\u4ef6\u4f1a\u81ea\u52a8\u5904\u7406，\u6559\u5b66\u573a\u666f\u6ca1\u95ee\u9898\u3002<\/p>\n

                                                                                                                                  6.2.5 \u6302\u8f7d\u8def\u7531<\/h4>\n

                                                                                                                                  # \u6302\u8f7d\u72ec\u7acb\u6a21\u5757\u8def\u7531<\/span>
                                                                                                                                  \napp.<\/span>include_router(<\/span>sse.<\/span>router)<\/span>
                                                                                                                                  \napp.<\/span>include_router(<\/span>ws.<\/span>router)<\/span><\/p>\n

                                                                                                                                    \n
                                                                                                                                  • include_router：\u628a sse.py \u548c ws.py \u91cc APIRouter \u4e0a\u5b9a\u4e49\u7684\u8def\u7531（\/sse\/orders\u3001\/ws\/orders）\u6ce8\u518c\u5230\u4e3b app；<\/li>\n
                                                                                                                                  • \u8fd9\u6837\u6bcf\u4e2a\u6a21\u5757\u81ea\u5df1\u7ba1\u81ea\u5df1\u7684\u8def\u7531，app.py \u53ea\u8d1f\u8d23\u7ec4\u88c5，\u804c\u8d23\u6e05\u6670；<\/li>\n
                                                                                                                                  • \u5982\u679c\u540e\u9762\u8981\u52a0\u65b0\u6a21\u5757（\u5982 \/api\/v2\/…），\u518d\u5199\u4e00\u4e2a xxx.py \u5b9a\u4e49 router，\u8fd9\u91cc include_router \u5373\u53ef\u3002<\/li>\n<\/ul>\n

                                                                                                                                    6.2.6 \u9759\u6001\u8d44\u6e90\u6302\u8f7d<\/h4>\n

                                                                                                                                    # \u9759\u6001\u9875\u9762 (\u4f4d\u4e8e\u9879\u76ee\u6839 static\/)<\/span>
                                                                                                                                    \nSTATIC_DIR =<\/span> Path(<\/span>__file__)<\/span>.<\/span>parent.<\/span>parent \/<\/span> "static"<\/span>
                                                                                                                                    \napp.<\/span>mount(<\/span>"\/static"<\/span>,<\/span> StaticFiles(<\/span>directory=<\/span>STATIC_DIR)<\/span>,<\/span> name=<\/span>"static"<\/span>)<\/span><\/p>\n

                                                                                                                                      \n
                                                                                                                                    • Path(__file__)：app.py \u81ea\u5df1\u7684\u8def\u5f84，\u5373 src\/app.py；<\/li>\n
                                                                                                                                    • .parent.parent：\u4e0a\u4e00\u7ea7\u4e0a\u4e00\u7ea7 = \u9879\u76ee\u6839\u76ee\u5f55；<\/li>\n
                                                                                                                                    • \/ "static"：\u62fc\u51fa \u9879\u76ee\u6839\/static，\u8de8\u5e73\u53f0（Windows \u7528 \\\\ \u4e5f\u80fd\u6b63\u786e\u5904\u7406）；<\/li>\n
                                                                                                                                    • app.mount("\/static", StaticFiles(directory=STATIC_DIR), …)：\u628a static\/ \u76ee\u5f55\u6302\u5230 \/static\/ URL \u8def\u5f84\u4e0b\u3002\u6d4f\u89c8\u5668\u8bbf\u95ee \/static\/index.html \u5c31\u80fd\u62ff\u5230\u6587\u4ef6\u3002\u524d\u7aef\u9875\u9762\u91cc\u5982\u679c\u6709 <img src="\/static\/x.png"> \u5c31\u4f1a\u4ece\u8fd9\u91cc\u627e；<\/li>\n
                                                                                                                                    • name="static"：\u7ed9\u8fd9\u4e2a\u6302\u8f7d\u70b9\u8d77\u4e2a\u540d，\u65b9\u4fbf\u53cd\u5411\u5f15\u7528\u3002<\/li>\n<\/ul>\n

                                                                                                                                      6.2.7 \u9996\u9875\u8def\u7531<\/h4>\n

                                                                                                                                      @app.<\/span>get<\/span>(<\/span>"\/"<\/span>)<\/span>
                                                                                                                                      \nasync<\/span> def<\/span> index<\/span>(<\/span>)<\/span> –<\/span>><\/span> FileResponse:<\/span>
                                                                                                                                      \n """\u9996\u9875: \u6e32\u67d3 static\/index.html."""<\/span>
                                                                                                                                      \n return<\/span> FileResponse(<\/span>STATIC_DIR \/<\/span> "index.html"<\/span>)<\/span><\/p>\n

                                                                                                                                        \n
                                                                                                                                      • \u8bbf\u95ee\u6839\u8def\u5f84 \/ \u65f6，\u8fd4\u56de static\/index.html \u6587\u4ef6；<\/li>\n
                                                                                                                                      • FileResponse：\u628a\u78c1\u76d8\u6587\u4ef6\u4f5c\u4e3a\u54cd\u5e94\u4f53\u8fd4\u56de，\u81ea\u52a8\u8bbe\u7f6e Content-Type（html \u6587\u4ef6\u4f1a\u8bbe\u6210 text\/html）；<\/li>\n
                                                                                                                                      • \u8fd9\u6837\u7528\u6237\u8bbf\u95ee http:\/\/127.0.0.1:8000\/ \u76f4\u63a5\u770b\u5230\u770b\u677f\u9875\u9762（\u7b2c 7 \u7ae0\u5199）\u3002<\/li>\n<\/ul>\n

                                                                                                                                        6.2.8 \u76f4\u63a5\u8fd0\u884c\u5165\u53e3<\/h4>\n

                                                                                                                                        if<\/span> __name__ ==<\/span> "__main__"<\/span>:<\/span>
                                                                                                                                        \n uvicorn.<\/span>run(<\/span>"src.app:app"<\/span>,<\/span> host=<\/span>"127.0.0.1"<\/span>,<\/span> port=<\/span>8000<\/span>,<\/span> reload<\/span>=<\/span>True<\/span>)<\/span><\/p>\n

                                                                                                                                          \n
                                                                                                                                        • if __name__ == "__main__"：\u53ea\u6709\u76f4\u63a5 python src\/app.py \u8fd0\u884c\u65f6\u624d\u6267\u884c，\u88ab import \u65f6\u4e0d\u6267\u884c；<\/li>\n
                                                                                                                                        • uvicorn.run("src.app:app", …)：\u7528 uvicorn \u542f\u52a8\u5e94\u7528\u3002\u6ce8\u610f\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u5b57\u7b26\u4e32 "src.app:app"（\u6a21\u5757\u8def\u5f84:\u53d8\u91cf\u540d），\u4e0d\u662f app \u5bf9\u8c61\u672c\u8eab\u2014\u2014\u56e0\u4e3a reload=True \u9700\u8981\u91cd\u65b0\u5bfc\u5165\u6a21\u5757，\u5fc5\u987b\u7528\u5b57\u7b26\u4e32；<\/li>\n
                                                                                                                                        • host="127.0.0.1"：\u53ea\u76d1\u542c\u672c\u673a（\u5f00\u53d1\u7528）\u3002\u8981\u5916\u7f51\u8bbf\u95ee\u6539\u6210 0.0.0.0；<\/li>\n
                                                                                                                                        • port=8000：\u7aef\u53e3；<\/li>\n
                                                                                                                                        • reload=True：\u4ee3\u7801\u6539\u52a8\u81ea\u52a8\u91cd\u542f，\u5f00\u53d1\u795e\u5668\u3002\u751f\u4ea7\u73af\u5883\u8981\u5173\u6389\u3002<\/li>\n<\/ul>\n

                                                                                                                                          \u4e5f\u53ef\u4ee5\u4e0d\u7528\u8fd9\u4e2a if，\u76f4\u63a5\u547d\u4ee4\u884c：uv run python -m uvicorn src.app:app –reload，\u6548\u679c\u4e00\u6837\u3002\u7b2c 8 \u7ae0\u63a8\u8350\u7528\u547d\u4ee4\u884c\u65b9\u5f0f\u3002<\/p>\n

                                                                                                                                          \n

                                                                                                                                          6.3 \u5e94\u7528\u7684\u7ec4\u88c5\u5168\u666f<\/h3>\n

                                                                                                                                          src\/app.py
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500\u2500 lifespan \u2500\u2500 create_task(broadcaster()) \u2192 \u540e\u53f0\u8dd1
                                                                                                                                          \n \u2502 \u2192 task.cancel() \u5173\u95ed
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500\u2500 app = FastAPI(lifespan=lifespan)
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500\u2500 add_middleware(CORSMiddleware, …) \u2190 \u5141\u8bb8\u8de8\u57df
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500\u2500 include_router(sse.router) \u2190 \u6302 \/sse\/orders
                                                                                                                                          \n \u251c\u2500\u2500 include_router(ws.router) \u2190 \u6302 \/ws\/orders
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500\u2500 mount("\/static", StaticFiles(…)) \u2190 \u6302\u9759\u6001\u8d44\u6e90
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u2514\u2500\u2500 GET "\/" \u2192 FileResponse(index.html) \u2190 \u9996\u9875<\/p>\n

                                                                                                                                          6.4 \u542f\u52a8\u987a\u5e8f<\/h3>\n

                                                                                                                                          python -m uvicorn src.app:app –reload
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500 \u5bfc\u5165 src.app \u6a21\u5757 \u2192 \u521b\u5efa app, \u6ce8\u518c\u6240\u6709\u8def\u7531
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500 uvicorn \u8c03\u7528 lifespan \u8fdb\u5165\u542f\u52a8\u9636\u6bb5:
                                                                                                                                          \n \u2502 \u2514\u2500 create_task(broadcaster()) \u2190 \u5e7f\u64ad\u5668\u5f00\u59cb\u540e\u53f0\u8fd0\u884c
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u251c\u2500 lifespan yield \u2192 \u5e94\u7528\u8fdb\u5165\u300c\u8fd0\u884c\u4e2d\u300d, \u5f00\u59cb\u63a5\u6536\u8bf7\u6c42
                                                                                                                                          \n \u2502 \u2502
                                                                                                                                          \n \u2502 \u251c\u2500 GET \/sse\/orders \u2192 sse_orders() \u5efa\u957f\u8fde\u63a5
                                                                                                                                          \n \u2502 \u251c\u2500 WS \/ws\/orders \u2192 ws_orders() \u5efa\u957f\u8fde\u63a5
                                                                                                                                          \n \u2502 \u251c\u2500 GET \/ \u2192 \u8fd4\u56de index.html
                                                                                                                                          \n \u2502 \u2514\u2500 (\u5e7f\u64ad\u5668\u6bcf 0.8s \u63a8\u6570\u636e\u7ed9\u6240\u6709\u8fde\u63a5)
                                                                                                                                          \n \u2502
                                                                                                                                          \n \u2514\u2500 Ctrl+C \u2192 lifespan finally \u2192 task.cancel() \u2192 \u5e7f\u64ad\u5668\u9000\u51fa \u2192 \u5e94\u7528\u5173\u95ed<\/p>\n

                                                                                                                                          6.5 \u52a8\u624b\u9a8c\u8bc1<\/h3>\n

                                                                                                                                          \u73b0\u5728\u540e\u7aef\u5df2\u7ecf\u5b8c\u6574（\u4f46\u524d\u7aef static\/index.html \u8fd8\u6ca1\u5199，\u7b2c 7 \u7ae0\u5199）\u3002\u5148\u9a8c\u8bc1\u540e\u7aef\u80fd\u542f\u52a8：<\/p>\n

                                                                                                                                          # \u5728\u9879\u76ee\u6839\u76ee\u5f55<\/span>
                                                                                                                                          \nuv run python -m<\/span> uvicorn src.app:app –host<\/span> 127.0<\/span>.0.1 –port<\/span> 8000<\/span> –reload<\/span><\/p>\n

                                                                                                                                          \u671f\u671b\u770b\u5230：<\/p>\n

                                                                                                                                          INFO: Uvicorn running on http:\/\/127.0.0.1:8000 (Press CTRL+C to quit)
                                                                                                                                          \nINFO: Started reloader process [xxxx] using StatReload
                                                                                                                                          \nINFO: Started server process [xxxx]
                                                                                                                                          \nINFO: Waiting for application startup.
                                                                                                                                          \nINFO: Application startup complete.<\/p>\n

                                                                                                                                          Application startup complete. \u8bf4\u660e lifespan \u7684\u542f\u52a8\u9636\u6bb5\u8dd1\u5b8c\u4e86，\u5e7f\u64ad\u5668\u5df2\u7ecf\u5728\u540e\u53f0\u8fd0\u884c\u3002<\/p>\n

                                                                                                                                          \u53e6\u5f00\u4e00\u4e2a\u7ec8\u7aef\u6d4b\u8bd5 SSE：<\/p>\n

                                                                                                                                          curl<\/span> -N<\/span> http:\/\/127.0.0.1:8000\/sse\/orders<\/p>\n

                                                                                                                                          \u5e94\u8be5\u6301\u7eed\u6536\u5230 event: hello \u548c event: orders \u5e27（\u6309 Ctrl+C \u9000\u51fa）\u3002<\/p>\n

                                                                                                                                          \u6d4b\u8bd5\u6839\u8def\u5f84：<\/p>\n

                                                                                                                                          curl<\/span> -s<\/span> http:\/\/127.0.0.1:8000\/<\/p>\n

                                                                                                                                          \u6b64\u65f6\u4f1a\u62a5 404（\u56e0\u4e3a static\/index.html \u8fd8\u6ca1\u5199）\u3002\u7b2c 7 \u7ae0\u5199\u5b8c\u524d\u7aef\u540e，\u8fd9\u91cc\u4f1a\u8fd4\u56de HTML \u9875\u9762\u3002<\/p>\n

                                                                                                                                          \n

                                                                                                                                          \u4e0b\u4e00\u7ae0 \u2192 07-\u524d\u7aef\u770b\u677f-index.md：\u5199 static\/index.html，\u628a SSE \u548c WS \u7684\u6570\u636e\u6e32\u67d3\u6210\u5b9e\u65f6\u770b\u677f\u3002<\/p>\n

                                                                                                                                          \n

                                                                                                                                          \u7b2c 7 \u7ae0 \u00b7 \u524d\u7aef\u770b\u677f static\/index.html<\/h2>\n

                                                                                                                                          \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                                                                                          \u5199\u4e00\u4e2a\u7eaf HTML + CSS + JS（\u65e0\u6846\u67b6）\u7684\u524d\u7aef\u9875\u9762，\u5b83\u540c\u65f6：<\/p>\n

                                                                                                                                            \n
                                                                                                                                          • \u7528 EventSource \u8fde \/sse\/orders \u63a5\u6536 SSE \u63a8\u9001，\u6e32\u67d3\u5de6\u4fa7\u8ba2\u5355\u770b\u677f；<\/li>\n
                                                                                                                                          • \u7528 WebSocket \u8fde \/ws\/orders \u63a5\u6536\u5e7f\u64ad + \u53d1\u547d\u4ee4（ping\/add\/snapshot），\u6e32\u67d3\u53f3\u4fa7\u64cd\u4f5c\u53f0\u548c\u901a\u4fe1\u65e5\u5fd7；<\/li>\n
                                                                                                                                          • \u65ad\u7ebf\u81ea\u52a8\u91cd\u8fde；<\/li>\n
                                                                                                                                          • \u628a\u8ba2\u5355\u6e32\u67d3\u6210\u5e26\u8fdb\u5ea6\u6761\u3001\u72b6\u6001\u8272\u5757\u7684\u5361\u7247，\u9876\u90e8\u663e\u793a\u7edf\u8ba1\u548c\u5b9e\u65f6\u65f6\u949f\u3002<\/li>\n<\/ul>\n

                                                                                                                                            \u5199\u5b8c\u8fd9\u4e00\u7ae0，\u6574\u4e2a\u9879\u76ee\u5c31\u9f50\u4e86，\u53ef\u4ee5\u8dd1\u8d77\u6765\u770b\u6548\u679c\u3002<\/p>\n

                                                                                                                                            \u672c\u7ae0\u4ee3\u7801\u5f88\u957f（300 \u591a\u884c），\u4f46\u5168\u662f\u539f\u59cb\u4ee3\u7801，\u7167\u6284\u5373\u53ef\u3002\u8bb2\u89e3\u5206\u300cCSS \/ HTML \/ JS\u300d\u4e09\u5757，\u53ef\u4ee5\u6284\u5b8c\u518d\u770b\u3002<\/p>\n

                                                                                                                                            \n

                                                                                                                                            7.1 \u539f\u59cb\u5b8c\u6574\u4ee3\u7801<\/h3>\n

                                                                                                                                            \u65b0\u5efa\u6587\u4ef6 static\/index.html，\u5b8c\u6574\u7167\u6284（\u8fd9\u4e00\u4efd\u662f\u9879\u76ee\u91cc\u552f\u4e00\u7684\u524d\u7aef\u6587\u4ef6）：<\/p>\n

                                                                                                                                            <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>html<\/span> lang<\/span>=<\/span>"<\/span>zh-CN"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>head<\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>utf-8"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>meta<\/span> name<\/span>=<\/span>"<\/span>viewport"<\/span><\/span> content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>title<\/span>><\/span><\/span>\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f<\/<\/span>title<\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>style<\/span>><\/span><\/span>
                                                                                                                                            \n \/* ———- \u8bbe\u8ba1\u53d8\u91cf ———- *\/<\/span>
                                                                                                                                            \n :root<\/span> {<\/span>
                                                                                                                                            \n –bg<\/span>:<\/span> #faf3e8;<\/span>
                                                                                                                                            \n –bg-soft<\/span>:<\/span> #fff8ef;<\/span>
                                                                                                                                            \n –card-bg<\/span>:<\/span> #ffffff;<\/span>
                                                                                                                                            \n –card-border<\/span>:<\/span> #f0dcc4;<\/span>
                                                                                                                                            \n –card-shadow<\/span>:<\/span> 0 4px 16px rgba<\/span>(<\/span>180,<\/span> 120,<\/span> 60,<\/span> .08)<\/span>;<\/span>
                                                                                                                                            \n –text<\/span>:<\/span> #3d2c1e;<\/span>
                                                                                                                                            \n –text-soft<\/span>:<\/span> #8d6e63;<\/span>
                                                                                                                                            \n –text-mute<\/span>:<\/span> #bca995;<\/span>
                                                                                                                                            \n –accent<\/span>:<\/span> #ff7043;<\/span>
                                                                                                                                            \n –accent-dark<\/span>:<\/span> #e64a19;<\/span>
                                                                                                                                            \n –accent-soft<\/span>:<\/span> #ffe0b2;<\/span>
                                                                                                                                            \n –tea<\/span>:<\/span> #ff8a65;<\/span>
                                                                                                                                            \n –tea-2<\/span>:<\/span> #ffb74d;<\/span>
                                                                                                                                            \n –green<\/span>:<\/span> #66bb6a;<\/span>
                                                                                                                                            \n –green-bg<\/span>:<\/span> #e8f5e9;<\/span>
                                                                                                                                            \n –blue<\/span>:<\/span> #42a5f5;<\/span>
                                                                                                                                            \n –blue-bg<\/span>:<\/span> #e3f2fd;<\/span>
                                                                                                                                            \n –gray-bg<\/span>:<\/span> #eceff1;<\/span>
                                                                                                                                            \n –radius<\/span>:<\/span> 14px;<\/span>
                                                                                                                                            \n –radius-sm<\/span>:<\/span> 8px;<\/span>
                                                                                                                                            \n }<\/span><\/p>\n

                                                                                                                                            *<\/span> {<\/span> box-sizing<\/span>:<\/span> border-box;<\/span> margin<\/span>:<\/span> 0;<\/span> padding<\/span>:<\/span> 0;<\/span> }<\/span>
                                                                                                                                            \n html, body<\/span> {<\/span> height<\/span>:<\/span> 100%;<\/span> }<\/span>
                                                                                                                                            \n body<\/span> {<\/span>
                                                                                                                                            \n font-family<\/span>:<\/span> -apple-system,<\/span> "PingFang SC"<\/span>,<\/span> "Microsoft YaHei"<\/span>,<\/span> system-ui,<\/span> sans-serif;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> var<\/span>(<\/span>–bg)<\/span>;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text)<\/span>;<\/span> min-height<\/span>:<\/span> 100vh;<\/span>
                                                                                                                                            \n -webkit-font-smoothing<\/span>:<\/span> antialiased;<\/span>
                                                                                                                                            \n }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u9876\u90e8\u5bfc\u822a ———- *\/<\/span>
                                                                                                                                            \n header<\/span> {<\/span>
                                                                                                                                            \n padding<\/span>:<\/span> 0 28px;<\/span> height<\/span>:<\/span> 64px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> var<\/span>(<\/span>–tea)<\/span> 0%,<\/span> var<\/span>(<\/span>–tea-2)<\/span> 100%)<\/span>;<\/span>
                                                                                                                                            \n color<\/span>:<\/span> #fff;<\/span> display<\/span>:<\/span> flex;<\/span> gap<\/span>:<\/span> 20px;<\/span> align-items<\/span>:<\/span> center;<\/span>
                                                                                                                                            \n box-shadow<\/span>:<\/span> 0 2px 12px rgba<\/span>(<\/span>255,<\/span> 138,<\/span> 101,<\/span> .25)<\/span>;<\/span>
                                                                                                                                            \n position<\/span>:<\/span> sticky;<\/span> top<\/span>:<\/span> 0;<\/span> z-index<\/span>:<\/span> 100;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n header h1<\/span> {<\/span> font-size<\/span>:<\/span> 18px;<\/span> font-weight<\/span>:<\/span> 700;<\/span> letter-spacing<\/span>:<\/span> .5px;<\/span> white-space<\/span>:<\/span> nowrap;<\/span> }<\/span>
                                                                                                                                            \n .header-right<\/span> {<\/span> margin-left<\/span>:<\/span> auto;<\/span> display<\/span>:<\/span> flex;<\/span> gap<\/span>:<\/span> 10px;<\/span> align-items<\/span>:<\/span> center;<\/span> }<\/span>
                                                                                                                                            \n .badge<\/span> {<\/span>
                                                                                                                                            \n font-size<\/span>:<\/span> 12px;<\/span> padding<\/span>:<\/span> 5px 14px;<\/span> border-radius<\/span>:<\/span> 999px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> rgba<\/span>(<\/span>255,<\/span>255,<\/span>255,<\/span>.2)<\/span>;<\/span> backdrop-filter<\/span>:<\/span> blur<\/span>(<\/span>4px)<\/span>;<\/span>
                                                                                                                                            \n display<\/span>:<\/span> flex;<\/span> align-items<\/span>:<\/span> center;<\/span> gap<\/span>:<\/span> 6px;<\/span> white-space<\/span>:<\/span> nowrap;<\/span>
                                                                                                                                            \n transition<\/span>:<\/span> background .3s;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .badge .dot<\/span> {<\/span> width<\/span>:<\/span> 7px;<\/span> height<\/span>:<\/span> 7px;<\/span> border-radius<\/span>:<\/span> 50%;<\/span> background<\/span>:<\/span> #c8e6c9;<\/span> }<\/span>
                                                                                                                                            \n .badge .dot.off<\/span> {<\/span> background<\/span>:<\/span> #ef5350;<\/span> }<\/span>
                                                                                                                                            \n .badge .dot.live<\/span> {<\/span> background<\/span>:<\/span> #c8e6c9;<\/span> animation<\/span>:<\/span> pulse 1.5s infinite;<\/span> }<\/span>
                                                                                                                                            \n @keyframes<\/span> pulse<\/span> {<\/span> 0%,100%<\/span>{<\/span>opacity<\/span>:<\/span>1}<\/span> 50%<\/span>{<\/span>opacity<\/span>:<\/span>.3}<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u7edf\u8ba1\u6761 ———- *\/<\/span>
                                                                                                                                            \n .stats-bar<\/span> {<\/span>
                                                                                                                                            \n display<\/span>:<\/span> flex;<\/span> gap<\/span>:<\/span> 12px;<\/span> padding<\/span>:<\/span> 20px 28px 0;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .stat-chip<\/span> {<\/span>
                                                                                                                                            \n flex<\/span>:<\/span> 1;<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–card-bg)<\/span>;<\/span> border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–card-border)<\/span>;<\/span>
                                                                                                                                            \n border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius-sm)<\/span>;<\/span> padding<\/span>:<\/span> 12px 16px;<\/span>
                                                                                                                                            \n display<\/span>:<\/span> flex;<\/span> flex-direction<\/span>:<\/span> column;<\/span> gap<\/span>:<\/span> 2px;<\/span>
                                                                                                                                            \n box-shadow<\/span>:<\/span> 0 2px 8px rgba<\/span>(<\/span>180,<\/span>120,<\/span>60,<\/span>.06)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .stat-chip .num<\/span> {<\/span> font-size<\/span>:<\/span> 22px;<\/span> font-weight<\/span>:<\/span> 700;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span> line-height<\/span>:<\/span> 1.2;<\/span> }<\/span>
                                                                                                                                            \n .stat-chip .lbl<\/span> {<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-soft)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .stat-chip.green .num<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–green)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .stat-chip.blue .num<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–blue)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .stat-chip.gray .num<\/span> {<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-soft)<\/span>;<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u4e3b\u4f53\u5e03\u5c40 ———- *\/<\/span>
                                                                                                                                            \n main<\/span> {<\/span> padding<\/span>:<\/span> 20px 28px 28px;<\/span> display<\/span>:<\/span> grid;<\/span> grid-template-columns<\/span>:<\/span> 1.4fr 1fr;<\/span> gap<\/span>:<\/span> 20px;<\/span> align-items<\/span>:<\/span> start;<\/span> }<\/span>
                                                                                                                                            \n @media<\/span> (<\/span>max-width<\/span>:<\/span> 880px)<\/span><\/span> {<\/span> main<\/span> {<\/span> grid-template-columns<\/span>:<\/span> 1fr;<\/span> }<\/span> .stats-bar<\/span> {<\/span> flex-wrap<\/span>:<\/span> wrap;<\/span> }<\/span> .stat-chip<\/span> {<\/span> min-width<\/span>:<\/span> 45%;<\/span> }<\/span> }<\/span>
                                                                                                                                            \n section<\/span> {<\/span>
                                                                                                                                            \n border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–card-border)<\/span>;<\/span> border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius)<\/span>;<\/span> padding<\/span>:<\/span> 18px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> var<\/span>(<\/span>–card-bg)<\/span>;<\/span> box-shadow<\/span>:<\/span> var<\/span>(<\/span>–card-shadow)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n section h2<\/span> {<\/span> font-size<\/span>:<\/span> 14px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span> margin-bottom<\/span>:<\/span> 14px;<\/span> display<\/span>:<\/span> flex;<\/span> align-items<\/span>:<\/span> center;<\/span> gap<\/span>:<\/span> 6px;<\/span> }<\/span>
                                                                                                                                            \n section h2 .tag<\/span> {<\/span>
                                                                                                                                            \n font-size<\/span>:<\/span> 10px;<\/span> font-weight<\/span>:<\/span> 600;<\/span> padding<\/span>:<\/span> 2px 8px;<\/span> border-radius<\/span>:<\/span> 4px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> var<\/span>(<\/span>–accent-soft)<\/span>;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span>
                                                                                                                                            \n }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u8ba2\u5355\u5361\u7247 ———- *\/<\/span>
                                                                                                                                            \n .orders<\/span> {<\/span> display<\/span>:<\/span> grid;<\/span> grid-template-columns<\/span>:<\/span> repeat<\/span>(<\/span>auto-fill,<\/span> minmax<\/span>(<\/span>210px,<\/span> 1fr)<\/span>)<\/span>;<\/span> gap<\/span>:<\/span> 12px;<\/span> }<\/span>
                                                                                                                                            \n .card<\/span> {<\/span>
                                                                                                                                            \n border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–accent-soft)<\/span>;<\/span> border-radius<\/span>:<\/span> 10px;<\/span> padding<\/span>:<\/span> 14px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>180deg,<\/span> var<\/span>(<\/span>–bg-soft)<\/span> 0%,<\/span> var<\/span>(<\/span>–card-bg)<\/span> 100%)<\/span>;<\/span>
                                                                                                                                            \n position<\/span>:<\/span> relative;<\/span> transition<\/span>:<\/span> transform .2s,<\/span> box-shadow .2s;<\/span>
                                                                                                                                            \n overflow<\/span>:<\/span> hidden;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .card:hover<\/span> {<\/span> transform<\/span>:<\/span> translateY<\/span>(<\/span>-2px)<\/span>;<\/span> box-shadow<\/span>:<\/span> 0 6px 20px rgba<\/span>(<\/span>255,<\/span>138,<\/span>101,<\/span>.15)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .card::before<\/span> {<\/span>
                                                                                                                                            \n content<\/span>:<\/span> ''<\/span>;<\/span> position<\/span>:<\/span> absolute;<\/span> left<\/span>:<\/span> 0;<\/span> top<\/span>:<\/span> 0;<\/span> bottom<\/span>:<\/span> 0;<\/span> width<\/span>:<\/span> 4px;<\/span>
                                                                                                                                            \n background<\/span>:<\/span> var<\/span>(<\/span>–accent)<\/span>;<\/span> border-radius<\/span>:<\/span> 4px 0 0 4px;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .card.s-done::before<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–green)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .card.s-picked::before<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–text-mute)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .card .id<\/span> {<\/span> position<\/span>:<\/span> absolute;<\/span> top<\/span>:<\/span> 10px;<\/span> right<\/span>:<\/span> 12px;<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-mute)<\/span>;<\/span> font-weight<\/span>:<\/span> 600;<\/span> }<\/span>
                                                                                                                                            \n .card h3<\/span> {<\/span> margin-bottom<\/span>:<\/span> 4px;<\/span> font-size<\/span>:<\/span> 15px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span> font-weight<\/span>:<\/span> 700;<\/span> }<\/span>
                                                                                                                                            \n .card .meta<\/span> {<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-soft)<\/span>;<\/span> margin-bottom<\/span>:<\/span> 10px;<\/span> line-height<\/span>:<\/span> 1.6;<\/span> }<\/span>
                                                                                                                                            \n .card .meta span<\/span> {<\/span> display<\/span>:<\/span> inline-block;<\/span> padding<\/span>:<\/span> 1px 6px;<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–bg)<\/span>;<\/span> border-radius<\/span>:<\/span> 4px;<\/span> margin<\/span>:<\/span> 2px 2px 0 0;<\/span> }<\/span>
                                                                                                                                            \n .bar-wrap<\/span> {<\/span> display<\/span>:<\/span> flex;<\/span> align-items<\/span>:<\/span> center;<\/span> gap<\/span>:<\/span> 8px;<\/span> margin-bottom<\/span>:<\/span> 8px;<\/span> }<\/span>
                                                                                                                                            \n .bar<\/span> {<\/span> flex<\/span>:<\/span> 1;<\/span> height<\/span>:<\/span> 6px;<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–accent-soft)<\/span>;<\/span> border-radius<\/span>:<\/span> 3px;<\/span> overflow<\/span>:<\/span> hidden;<\/span> }<\/span>
                                                                                                                                            \n .bar > div<\/span> {<\/span> height<\/span>:<\/span> 100%;<\/span> background<\/span>:<\/span> linear-gradient<\/span>(<\/span>90deg,<\/span> var<\/span>(<\/span>–accent)<\/span>,<\/span> var<\/span>(<\/span>–tea-2)<\/span>)<\/span>;<\/span> transition<\/span>:<\/span> width .5s cubic-bezier<\/span>(<\/span>.4,<\/span>0,<\/span>.2,<\/span>1)<\/span>;<\/span> border-radius<\/span>:<\/span> 3px;<\/span> }<\/span>
                                                                                                                                            \n .bar-wrap .pct<\/span> {<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-soft)<\/span>;<\/span> font-weight<\/span>:<\/span> 600;<\/span> min-width<\/span>:<\/span> 32px;<\/span> text-align<\/span>:<\/span> right;<\/span> }<\/span>
                                                                                                                                            \n .status<\/span> {<\/span> display<\/span>:<\/span> inline-flex;<\/span> align-items<\/span>:<\/span> center;<\/span> gap<\/span>:<\/span> 4px;<\/span> padding<\/span>:<\/span> 3px 10px;<\/span> border-radius<\/span>:<\/span> 999px;<\/span> font-size<\/span>:<\/span> 11px;<\/span> font-weight<\/span>:<\/span> 600;<\/span> }<\/span>
                                                                                                                                            \n .status::before<\/span> {<\/span> content<\/span>:<\/span>''<\/span>;<\/span> width<\/span>:<\/span>5px;<\/span> height<\/span>:<\/span>5px;<\/span> border-radius<\/span>:<\/span>50%;<\/span> background<\/span>:<\/span> currentColor;<\/span> }<\/span>
                                                                                                                                            \n .s-\u5f85\u5236\u4f5c<\/span> {<\/span> background<\/span>:<\/span> #fff3e0;<\/span> color<\/span>:<\/span> #ef6c00;<\/span> }<\/span>
                                                                                                                                            \n .s-\u5236\u4f5c\u4e2d<\/span> {<\/span> background<\/span>:<\/span> #ffe0b2;<\/span> color<\/span>:<\/span> #e65100;<\/span> }<\/span>
                                                                                                                                            \n .s-\u5236\u4f5c\u4e2d::before<\/span> {<\/span> animation<\/span>:<\/span> pulse 1.2s infinite;<\/span> }<\/span>
                                                                                                                                            \n .s-\u5df2\u5b8c\u6210<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–green-bg)<\/span>;<\/span> color<\/span>:<\/span> #2e7d32;<\/span> }<\/span>
                                                                                                                                            \n .s-\u5df2\u53d6\u9910<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–gray-bg)<\/span>;<\/span> color<\/span>:<\/span> #607d8b;<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u63a7\u5236\u9762\u677f ———- *\/<\/span>
                                                                                                                                            \n .panel<\/span> {<\/span> display<\/span>:<\/span> flex;<\/span> flex-direction<\/span>:<\/span> column;<\/span> gap<\/span>:<\/span> 12px;<\/span> }<\/span>
                                                                                                                                            \n input<\/span> {<\/span>
                                                                                                                                            \n width<\/span>:<\/span> 100%;<\/span> padding<\/span>:<\/span> 10px 14px;<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–bg-soft)<\/span>;<\/span>
                                                                                                                                            \n border<\/span>:<\/span> 1px solid var<\/span>(<\/span>–card-border)<\/span>;<\/span> border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius-sm)<\/span>;<\/span>
                                                                                                                                            \n font<\/span>:<\/span> inherit;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text)<\/span>;<\/span> transition<\/span>:<\/span> border-color .2s;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n input:focus<\/span> {<\/span> outline<\/span>:<\/span> none;<\/span> border-color<\/span>:<\/span> var<\/span>(<\/span>–accent)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n .btn-row<\/span> {<\/span> display<\/span>:<\/span> flex;<\/span> gap<\/span>:<\/span> 8px;<\/span> flex-wrap<\/span>:<\/span> wrap;<\/span> }<\/span>
                                                                                                                                            \n button<\/span> {<\/span>
                                                                                                                                            \n padding<\/span>:<\/span> 9px 18px;<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–accent)<\/span>;<\/span> border<\/span>:<\/span> 0;<\/span> border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius-sm)<\/span>;<\/span>
                                                                                                                                            \n color<\/span>:<\/span> #fff;<\/span> cursor<\/span>:<\/span> pointer;<\/span> font<\/span>:<\/span> inherit;<\/span> font-weight<\/span>:<\/span> 600;<\/span> font-size<\/span>:<\/span> 13px;<\/span>
                                                                                                                                            \n transition<\/span>:<\/span> all .2s;<\/span> display<\/span>:<\/span> flex;<\/span> align-items<\/span>:<\/span> center;<\/span> gap<\/span>:<\/span> 4px;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n button:hover<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span> transform<\/span>:<\/span> translateY<\/span>(<\/span>-1px)<\/span>;<\/span> box-shadow<\/span>:<\/span> 0 3px 10px rgba<\/span>(<\/span>255,<\/span>112,<\/span>67,<\/span>.3)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n button:active<\/span> {<\/span> transform<\/span>:<\/span> translateY<\/span>(<\/span>0)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n button.ghost<\/span> {<\/span> background<\/span>:<\/span> var<\/span>(<\/span>–accent-soft)<\/span>;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–accent-dark)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n button.ghost:hover<\/span> {<\/span> background<\/span>:<\/span> #ffcc80;<\/span> box-shadow<\/span>:<\/span> 0 3px 10px rgba<\/span>(<\/span>255,<\/span>224,<\/span>178,<\/span>.5)<\/span>;<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- WS \u65e5\u5fd7 ———- *\/<\/span>
                                                                                                                                            \n .log-header<\/span> {<\/span> display<\/span>:<\/span> flex;<\/span> justify-content<\/span>:<\/span> space-between;<\/span> align-items<\/span>:<\/span> center;<\/span> }<\/span>
                                                                                                                                            \n .log-header span<\/span> {<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-mute)<\/span>;<\/span> }<\/span>
                                                                                                                                            \n pre<\/span> {<\/span>
                                                                                                                                            \n background<\/span>:<\/span> #2d2018;<\/span> color<\/span>:<\/span> #ffe0b2;<\/span> padding<\/span>:<\/span> 12px;<\/span> border-radius<\/span>:<\/span> var<\/span>(<\/span>–radius-sm)<\/span>;<\/span>
                                                                                                                                            \n overflow<\/span>:<\/span> auto;<\/span> max-height<\/span>:<\/span> 220px;<\/span> font-size<\/span>:<\/span> 11px;<\/span> line-height<\/span>:<\/span> 1.6;<\/span>
                                                                                                                                            \n font-family<\/span>:<\/span> "SF Mono"<\/span>,<\/span> "Cascadia Code"<\/span>,<\/span> Consolas,<\/span> monospace;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n pre .arrow-in<\/span> {<\/span> color<\/span>:<\/span> #66bb6a;<\/span> }<\/span>
                                                                                                                                            \n pre .arrow-out<\/span> {<\/span> color<\/span>:<\/span> #ffb74d;<\/span> }<\/span>
                                                                                                                                            \n pre .type<\/span> {<\/span> color<\/span>:<\/span> #42a5f5;<\/span> font-weight<\/span>:<\/span> 600;<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u7a7a\u72b6\u6001 ———- *\/<\/span>
                                                                                                                                            \n .empty<\/span> {<\/span>
                                                                                                                                            \n text-align<\/span>:<\/span> center;<\/span> padding<\/span>:<\/span> 32px 16px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-mute)<\/span>;<\/span> font-size<\/span>:<\/span> 13px;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n .empty .icon<\/span> {<\/span> font-size<\/span>:<\/span> 28px;<\/span> display<\/span>:<\/span> block;<\/span> margin-bottom<\/span>:<\/span> 8px;<\/span> opacity<\/span>:<\/span> .5;<\/span> }<\/span><\/p>\n

                                                                                                                                            .meta-line<\/span> {<\/span> font-size<\/span>:<\/span> 11px;<\/span> color<\/span>:<\/span> var<\/span>(<\/span>–text-soft)<\/span>;<\/span> margin-top<\/span>:<\/span> 10px;<\/span> padding-top<\/span>:<\/span> 10px;<\/span> border-top<\/span>:<\/span> 1px dashed var<\/span>(<\/span>–card-border)<\/span>;<\/span> }<\/span><\/p>\n

                                                                                                                                            \/* ———- \u5361\u7247\u5165\u573a\u52a8\u753b ———- *\/<\/span>
                                                                                                                                            \n @keyframes<\/span> cardIn<\/span> {<\/span> from<\/span> {<\/span> opacity<\/span>:<\/span>0;<\/span> transform<\/span>:<\/span> translateY<\/span>(<\/span>8px)<\/span>;<\/span> }<\/span> to<\/span> {<\/span> opacity<\/span>:<\/span>1;<\/span> transform<\/span>:<\/span> translateY<\/span>(<\/span>0)<\/span>;<\/span> }<\/span> }<\/span>
                                                                                                                                            \n .card<\/span> {<\/span> animation<\/span>:<\/span> cardIn .3s ease-out;<\/span> }<\/span>
                                                                                                                                            \n<\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>head<\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>body<\/span>><\/span><\/span>
                                                                                                                                            \n<<\/span>header<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>h1<\/span>><\/span><\/span>🧋 \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f<\/<\/span>h1<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>header-right"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>badge"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>dot off"<\/span><\/span> id<\/span>=<\/span>"<\/span>sse-dot"<\/span><\/span>><\/span><\/span><\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> id<\/span>=<\/span>"<\/span>sse-status"<\/span><\/span>><\/span><\/span>SSE: …<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>span<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>badge"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>dot off"<\/span><\/span> id<\/span>=<\/span>"<\/span>ws-dot"<\/span><\/span>><\/span><\/span><\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> id<\/span>=<\/span>"<\/span>ws-status"<\/span><\/span>><\/span><\/span>WS: …<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>span<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>badge"<\/span><\/span> id<\/span>=<\/span>"<\/span>clock"<\/span><\/span>><\/span><\/span>–:–:–<\/<\/span>span<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>header<\/span>><\/span><\/span><\/p>\n

                                                                                                                                            <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stats-bar"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-chip"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>num"<\/span><\/span> id<\/span>=<\/span>"<\/span>stat-total"<\/span><\/span>><\/span><\/span>0<\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>lbl"<\/span><\/span>><\/span><\/span>\u603b\u8ba2\u5355<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-chip"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>num"<\/span><\/span> id<\/span>=<\/span>"<\/span>stat-making"<\/span><\/span>><\/span><\/span>0<\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>lbl"<\/span><\/span>><\/span><\/span>\u5236\u4f5c\u4e2d<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-chip green"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>num"<\/span><\/span> id<\/span>=<\/span>"<\/span>stat-done"<\/span><\/span>><\/span><\/span>0<\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>lbl"<\/span><\/span>><\/span><\/span>\u5df2\u5b8c\u6210<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-chip gray"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>num"<\/span><\/span> id<\/span>=<\/span>"<\/span>stat-picked"<\/span><\/span>><\/span><\/span>0<\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>lbl"<\/span><\/span>><\/span><\/span>\u5df2\u53d6\u9910<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>div<\/span>><\/span><\/span><\/p>\n

                                                                                                                                            <<\/span>main<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>section<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>h2<\/span>><\/span><\/span>📋 \u5b9e\u65f6\u8ba2\u5355 <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>tag"<\/span><\/span>><\/span><\/span>SSE \u5355\u5411\u63a8\u9001<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>h2<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>orders"<\/span><\/span> id<\/span>=<\/span>"<\/span>sse-orders"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>empty"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>icon"<\/span><\/span>><\/span><\/span>🧋<\/<\/span>span<\/span>><\/span><\/span>\u7b49\u5f85\u65b0\u8ba2\u5355…<\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>meta-line"<\/span><\/span> id<\/span>=<\/span>"<\/span>sse-meta"<\/span><\/span>><\/span><\/span>\u5c1a\u672a\u8fde\u63a5<\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>section<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>section<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>h2<\/span>><\/span><\/span>🎛\ufe0f \u5e97\u5458\u64cd\u4f5c\u53f0 <<\/span>span<\/span> class<\/span>=<\/span>"<\/span>tag"<\/span><\/span>><\/span><\/span>WebSocket \u53cc\u5411\u901a\u9053<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>h2<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>orders"<\/span><\/span> id<\/span>=<\/span>"<\/span>ws-orders"<\/span><\/span> style<\/span>=<\/span>"<\/span>margin-bottom<\/span>:<\/span>14px<\/span>"<\/span><\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>empty"<\/span><\/span>><\/span><\/span><<\/span>span<\/span> class<\/span>=<\/span>"<\/span>icon"<\/span><\/span>><\/span><\/span>🎛\ufe0f<\/<\/span>span<\/span>><\/span><\/span>\u7b49\u5f85\u65b0\u8ba2\u5355…<\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>input<\/span> id<\/span>=<\/span>"<\/span>cmd"<\/span><\/span> placeholder<\/span>=<\/span>'<\/span>{"cmd":"pickup","arg":3} \u6216 {"cmd":"add"}'<\/span><\/span> \/><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>btn-row"<\/span><\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>button<\/span> onclick<\/span>=<\/span>'<\/span>sendCmd<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span>"ping"<\/span>}<\/span>)<\/span><\/span>'<\/span><\/span><\/span>><\/span><\/span>📡 ping<\/<\/span>button<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>button<\/span> onclick<\/span>=<\/span>'<\/span>sendCmd<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span>"add"<\/span>}<\/span>)<\/span><\/span>'<\/span><\/span><\/span>><\/span><\/span>\u2795 \u52a0\u5355<\/<\/span>button<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>button<\/span> class<\/span>=<\/span>"<\/span>ghost"<\/span><\/span> onclick<\/span>=<\/span>'<\/span>sendCmd<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span>"snapshot"<\/span>}<\/span>)<\/span><\/span>'<\/span><\/span><\/span>><\/span><\/span>📸 snapshot<\/<\/span>button<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>log-header"<\/span><\/span>><\/span><\/span><<\/span>span<\/span>><\/span><\/span>WS \u901a\u4fe1\u65e5\u5fd7<\/<\/span>span<\/span>><\/span><\/span><<\/span>span<\/span> id<\/span>=<\/span>"<\/span>ws-log-count"<\/span><\/span>><\/span><\/span>0 \u6761<\/<\/span>span<\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <<\/span>pre<\/span> id<\/span>=<\/span>"<\/span>ws-log"<\/span><\/span>><\/span><\/span><\/<\/span>pre<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>div<\/span>><\/span><\/span>
                                                                                                                                            \n <\/<\/span>section<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>main<\/span>><\/span><\/span><\/p>\n

                                                                                                                                            <<\/span>script<\/span>><\/span><\/span>
                                                                                                                                            \n const<\/span> STATUS_CLASS<\/span> =<\/span> {<\/span>'\u5f85\u5236\u4f5c'<\/span>:<\/span>'s-\u5f85\u5236\u4f5c'<\/span>,<\/span>'\u5236\u4f5c\u4e2d'<\/span>:<\/span>'s-\u5236\u4f5c\u4e2d'<\/span>,<\/span>'\u5df2\u5b8c\u6210'<\/span>:<\/span>'s-\u5df2\u5b8c\u6210'<\/span>,<\/span>'\u5df2\u53d6\u9910'<\/span>:<\/span>'s-\u5df2\u53d6\u9910'<\/span>}<\/span>;<\/span>
                                                                                                                                            \n const<\/span> STATUS_CARD<\/span> =<\/span> {<\/span>'\u5df2\u5b8c\u6210'<\/span>:<\/span>'s-done'<\/span>,<\/span>'\u5df2\u53d6\u9910'<\/span>:<\/span>'s-picked'<\/span>}<\/span>;<\/span><\/p>\n

                                                                                                                                            const<\/span> fmtTime<\/span> =<\/span> (<\/span>iso<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n const<\/span> d =<\/span> new<\/span> Date<\/span>(<\/span>iso)<\/span>;<\/span> return<\/span> d.<\/span>toLocaleTimeString<\/span>(<\/span>'zh-CN'<\/span>,<\/span> {<\/span>hour12<\/span>:<\/span> false<\/span>}<\/span>)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>;<\/span><\/p>\n

                                                                                                                                            \/\/ \u66f4\u65b0\u7edf\u8ba1\u6761<\/span>
                                                                                                                                            \n function<\/span> updateStats<\/span>(<\/span>list<\/span>)<\/span> {<\/span>
                                                                                                                                            \n const<\/span> s =<\/span> {<\/span> total<\/span>:<\/span>0<\/span>,<\/span> making<\/span>:<\/span>0<\/span>,<\/span> done<\/span>:<\/span>0<\/span>,<\/span> picked<\/span>:<\/span>0<\/span> }<\/span>;<\/span>
                                                                                                                                            \n for<\/span> (<\/span>const<\/span> o of<\/span> (<\/span>list ||<\/span> [<\/span>]<\/span>)<\/span>)<\/span> {<\/span>
                                                                                                                                            \n s.<\/span>total++<\/span>;<\/span>
                                                                                                                                            \n if<\/span> (<\/span>o.<\/span>status ===<\/span> '\u5236\u4f5c\u4e2d'<\/span> ||<\/span> o.<\/span>status ===<\/span> '\u5f85\u5236\u4f5c'<\/span>)<\/span> s.<\/span>making++<\/span>;<\/span>
                                                                                                                                            \n else<\/span> if<\/span> (<\/span>o.<\/span>status ===<\/span> '\u5df2\u5b8c\u6210'<\/span>)<\/span> s.<\/span>done++<\/span>;<\/span>
                                                                                                                                            \n else<\/span> if<\/span> (<\/span>o.<\/span>status ===<\/span> '\u5df2\u53d6\u9910'<\/span>)<\/span> s.<\/span>picked++<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'stat-total'<\/span>)<\/span>.<\/span>textContent =<\/span> s.<\/span>total;<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'stat-making'<\/span>)<\/span>.<\/span>textContent =<\/span> s.<\/span>making;<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'stat-done'<\/span>)<\/span>.<\/span>textContent =<\/span> s.<\/span>done;<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'stat-picked'<\/span>)<\/span>.<\/span>textContent =<\/span> s.<\/span>picked;<\/span>
                                                                                                                                            \n }<\/span><\/p>\n

                                                                                                                                            const<\/span> renderOrders<\/span> =<\/span> (<\/span>el,<\/span> list<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n if<\/span> (<\/span>!<\/span>list ||<\/span> !<\/span>list.<\/span>length)<\/span> {<\/span>
                                                                                                                                            \n el.<\/span>innerHTML =<\/span> '<div class="empty"><span class="icon">🧋<\/span>\u6682\u65e0\u8ba2\u5355<\/div>'<\/span>;<\/span>
                                                                                                                                            \n updateStats<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>
                                                                                                                                            \n return<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n el.<\/span>innerHTML =<\/span> list.<\/span>map<\/span>(<\/span>o<\/span> =><\/span> `<\/span>
                                                                                                                                            \n <div class="card <\/span>${<\/span>STATUS_CARD<\/span>[<\/span>o.<\/span>status]<\/span> ||<\/span> ''<\/span>}<\/span><\/span>">
                                                                                                                                            \n <span class="id">#<\/span>${<\/span>o.<\/span>id}<\/span><\/span><\/span>
                                                                                                                                            \n <h3><\/span>${<\/span>o.<\/span>drink}<\/span><\/span><\/h3>
                                                                                                                                            \n <div class="meta">
                                                                                                                                            \n <span><\/span>${<\/span>o.<\/span>base}<\/span><\/span><\/span><span><\/span>${<\/span>o.<\/span>sugar}<\/span><\/span><\/span><span><\/span>${<\/span>o.<\/span>ice}<\/span><\/span><\/span><span><\/span>${<\/span>o.<\/span>topping}<\/span><\/span><\/span><span>\u00a5<\/span>${<\/span>o.<\/span>price}<\/span><\/span><\/span>
                                                                                                                                            \n <\/div>
                                                                                                                                            \n <div class="bar-wrap">
                                                                                                                                            \n <div class="bar"><div style="width:<\/span>${<\/span>o.<\/span>progress}<\/span><\/span>%"><\/div><\/div>
                                                                                                                                            \n <span class="pct"><\/span>${<\/span>o.<\/span>progress}<\/span><\/span>%<\/span>
                                                                                                                                            \n <\/div>
                                                                                                                                            \n <span class="status <\/span>${<\/span>STATUS_CLASS<\/span>[<\/span>o.<\/span>status]<\/span> ||<\/span> ''<\/span>}<\/span><\/span>"><\/span>${<\/span>o.<\/span>status}<\/span><\/span><\/span>
                                                                                                                                            \n <span class="meta-line" style="margin-left:8px;border:0;padding:0"><\/span>${<\/span>fmtTime<\/span>(<\/span>o.<\/span>created_at)<\/span>}<\/span><\/span><\/span>
                                                                                                                                            \n <\/div>
                                                                                                                                            \n <\/span>`<\/span><\/span>)<\/span>.<\/span>join<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
                                                                                                                                            \n updateStats<\/span>(<\/span>list)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>;<\/span><\/p>\n

                                                                                                                                            \/\/ ———- SSE ———-<\/span>
                                                                                                                                            \n function<\/span> connectSSE<\/span>(<\/span>)<\/span> {<\/span>
                                                                                                                                            \n const<\/span> es =<\/span> new<\/span> EventSource<\/span>(<\/span>'\/sse\/orders'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> status =<\/span> document.<\/span>getElementById<\/span>(<\/span>'sse-status'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> dot =<\/span> document.<\/span>getElementById<\/span>(<\/span>'sse-dot'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> meta =<\/span> document.<\/span>getElementById<\/span>(<\/span>'sse-meta'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> box =<\/span> document.<\/span>getElementById<\/span>(<\/span>'sse-orders'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n es.<\/span>addEventListener<\/span>(<\/span>'hello'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n status.<\/span>textContent =<\/span> 'SSE: \u5df2\u8fde\u63a5'<\/span>;<\/span>
                                                                                                                                            \n dot.<\/span>className =<\/span> 'dot live'<\/span>;<\/span>
                                                                                                                                            \n const<\/span> info =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                            \n meta.<\/span>textContent =<\/span> '\u83dc\u5355: '<\/span> +<\/span> info.<\/span>menu.<\/span>join<\/span>(<\/span>' \/ '<\/span>)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>)<\/span>;<\/span>
                                                                                                                                            \n es.<\/span>addEventListener<\/span>(<\/span>'orders'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n const<\/span> {<\/span> time,<\/span> orders }<\/span> =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                            \n renderOrders<\/span>(<\/span>box,<\/span> orders)<\/span>;<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'clock'<\/span>)<\/span>.<\/span>textContent =<\/span> fmtTime<\/span>(<\/span>time)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>)<\/span>;<\/span>
                                                                                                                                            \n es.<\/span>onerror<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n status.<\/span>textContent =<\/span> 'SSE: \u65ad\u5f00, 3s \u540e\u91cd\u8fde'<\/span>;<\/span>
                                                                                                                                            \n dot.<\/span>className =<\/span> 'dot off'<\/span>;<\/span>
                                                                                                                                            \n es.<\/span>close<\/span>(<\/span>)<\/span>;<\/span> setTimeout<\/span>(<\/span>connectSSE,<\/span> 3000<\/span>)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n connectSSE<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                                                                                                                                            \/\/ ———- WebSocket ———-<\/span>
                                                                                                                                            \n const<\/span> log =<\/span> document.<\/span>getElementById<\/span>(<\/span>'ws-log'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n let<\/span> logCount =<\/span> 0<\/span>;<\/span>
                                                                                                                                            \n const<\/span> wsLog<\/span> =<\/span> (<\/span>m,<\/span> dir<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n const<\/span> line =<\/span> (<\/span>typeof<\/span> m ===<\/span> 'string'<\/span> ?<\/span> m :<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>m)<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> arrow =<\/span> dir ===<\/span> 'out'<\/span> ?<\/span> '<span class="arrow-out">\u2192<\/span>'<\/span> :<\/span> '<span class="arrow-in">\u2190<\/span>'<\/span>;<\/span>
                                                                                                                                            \n \/\/ \u9ad8\u4eae type \u5b57\u6bb5<\/span>
                                                                                                                                            \n const<\/span> colored =<\/span> line.<\/span>replace<\/span>(<\/span>\/<\/span>"type":"([^"]+)"<\/span>\/<\/span>g<\/span><\/span>,<\/span> '"type":"<span class="type">$1<\/span>"'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n log.<\/span>innerHTML =<\/span> `<\/span>${<\/span>arrow}<\/span><\/span> <\/span>${<\/span>colored}<\/span><\/span>\\\\n<\/span>`<\/span><\/span> +<\/span> log.<\/span>innerHTML.<\/span>split<\/span>(<\/span>'\\\\n'<\/span>)<\/span>.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> 40<\/span>)<\/span>.<\/span>join<\/span>(<\/span>'\\\\n'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n logCount++<\/span>;<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'ws-log-count'<\/span>)<\/span>.<\/span>textContent =<\/span> logCount +<\/span> ' \u6761'<\/span>;<\/span>
                                                                                                                                            \n }<\/span>;<\/span>
                                                                                                                                            \n function<\/span> connectWS<\/span>(<\/span>)<\/span> {<\/span>
                                                                                                                                            \n const<\/span> proto =<\/span> location.<\/span>protocol ===<\/span> 'https:'<\/span> ?<\/span> 'wss'<\/span> :<\/span> 'ws'<\/span>;<\/span>
                                                                                                                                            \n const<\/span> ws =<\/span> new<\/span> WebSocket<\/span>(<\/span>`<\/span>${<\/span>proto}<\/span><\/span>:\/\/<\/span>${<\/span>location.<\/span>host}<\/span><\/span>\/ws\/orders<\/span>`<\/span><\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> status =<\/span> document.<\/span>getElementById<\/span>(<\/span>'ws-status'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> dot =<\/span> document.<\/span>getElementById<\/span>(<\/span>'ws-dot'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n const<\/span> box =<\/span> document.<\/span>getElementById<\/span>(<\/span>'ws-orders'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n ws.<\/span>onopen<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> status.<\/span>textContent =<\/span> 'WS: \u5df2\u8fde\u63a5'<\/span>;<\/span> dot.<\/span>className =<\/span> 'dot live'<\/span>;<\/span> }<\/span>;<\/span>
                                                                                                                                            \n ws.<\/span>onmessage<\/span> =<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n const<\/span> msg =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                            \n wsLog<\/span>(<\/span>msg,<\/span> 'in'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n if<\/span> (<\/span>msg.<\/span>type ===<\/span> 'hello'<\/span> ||<\/span> msg.<\/span>type ===<\/span> 'snapshot'<\/span>)<\/span> {<\/span>
                                                                                                                                            \n renderOrders<\/span>(<\/span>box,<\/span> msg.<\/span>orders ||<\/span> [<\/span>]<\/span>)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n }<\/span>;<\/span>
                                                                                                                                            \n ws.<\/span>onclose<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> status.<\/span>textContent =<\/span> 'WS: \u65ad\u5f00, 3s \u540e\u91cd\u8fde'<\/span>;<\/span> dot.<\/span>className =<\/span> 'dot off'<\/span>;<\/span> setTimeout<\/span>(<\/span>connectWS,<\/span> 3000<\/span>)<\/span>;<\/span> }<\/span>;<\/span>
                                                                                                                                            \n window.<\/span>_ws =<\/span> ws;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n connectWS<\/span>(<\/span>)<\/span>;<\/span>
                                                                                                                                            \n function<\/span> sendCmd<\/span>(<\/span>obj<\/span>)<\/span> {<\/span>
                                                                                                                                            \n const<\/span> ws =<\/span> window.<\/span>_ws;<\/span>
                                                                                                                                            \n if<\/span> (<\/span>!<\/span>ws ||<\/span> ws.<\/span>readyState !==<\/span> 1<\/span>)<\/span> return<\/span>;<\/span>
                                                                                                                                            \n ws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>obj)<\/span>)<\/span>;<\/span>
                                                                                                                                            \n wsLog<\/span>(<\/span>obj,<\/span> 'out'<\/span>)<\/span>;<\/span>
                                                                                                                                            \n }<\/span>
                                                                                                                                            \n document.<\/span>getElementById<\/span>(<\/span>'cmd'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'keydown'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                            \n if<\/span> (<\/span>e.<\/span>key ===<\/span> 'Enter'<\/span>)<\/span> {<\/span> try<\/span> {<\/span> sendCmd<\/span>(<\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>)<\/span>;<\/span> }<\/span> catch<\/span> (<\/span>_)<\/span> {<\/span>}<\/span> }<\/span>
                                                                                                                                            \n }<\/span>)<\/span>;<\/span>
                                                                                                                                            \n<\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>body<\/span>><\/span><\/span>
                                                                                                                                            \n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

                                                                                                                                            \n

                                                                                                                                            7.2 \u4ee3\u7801\u7ed3\u6784\u603b\u89c8<\/h3>\n

                                                                                                                                            index.html
                                                                                                                                            \n\u251c\u2500\u2500 <head>
                                                                                                                                            \n\u2502 \u251c\u2500\u2500 <meta> \u7f16\u7801\/\u89c6\u53e3
                                                                                                                                            \n\u2502 \u2514\u2500\u2500 <style> \u5168\u90e8 CSS（\u8bbe\u8ba1\u53d8\u91cf + \u5404\u533a\u5757\u6837\u5f0f）
                                                                                                                                            \n\u251c\u2500\u2500 <body>
                                                                                                                                            \n\u2502 \u251c\u2500\u2500 <header> \u6807\u9898 + SSE\/WS \u72b6\u6001\u706f + \u65f6\u949f
                                                                                                                                            \n\u2502 \u251c\u2500\u2500 <div class="stats-bar"> 4 \u4e2a\u7edf\u8ba1 chip
                                                                                                                                            \n\u2502 \u251c\u2500\u2500 <main>
                                                                                                                                            \n\u2502 \u2502 \u251c\u2500\u2500 <section> \u5de6：SSE \u5b9e\u65f6\u8ba2\u5355（\u5361\u7247\u7f51\u683c）
                                                                                                                                            \n\u2502 \u2502 \u2514\u2500\u2500 <section> \u53f3：WS \u64cd\u4f5c\u53f0（\u5361\u7247 + \u8f93\u5165\u6846 + \u6309\u94ae + \u65e5\u5fd7）
                                                                                                                                            \n\u2502 \u2514\u2500\u2500 <script> \u5168\u90e8 JS（\u6e32\u67d3 + SSE \u8fde\u63a5 + WS \u8fde\u63a5 + \u547d\u4ee4\u53d1\u9001）<\/p>\n

                                                                                                                                            7.3 CSS \u8bb2\u89e3（\u8bbe\u8ba1\u53d8\u91cf + \u5173\u952e\u6837\u5f0f）<\/h3>\n

                                                                                                                                            7.3.1 \u8bbe\u8ba1\u53d8\u91cf :root<\/h4>\n

                                                                                                                                            :root<\/span> {<\/span>
                                                                                                                                            \n –bg<\/span>:<\/span> #faf3e8;<\/span>
                                                                                                                                            \n –accent<\/span>:<\/span> #ff7043;<\/span>
                                                                                                                                            \n –tea<\/span>:<\/span> #ff8a65;<\/span>
                                                                                                                                            \n …
                                                                                                                                            \n}<\/span><\/p>\n

                                                                                                                                              \n
                                                                                                                                            • \u628a\u6240\u6709\u989c\u8272\u3001\u5706\u89d2\u62bd\u6210 CSS \u53d8\u91cf，\u7edf\u4e00\u7ba1\u7406\u300c\u5976\u8336\u6696\u8272\u8c03\u300d\u4e3b\u9898；<\/li>\n
                                                                                                                                            • \u6539\u4e3b\u9898\u53ea\u8981\u52a8 :root \u91cc\u7684\u503c，\u4e0d\u7528\u5168\u5c40\u641c\u66ff\u6362\u3002<\/li>\n<\/ul>\n

                                                                                                                                              7.3.2 \u5173\u952e\u6837\u5f0f<\/h4>\n
                                                                                                                                                \n
                                                                                                                                              • .badge .dot.live：\u8fde\u63a5\u6210\u529f\u65f6\u5c0f\u7eff\u70b9 + pulse \u52a8\u753b（\u900f\u660e\u5ea6\u95ea\u70c1），\u8868\u793a\u300c\u6d3b\u7740\u300d；<\/li>\n
                                                                                                                                              • .card::before：\u6bcf\u5f20\u8ba2\u5355\u5361\u7247\u5de6\u4fa7 4px \u8272\u6761，\u989c\u8272\u968f\u72b6\u6001\u53d8（\u9ed8\u8ba4\u6a59\u3001s-done \u7eff\u3001s-picked \u7070）；<\/li>\n
                                                                                                                                              • .s-\u5236\u4f5c\u4e2d::before：\u5236\u4f5c\u4e2d\u7684\u72b6\u6001\u70b9\u4e5f\u6709 pulse \u52a8\u753b，\u89c6\u89c9\u4e0a\u300c\u5728\u52a8\u300d；<\/li>\n
                                                                                                                                              • .bar > div：\u8fdb\u5ea6\u6761，transition: width .5s \u8ba9\u8fdb\u5ea6\u53d8\u5316\u6709\u5e73\u6ed1\u8fc7\u6e21；<\/li>\n
                                                                                                                                              • @keyframes cardIn：\u8ba2\u5355\u5361\u7247\u5165\u573a\u52a8\u753b（\u6de1\u5165 + \u4e0a\u79fb），\u65b0\u589e\u8ba2\u5355\u6709\u300c\u5192\u51fa\u6765\u300d\u7684\u611f\u89c9；<\/li>\n
                                                                                                                                              • @media (max-width: 880px)：\u7a84\u5c4f\u65f6\u4e3b\u4f53\u53d8\u5355\u5217\u3001\u7edf\u8ba1\u6761\u6362\u884c，\u54cd\u5e94\u5f0f\u3002<\/li>\n<\/ul>\n

                                                                                                                                                7.4 HTML \u8bb2\u89e3（\u5173\u952e id）<\/h3>\n

                                                                                                                                                \u9875\u9762\u91cc\u5f88\u591a\u5143\u7d20\u5e26 id，JS \u9760\u8fd9\u4e9b id \u64cd\u4f5c\u5b83\u4eec：<\/p>\n\nid\u4f5c\u7528<\/tr>\n\n\n\n\n\n\n\n\n\n\n
                                                                                                                                                sse-dot \/ sse-status<\/td>\nSSE \u8fde\u63a5\u72b6\u6001\u706f \/ \u6587\u5b57<\/td>\n<\/tr>\n
                                                                                                                                                ws-dot \/ ws-status<\/td>\nWS \u8fde\u63a5\u72b6\u6001\u706f \/ \u6587\u5b57<\/td>\n<\/tr>\n
                                                                                                                                                clock<\/td>\n\u9876\u90e8\u5b9e\u65f6\u65f6\u949f<\/td>\n<\/tr>\n
                                                                                                                                                stat-total\/making\/done\/picked<\/td>\n4 \u4e2a\u7edf\u8ba1\u6570\u5b57<\/td>\n<\/tr>\n
                                                                                                                                                sse-orders<\/td>\n\u5de6\u4fa7 SSE \u8ba2\u5355\u5361\u7247\u5bb9\u5668<\/td>\n<\/tr>\n
                                                                                                                                                sse-meta<\/td>\nSSE \u83dc\u5355\u4fe1\u606f\u884c<\/td>\n<\/tr>\n
                                                                                                                                                ws-orders<\/td>\n\u53f3\u4fa7 WS \u8ba2\u5355\u5361\u7247\u5bb9\u5668<\/td>\n<\/tr>\n
                                                                                                                                                cmd<\/td>\n\u547d\u4ee4\u8f93\u5165\u6846<\/td>\n<\/tr>\n
                                                                                                                                                ws-log \/ ws-log-count<\/td>\n\u901a\u4fe1\u65e5\u5fd7 \/ \u65e5\u5fd7\u6761\u6570<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                                                                \u4e09\u4e2a\u6309\u94ae\u7528\u5185\u8054 onclick='sendCmd({cmd:"ping"})' \u76f4\u63a5\u8c03 JS \u51fd\u6570，\u7701\u4e8b\u3002<\/p>\n

                                                                                                                                                7.5 JS \u8bb2\u89e3（\u6838\u5fc3\u903b\u8f91）<\/h3>\n

                                                                                                                                                7.5.1 \u6e32\u67d3\u51fd\u6570 renderOrders<\/h4>\n

                                                                                                                                                const<\/span> renderOrders<\/span> =<\/span> (<\/span>el,<\/span> list<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                \n if<\/span> (<\/span>!<\/span>list ||<\/span> !<\/span>list.<\/span>length)<\/span> {<\/span> el.<\/span>innerHTML =<\/span> '…\u6682\u65e0\u8ba2\u5355…'<\/span>;<\/span> updateStats<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span> return<\/span>;<\/span> }<\/span>
                                                                                                                                                \n el.<\/span>innerHTML =<\/span> list.<\/span>map<\/span>(<\/span>o<\/span> =><\/span> `<\/span>
                                                                                                                                                \n <div class="card <\/span>${<\/span>STATUS_CARD<\/span>[<\/span>o.<\/span>status]<\/span> ||<\/span> ''<\/span>}<\/span><\/span>">
                                                                                                                                                \n <span class="id">#<\/span>${<\/span>o.<\/span>id}<\/span><\/span><\/span>
                                                                                                                                                \n <h3><\/span>${<\/span>o.<\/span>drink}<\/span><\/span><\/h3>
                                                                                                                                                \n …
                                                                                                                                                \n <div class="bar"><div style="width:<\/span>${<\/span>o.<\/span>progress}<\/span><\/span>%"><\/div><\/div>
                                                                                                                                                \n <span class="status <\/span>${<\/span>STATUS_CLASS<\/span>[<\/span>o.<\/span>status]<\/span> ||<\/span> ''<\/span>}<\/span><\/span>"><\/span>${<\/span>o.<\/span>status}<\/span><\/span><\/span>
                                                                                                                                                \n <\/div>
                                                                                                                                                \n <\/span>`<\/span><\/span>)<\/span>.<\/span>join<\/span>(<\/span>''<\/span>)<\/span>;<\/span>
                                                                                                                                                \n updateStats<\/span>(<\/span>list)<\/span>;<\/span>
                                                                                                                                                \n}<\/span>;<\/span><\/p>\n

                                                                                                                                                  \n
                                                                                                                                                • \u63a5\u6536\u4e00\u4e2a DOM \u5143\u7d20\u548c\u8ba2\u5355\u6570\u7ec4，\u7528 map \u628a\u6bcf\u4e2a\u8ba2\u5355\u62fc\u6210\u5361\u7247 HTML \u5b57\u7b26\u4e32，\u6700\u540e join('') \u4e00\u6b21\u6027\u8d4b\u7ed9 innerHTML；<\/li>\n
                                                                                                                                                • STATUS_CLASS \/ STATUS_CARD \u662f\u72b6\u6001\u2192CSS \u7c7b\u7684\u6620\u5c04\u8868，\u7ed9\u5361\u7247\u52a0\u72b6\u6001\u8272；<\/li>\n
                                                                                                                                                • \u6bcf\u6b21\u6e32\u67d3\u90fd\u8c03 updateStats \u66f4\u65b0\u9876\u90e8\u7edf\u8ba1\u3002<\/li>\n<\/ul>\n

                                                                                                                                                  \u8fd9\u79cd\u300c\u6bcf\u6b21\u5168\u91cf\u91cd\u6e32\u67d3\u300d\u5bf9\u51e0\u5341\u4e2a\u8ba2\u5355\u5b8c\u5168\u6ca1\u95ee\u9898，\u7b80\u5355\u76f4\u63a5\u3002\u8ba2\u5355\u91cf\u5927\u65f6\u53ef\u6539\u6210 diff \u66f4\u65b0\u3002<\/p>\n

                                                                                                                                                  7.5.2 SSE \u8fde\u63a5 connectSSE<\/h4>\n

                                                                                                                                                  function<\/span> connectSSE<\/span>(<\/span>)<\/span> {<\/span>
                                                                                                                                                  \n const<\/span> es =<\/span> new<\/span> EventSource<\/span>(<\/span>'\/sse\/orders'<\/span>)<\/span>;<\/span>
                                                                                                                                                  \n es.<\/span>addEventListener<\/span>(<\/span>'hello'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'sse-status'<\/span>)<\/span>.<\/span>textContent =<\/span> 'SSE: \u5df2\u8fde\u63a5'<\/span>;<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'sse-dot'<\/span>)<\/span>.<\/span>className =<\/span> 'dot live'<\/span>;<\/span>
                                                                                                                                                  \n const<\/span> info =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'sse-meta'<\/span>)<\/span>.<\/span>textContent =<\/span> '\u83dc\u5355: '<\/span> +<\/span> info.<\/span>menu.<\/span>join<\/span>(<\/span>' \/ '<\/span>)<\/span>;<\/span>
                                                                                                                                                  \n }<\/span>)<\/span>;<\/span>
                                                                                                                                                  \n es.<\/span>addEventListener<\/span>(<\/span>'orders'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                  \n const<\/span> {<\/span> time,<\/span> orders }<\/span> =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                                  \n renderOrders<\/span>(<\/span>box,<\/span> orders)<\/span>;<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'clock'<\/span>)<\/span>.<\/span>textContent =<\/span> fmtTime<\/span>(<\/span>time)<\/span>;<\/span>
                                                                                                                                                  \n }<\/span>)<\/span>;<\/span>
                                                                                                                                                  \n es.<\/span>onerror<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'sse-status'<\/span>)<\/span>.<\/span>textContent =<\/span> 'SSE: \u65ad\u5f00, 3s \u540e\u91cd\u8fde'<\/span>;<\/span>
                                                                                                                                                  \n document.<\/span>getElementById<\/span>(<\/span>'sse-dot'<\/span>)<\/span>.<\/span>className =<\/span> 'dot off'<\/span>;<\/span>
                                                                                                                                                  \n es.<\/span>close<\/span>(<\/span>)<\/span>;<\/span> setTimeout<\/span>(<\/span>connectSSE,<\/span> 3000<\/span>)<\/span>;<\/span>
                                                                                                                                                  \n }<\/span>;<\/span>
                                                                                                                                                  \n}<\/span>
                                                                                                                                                  \nconnectSSE<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                                                                                                                                                    \n
                                                                                                                                                  • new EventSource('\/sse\/orders')：\u5efa\u7acb SSE \u8fde\u63a5\u3002\u6d4f\u89c8\u5668\u81ea\u52a8\u5904\u7406\u91cd\u8fde，\u4f46\u8fd9\u91cc\u6211\u4eec\u624b\u52a8\u91cd\u8fde\u2014\u2014\u4e3a\u4e86\u80fd\u5728\u65ad\u5f00\u65f6\u66f4\u65b0\u72b6\u6001\u706f；<\/li>\n
                                                                                                                                                  • addEventListener('hello', …)：\u76d1\u542c\u670d\u52a1\u5668\u53d1\u7684 hello \u4e8b\u4ef6（event: hello \u5e27），\u6536\u5230\u5c31\u628a\u72b6\u6001\u706f\u53d8\u7eff\u3001\u663e\u793a\u83dc\u5355；<\/li>\n
                                                                                                                                                  • addEventListener('orders', …)：\u76d1\u542c orders \u4e8b\u4ef6，\u6bcf\u6b21\u6536\u5230\u5c31\u6e32\u67d3\u8ba2\u5355\u5361\u7247 + \u66f4\u65b0\u65f6\u949f；<\/li>\n
                                                                                                                                                  • onerror：\u51fa\u9519\u65f6\u624b\u52a8 close + 3 \u79d2\u540e\u91cd\u8fde，\u5e76\u628a\u72b6\u6001\u706f\u53d8\u7ea2\u3002<\/li>\n<\/ul>\n

                                                                                                                                                    \u6ce8\u610f：EventSource \u672c\u8eab\u6709\u81ea\u52a8\u91cd\u8fde，\u4f46\u914d\u5408\u624b\u52a8 close + setTimeout \u80fd\u66f4\u597d\u63a7\u5236\u72b6\u6001\u663e\u793a\u3002\u8fd9\u91cc\u4e24\u8005\u7ed3\u5408\u3002<\/p>\n

                                                                                                                                                    7.5.3 WS \u8fde\u63a5 connectWS<\/h4>\n

                                                                                                                                                    function<\/span> connectWS<\/span>(<\/span>)<\/span> {<\/span>
                                                                                                                                                    \n const<\/span> proto =<\/span> location.<\/span>protocol ===<\/span> 'https:'<\/span> ?<\/span> 'wss'<\/span> :<\/span> 'ws'<\/span>;<\/span>
                                                                                                                                                    \n const<\/span> ws =<\/span> new<\/span> WebSocket<\/span>(<\/span>`<\/span>${<\/span>proto}<\/span><\/span>:\/\/<\/span>${<\/span>location.<\/span>host}<\/span><\/span>\/ws\/orders<\/span>`<\/span><\/span>)<\/span>;<\/span>
                                                                                                                                                    \n ws.<\/span>onopen<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> status.<\/span>textContent =<\/span> 'WS: \u5df2\u8fde\u63a5'<\/span>;<\/span> dot.<\/span>className =<\/span> 'dot live'<\/span>;<\/span> }<\/span>;<\/span>
                                                                                                                                                    \n ws.<\/span>onmessage<\/span> =<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                    \n const<\/span> msg =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>;<\/span>
                                                                                                                                                    \n wsLog<\/span>(<\/span>msg,<\/span> 'in'<\/span>)<\/span>;<\/span>
                                                                                                                                                    \n if<\/span> (<\/span>msg.<\/span>type ===<\/span> 'hello'<\/span> ||<\/span> msg.<\/span>type ===<\/span> 'snapshot'<\/span>)<\/span> {<\/span>
                                                                                                                                                    \n renderOrders<\/span>(<\/span>box,<\/span> msg.<\/span>orders ||<\/span> [<\/span>]<\/span>)<\/span>;<\/span>
                                                                                                                                                    \n }<\/span>
                                                                                                                                                    \n }<\/span>;<\/span>
                                                                                                                                                    \n ws.<\/span>onclose<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span> status.<\/span>textContent =<\/span> 'WS: \u65ad\u5f00, 3s \u540e\u91cd\u8fde'<\/span>;<\/span> dot.<\/span>className =<\/span> 'dot off'<\/span>;<\/span> setTimeout<\/span>(<\/span>connectWS,<\/span> 3000<\/span>)<\/span>;<\/span> }<\/span>;<\/span>
                                                                                                                                                    \n window.<\/span>_ws =<\/span> ws;<\/span>
                                                                                                                                                    \n}<\/span>
                                                                                                                                                    \nconnectWS<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                                                                                                                                                      \n
                                                                                                                                                    • location.protocol \u5224\u65ad\u5f53\u524d\u662f http \u8fd8\u662f https，\u5bf9\u5e94\u7528 ws:\/\/ \u6216 wss:\/\/（\u52a0\u5bc6）；<\/li>\n
                                                                                                                                                    • onopen：\u8fde\u4e0a\u540e\u72b6\u6001\u706f\u53d8\u7eff；<\/li>\n
                                                                                                                                                    • onmessage：\u6bcf\u6536\u5230\u4e00\u6761\u6d88\u606f：\u2460 \u5199\u8fdb\u65e5\u5fd7 wsLog(msg, 'in')；\u2461 \u5982\u679c\u662f hello \u6216 snapshot（\u5e26 orders），\u6e32\u67d3\u53f3\u4fa7\u8ba2\u5355\u5361\u7247；<\/li>\n
                                                                                                                                                    • onclose：WebSocket \u4e0d\u81ea\u52a8\u91cd\u8fde，\u5fc5\u987b\u81ea\u5df1\u5904\u7406\u2014\u20143 \u79d2\u540e\u91cd\u8fde；<\/li>\n
                                                                                                                                                    • window._ws = ws：\u628a\u8fde\u63a5\u5bf9\u8c61\u5b58\u5230\u5168\u5c40，sendCmd \u51fd\u6570\u8981\u7528\u3002<\/li>\n<\/ul>\n

                                                                                                                                                      \u4e3a\u4ec0\u4e48 onmessage \u91cc\u53ea\u5904\u7406 hello\/snapshot？\u56e0\u4e3a\u5e7f\u64ad\u5668\u63a8\u7684\u8ba2\u5355\u66f4\u65b0（\u6bcf 0.8s）\u6ca1\u6709 type \u5b57\u6bb5（\u7eaf\u5feb\u7167），\u53f3\u4fa7\u8ba2\u5355\u5361\u7247\u4e3b\u8981\u9760 hello \u521d\u59cb\u6e32\u67d3 + \u547d\u4ee4\u56de\u6267\u5237\u65b0\u3002\u8ba2\u5355\u7684\u5b9e\u65f6\u66f4\u65b0\u7531\u5de6\u4fa7 SSE \u8d1f\u8d23，\u53f3\u4fa7 WS \u4fa7\u91cd\u5c55\u793a\u300c\u547d\u4ee4\u4ea4\u4e92\u300d\u3002\u8fd9\u662f\u9879\u76ee\u7684\u5206\u5de5\u8bbe\u8ba1\u3002<\/p>\n

                                                                                                                                                      7.5.4 \u53d1\u547d\u4ee4 sendCmd + \u65e5\u5fd7 wsLog<\/h4>\n

                                                                                                                                                      function<\/span> sendCmd<\/span>(<\/span>obj<\/span>)<\/span> {<\/span>
                                                                                                                                                      \n const<\/span> ws =<\/span> window.<\/span>_ws;<\/span>
                                                                                                                                                      \n if<\/span> (<\/span>!<\/span>ws ||<\/span> ws.<\/span>readyState !==<\/span> 1<\/span>)<\/span> return<\/span>;<\/span> \/\/ 1 = OPEN<\/span>
                                                                                                                                                      \n ws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>obj)<\/span>)<\/span>;<\/span>
                                                                                                                                                      \n wsLog<\/span>(<\/span>obj,<\/span> 'out'<\/span>)<\/span>;<\/span>
                                                                                                                                                      \n}<\/span><\/p>\n

                                                                                                                                                        \n
                                                                                                                                                      • \u6309\u94ae\u70b9\u51fb\u6216\u8f93\u5165\u6846\u56de\u8f66\u65f6\u8c03\u7528；<\/li>\n
                                                                                                                                                      • ws.readyState !== 1：\u8fde\u63a5\u4e0d\u662f OPEN \u72b6\u6001\u5c31\u5ffd\u7565（\u9632\u6b62\u6ca1\u8fde\u4e0a\u65f6\u53d1）；<\/li>\n
                                                                                                                                                      • \u53d1\u9001\u540e\u628a\u547d\u4ee4\u4e5f\u5199\u8fdb\u65e5\u5fd7（dir='out'，\u7528 \u2192 \u7bad\u5934）\u3002<\/li>\n<\/ul>\n

                                                                                                                                                        const<\/span> wsLog<\/span> =<\/span> (<\/span>m,<\/span> dir<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                        \n const<\/span> line =<\/span> (<\/span>typeof<\/span> m ===<\/span> 'string'<\/span> ?<\/span> m :<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>m)<\/span>)<\/span>;<\/span>
                                                                                                                                                        \n const<\/span> arrow =<\/span> dir ===<\/span> 'out'<\/span> ?<\/span> '<span class="arrow-out">\u2192<\/span>'<\/span> :<\/span> '<span class="arrow-in">\u2190<\/span>'<\/span>;<\/span>
                                                                                                                                                        \n const<\/span> colored =<\/span> line.<\/span>replace<\/span>(<\/span>\/<\/span>"type":"([^"]+)"<\/span>\/<\/span>g<\/span><\/span>,<\/span> '"type":"<span class="type">$1<\/span>"'<\/span>)<\/span>;<\/span>
                                                                                                                                                        \n log.<\/span>innerHTML =<\/span> `<\/span>${<\/span>arrow}<\/span><\/span> <\/span>${<\/span>colored}<\/span><\/span>\\\\n<\/span>`<\/span><\/span> +<\/span> log.<\/span>innerHTML.<\/span>split<\/span>(<\/span>'\\\\n'<\/span>)<\/span>.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> 40<\/span>)<\/span>.<\/span>join<\/span>(<\/span>'\\\\n'<\/span>)<\/span>;<\/span>
                                                                                                                                                        \n logCount++<\/span>;<\/span>
                                                                                                                                                        \n document.<\/span>getElementById<\/span>(<\/span>'ws-log-count'<\/span>)<\/span>.<\/span>textContent =<\/span> logCount +<\/span> ' \u6761'<\/span>;<\/span>
                                                                                                                                                        \n}<\/span>;<\/span><\/p>\n

                                                                                                                                                          \n
                                                                                                                                                        • \u628a\u6d88\u606f\u683c\u5f0f\u5316\u6210\u4e00\u884c，\u524d\u9762\u52a0\u7bad\u5934（\u2192 \u53d1\u51fa \/ \u2190 \u6536\u5230）；<\/li>\n
                                                                                                                                                        • \u7528\u6b63\u5219\u628a "type":"xxx" \u91cc\u7684 xxx \u9ad8\u4eae\u6210\u84dd\u8272，\u65b9\u4fbf\u770b\u6d88\u606f\u7c7b\u578b；<\/li>\n
                                                                                                                                                        • \u65b0\u65e5\u5fd7\u63d2\u5728\u6700\u4e0a\u9762，\u6700\u591a\u4fdd\u7559 40 \u884c（slice(0, 40)），\u9632\u6b62\u65e0\u9650\u589e\u957f；<\/li>\n
                                                                                                                                                        • \u66f4\u65b0\u65e5\u5fd7\u6761\u6570\u8ba1\u6570\u3002<\/li>\n<\/ul>\n

                                                                                                                                                          7.5.5 \u8f93\u5165\u6846\u56de\u8f66\u53d1\u547d\u4ee4<\/h4>\n

                                                                                                                                                          document.<\/span>getElementById<\/span>(<\/span>'cmd'<\/span>)<\/span>.<\/span>addEventListener<\/span>(<\/span>'keydown'<\/span>,<\/span> (<\/span>e<\/span>)<\/span> =><\/span> {<\/span>
                                                                                                                                                          \n if<\/span> (<\/span>e.<\/span>key ===<\/span> 'Enter'<\/span>)<\/span> {<\/span> try<\/span> {<\/span> sendCmd<\/span>(<\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>target.<\/span>value)<\/span>)<\/span>;<\/span> }<\/span> catch<\/span> (<\/span>_)<\/span> {<\/span>}<\/span> }<\/span>
                                                                                                                                                          \n}<\/span>)<\/span>;<\/span><\/p>\n

                                                                                                                                                            \n
                                                                                                                                                          • \u5728\u8f93\u5165\u6846\u91cc\u6572 {"cmd":"pickup","arg":3} \u7136\u540e\u56de\u8f66，\u4f1a JSON.parse \u540e\u53d1\u9001；<\/li>\n
                                                                                                                                                          • try\/catch \u9632\u6b62 JSON \u683c\u5f0f\u9519\u65f6\u9875\u9762\u62a5\u9519（\u9759\u9ed8\u5ffd\u7565）\u3002<\/li>\n<\/ul>\n

                                                                                                                                                            7.6 SSE \u4e0e WS \u5728\u524d\u7aef\u7684\u5206\u5de5<\/h3>\n\n\u529f\u80fd\u7528\u8c01\u4e3a\u4ec0\u4e48<\/tr>\n\n\n\n\n\n\n
                                                                                                                                                            \u5b9e\u65f6\u8ba2\u5355\u5237\u65b0（\u6bcf 0.8s）<\/td>\nSSE<\/td>\n\u5355\u5411\u63a8\u9001，\u6700\u7b80\u5355<\/td>\n<\/tr>\n
                                                                                                                                                            \u5b9e\u65f6\u65f6\u949f<\/td>\nSSE（orders \u5e27\u5e26 time）<\/td>\n\u987a\u5e26<\/td>\n<\/tr>\n
                                                                                                                                                            \u83dc\u5355\u663e\u793a<\/td>\nSSE（hello）+ WS（hello）<\/td>\n\u4e24\u8fb9\u5404\u81ea\u5c55\u793a<\/td>\n<\/tr>\n
                                                                                                                                                            ping \/ add \/ pickup \/ snapshot<\/td>\nWS<\/td>\n\u9700\u8981\u53cc\u5411<\/td>\n<\/tr>\n
                                                                                                                                                            \u901a\u4fe1\u65e5\u5fd7\u5c55\u793a<\/td>\nWS<\/td>\n\u5c55\u793a WS \u7684\u6536\u53d1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                                                                            7.7 \u52a8\u624b\u9a8c\u8bc1<\/h3>\n

                                                                                                                                                            \u5199\u5b8c index.html，\u542f\u52a8\u670d\u52a1（\u7b2c 6 \u7ae0\u7684\u547d\u4ee4），\u6d4f\u89c8\u5668\u6253\u5f00 http:\/\/127.0.0.1:8000\/：<\/p>\n

                                                                                                                                                              \n
                                                                                                                                                            • \u9876\u90e8 SSE \/ WS \u72b6\u6001\u706f\u5e94\u5728 1 \u79d2\u5185\u53d8\u7eff\u3001\u65f6\u949f\u5f00\u59cb\u8d70；<\/li>\n
                                                                                                                                                            • \u5de6\u4fa7\u300c\u5b9e\u65f6\u8ba2\u5355\u300d\u6bcf 0.8s \u5237\u65b0，\u8ba2\u5355\u5361\u7247\u8d8a\u6765\u8d8a\u591a\u3001\u8fdb\u5ea6\u6761\u5728\u6da8；<\/li>\n
                                                                                                                                                            • \u70b9\u53f3\u4fa7 📡 ping：\u65e5\u5fd7\u51fa\u73b0 \u2192 {cmd:ping} \u548c \u2190 {type:pong,…}；<\/li>\n
                                                                                                                                                            • \u70b9 \u2795 \u52a0\u5355：\u65e5\u5fd7\u51fa\u73b0 \u2192 {cmd:add} \u548c \u2190 {type:added,…}，\u53f3\u4fa7\u8ba2\u5355\u5217\u8868\u591a\u4e00\u5f20\u5361；<\/li>\n
                                                                                                                                                            • \u70b9 📸 snapshot：\u65e5\u5fd7\u51fa\u73b0 \u2192 {cmd:snapshot} \u548c \u2190 {type:snapshot,…}，\u53f3\u4fa7\u8ba2\u5355\u5237\u65b0；<\/li>\n
                                                                                                                                                            • \u5728\u8f93\u5165\u6846\u6572 {"cmd":"pickup","arg":<\u67d0\u4e2a\u5df2\u5b8c\u6210\u7684id>} \u56de\u8f66：\u8be5\u8ba2\u5355\u53d8\u6210\u300c\u5df2\u53d6\u9910\u300d\u3002<\/li>\n<\/ul>\n

                                                                                                                                                              \u5b8c\u6574\u6548\u679c\u622a\u56fe\u89c1 08-\u8fd0\u884c\u4e0e\u9a8c\u8bc1.md\u3002<\/p>\n

                                                                                                                                                              \n

                                                                                                                                                              \u4e0b\u4e00\u7ae0 \u2192 08-\u8fd0\u884c\u4e0e\u9a8c\u8bc1.md：\u5b8c\u6574\u8fd0\u884c\u6b65\u9aa4 + \u9a8c\u8bc1\u6e05\u5355 + \u8fd0\u884c\u622a\u56fe + \u5e38\u89c1\u95ee\u9898\u3002<\/p>\n

                                                                                                                                                              \n

                                                                                                                                                              \u7b2c 8 \u7ae0 \u00b7 \u8fd0\u884c\u4e0e\u9a8c\u8bc1<\/h2>\n

                                                                                                                                                              \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                                                                                                              \u628a\u6240\u6709\u6587\u4ef6\u7ec4\u88c5\u597d\u3001\u542f\u52a8\u670d\u52a1\u3001\u9010\u4e00\u9a8c\u8bc1\u529f\u80fd\u3002\u672c\u7ae0\u7ed9\u51fa：<\/p>\n

                                                                                                                                                                \n
                                                                                                                                                              • \u5b8c\u6574\u8fd0\u884c\u6b65\u9aa4（\u4e24\u79cd\u542f\u52a8\u65b9\u5f0f）；<\/li>\n
                                                                                                                                                              • \u542f\u52a8\u540e\u5e94\u770b\u5230\u4ec0\u4e48（\u542b\u9879\u76ee\u8fd0\u884c\u622a\u56fe）；<\/li>\n
                                                                                                                                                              • \u529f\u80fd\u9a8c\u8bc1\u6e05\u5355（\u9010\u6761\u52fe\u9009）；<\/li>\n
                                                                                                                                                              • \u5e38\u89c1\u95ee\u9898\u4e0e\u89e3\u51b3\u529e\u6cd5\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                \u5047\u8bbe\u4f60\u5df2\u7ecf\u6309\u7b2c 1～7 \u7ae0\u987a\u5e8f\u5199\u5b8c\u6240\u6709\u6587\u4ef6\u3002\u5f53\u524d\u76ee\u5f55\u7ed3\u6784\u5e94\u662f：<\/p>\n

                                                                                                                                                                fastapi-sse-ws-\u5976\u8336\u770b\u677f\/
                                                                                                                                                                \n\u251c\u2500\u2500 pyproject.toml .python-version .gitignore uv.lock
                                                                                                                                                                \n\u251c\u2500\u2500 src\/ __init__.py app.py broadcaster.py models.py sse.py ws.py
                                                                                                                                                                \n\u2514\u2500\u2500 static\/ index.html<\/p>\n

                                                                                                                                                                \n

                                                                                                                                                                8.1 \u542f\u52a8\u670d\u52a1<\/h3>\n

                                                                                                                                                                \u65b9\u5f0f A：\u547d\u4ee4\u884c（\u63a8\u8350）<\/h4>\n

                                                                                                                                                                \u5728\u9879\u76ee\u6839\u76ee\u5f55\u6267\u884c：<\/p>\n

                                                                                                                                                                uv run python -m<\/span> uvicorn src.app:app –host<\/span> 127.0<\/span>.0.1 –port<\/span> 8000<\/span> –reload<\/span><\/p>\n

                                                                                                                                                                \u7528 pip \u7684\u8bdd（\u5148 pip install fastapi "uvicorn[standard]" websockets）：<\/p>\n

                                                                                                                                                                python -m<\/span> uvicorn src.app:app –host<\/span> 127.0<\/span>.0.1 –port<\/span> 8000<\/span> –reload<\/span><\/p>\n

                                                                                                                                                                \u542f\u52a8\u6210\u529f\u7684\u7ec8\u7aef\u8f93\u51fa：<\/p>\n

                                                                                                                                                                INFO: Will watch for changes in these directories: ['…\u9879\u76ee\u6839']
                                                                                                                                                                \nINFO: Uvicorn running on http:\/\/127.0.0.1:8000 (Press CTRL+C to quit)
                                                                                                                                                                \nINFO: Started reloader process [xxxx] using StatReload
                                                                                                                                                                \nINFO: Started server process [xxxx]
                                                                                                                                                                \nINFO: Waiting for application startup.
                                                                                                                                                                \nINFO: Application startup complete.<\/p>\n

                                                                                                                                                                  \n
                                                                                                                                                                • Application startup complete. \u8868\u793a lifespan \u542f\u52a8\u9636\u6bb5\u8dd1\u5b8c\u4e86，\u5e7f\u64ad\u5668\u5df2\u5728\u540e\u53f0\u8fd0\u884c；<\/li>\n
                                                                                                                                                                • –reload \u8ba9\u4f60\u6539\u4ee3\u7801\u540e\u81ea\u52a8\u91cd\u542f，\u5f00\u53d1\u65f6\u5f88\u65b9\u4fbf；<\/li>\n
                                                                                                                                                                • \u4e0d\u8981\u5173\u95ed\u8fd9\u4e2a\u7ec8\u7aef，\u670d\u52a1\u8981\u4e00\u76f4\u8dd1\u3002\u6309 Ctrl+C \u505c\u6b62\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                  \u65b9\u5f0f B：\u76f4\u63a5\u8fd0\u884c app.py<\/h4>\n

                                                                                                                                                                  \u56e0\u4e3a app.py \u672b\u5c3e\u6709 if __name__ == "__main__"：<\/p>\n

                                                                                                                                                                  uv run python src\/app.py<\/p>\n

                                                                                                                                                                  \u6548\u679c\u548c\u65b9\u5f0f A \u4e00\u6837，\u4f46 reload \u53ea\u5728 app.py \u6539\u52a8\u65f6\u89e6\u53d1（\u5176\u4ed6\u6587\u4ef6\u6539\u52a8\u4e0d\u4f1a），\u5f00\u53d1\u65f6\u4e0d\u5982\u65b9\u5f0f A \u65b9\u4fbf\u3002<\/p>\n

                                                                                                                                                                  \n

                                                                                                                                                                  8.2 \u6253\u5f00\u6d4f\u89c8\u5668\u770b\u6548\u679c<\/h3>\n

                                                                                                                                                                  \u6d4f\u89c8\u5668\u8bbf\u95ee http:\/\/127.0.0.1:8000\/\u3002<\/p>\n

                                                                                                                                                                  \u51e0\u79d2\u5185\u4f60\u5e94\u8be5\u770b\u5230：<\/p>\n

                                                                                                                                                                  \"\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u8fd0\u884c\u622a\u56fe\"<\/p>\n

                                                                                                                                                                  \u9010\u9879\u786e\u8ba4：<\/p>\n

                                                                                                                                                                    \n
                                                                                                                                                                  • \u9876\u90e8\u5bfc\u822a：\u6807\u9898\u300c🧋 \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d+ \u53f3\u4fa7\u4e09\u4e2a\u80f6\u56ca：\n
                                                                                                                                                                      \n
                                                                                                                                                                    • SSE: \u5df2\u8fde\u63a5（\u7eff\u70b9\u95ea\u70c1）<\/li>\n
                                                                                                                                                                    • WS: \u5df2\u8fde\u63a5（\u7eff\u70b9\u95ea\u70c1）<\/li>\n
                                                                                                                                                                    • \u5b9e\u65f6\u65f6\u949f HH:MM:SS（\u6bcf 0.8s \u8df3\u4e00\u6b21）；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                    • \u7edf\u8ba1\u6761：4 \u4e2a\u6570\u5b57\u5361\u7247（\u603b\u8ba2\u5355 \/ \u5236\u4f5c\u4e2d \/ \u5df2\u5b8c\u6210 \/ \u5df2\u53d6\u9910），\u6570\u5b57\u4f1a\u968f\u8ba2\u5355\u53d8\u5316；<\/li>\n
                                                                                                                                                                    • \u5de6\u4fa7\u300c📋 \u5b9e\u65f6\u8ba2\u5355\u300d（\u6807\u7b7e\u300cSSE \u5355\u5411\u63a8\u9001\u300d）：\u8ba2\u5355\u5361\u7247\u7f51\u683c，\u6bcf\u5f20\u5361\u663e\u793a\u996e\u54c1\u540d\u3001\u8336\u5e95\/\u7cd6\u5ea6\/\u51b0\u5ea6\/\u52a0\u6599\/\u4ef7\u683c\u3001\u8fdb\u5ea6\u6761\u3001\u72b6\u6001\u6807\u7b7e\u3001\u4e0b\u5355\u65f6\u95f4\u3002\u6bcf 0.8s \u6574\u4f53\u5237\u65b0\u4e00\u6b21；<\/li>\n
                                                                                                                                                                    • \u53f3\u4fa7\u300c🎛\ufe0f \u5e97\u5458\u64cd\u4f5c\u53f0\u300d（\u6807\u7b7e\u300cWebSocket \u53cc\u5411\u901a\u9053\u300d）：\u4e0a\u65b9\u540c\u6837\u8ba2\u5355\u5361\u7247；\u4e0b\u65b9\u547d\u4ee4\u8f93\u5165\u6846\u30013 \u4e2a\u6309\u94ae\u3001\u9ed1\u5e95\u901a\u4fe1\u65e5\u5fd7\u533a\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                      8.3 \u64cd\u4f5c WebSocket \u53cc\u5411\u901a\u9053<\/h3>\n

                                                                                                                                                                      \u5728\u53f3\u4fa7\u64cd\u4f5c\u53f0\u505a\u4ee5\u4e0b\u64cd\u4f5c，\u89c2\u5bdf\u901a\u4fe1\u65e5\u5fd7\u548c\u8ba2\u5355\u53d8\u5316：<\/p>\n

                                                                                                                                                                      \u2460 \u70b9 📡 ping<\/h4>\n
                                                                                                                                                                        \n
                                                                                                                                                                      • \u65e5\u5fd7\u51fa\u73b0\u4e24\u884c：\n
                                                                                                                                                                          \n
                                                                                                                                                                        • \u2192 {"cmd":"ping"}（\u6a59\u8272\u7bad\u5934，\u8868\u793a\u53d1\u51fa）<\/li>\n
                                                                                                                                                                        • \u2190 {"type":"pong","time":"…"}（\u7eff\u8272\u7bad\u5934，\u8868\u793a\u6536\u5230）；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                        • \u8ba2\u5355\u65e0\u53d8\u5316\u3002ping \u7eaf\u63a2\u6d3b\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                          \u2461 \u70b9 \u2795 \u52a0\u5355<\/h4>\n
                                                                                                                                                                            \n
                                                                                                                                                                          • \u65e5\u5fd7\u51fa\u73b0：\n
                                                                                                                                                                              \n
                                                                                                                                                                            • \u2192 {"cmd":"add"}<\/li>\n
                                                                                                                                                                            • \u2190 {"type":"added","order":{"id":N,"drink":"…","status":"\u5f85\u5236\u4f5c","progress":0,…}}；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                            • \u53f3\u4fa7\u8ba2\u5355\u5217\u8868\u7acb\u523b\u591a\u4e00\u5f20\u300c\u5f85\u5236\u4f5c\u300d\u5361\u7247；<\/li>\n
                                                                                                                                                                            • \u5de6\u4fa7 SSE \u770b\u677f\u4f1a\u5728\u4e0b\u4e00\u6b21\u5e7f\u64ad（\u6700\u591a 0.8s \u540e）\u4e5f\u51fa\u73b0\u8fd9\u5f20\u65b0\u5355\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                              \u2462 \u70b9 📸 snapshot<\/h4>\n
                                                                                                                                                                                \n
                                                                                                                                                                              • \u65e5\u5fd7\u51fa\u73b0：\n
                                                                                                                                                                                  \n
                                                                                                                                                                                • \u2192 {"cmd":"snapshot"}<\/li>\n
                                                                                                                                                                                • \u2190 {"type":"snapshot","time":"…","orders":[…]}；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                • \u53f3\u4fa7\u8ba2\u5355\u5361\u7247\u6574\u4f53\u5237\u65b0（\u62c9\u4e00\u6b21\u5168\u91cf\u5feb\u7167）\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                  \u2463 \u7528\u8f93\u5165\u6846 pickup \u53d6\u9910<\/h4>\n

                                                                                                                                                                                  \u5728\u547d\u4ee4\u8f93\u5165\u6846\u91cc\u6572（\u628a 3 \u6362\u6210\u67d0\u4e2a\u300c\u5df2\u5b8c\u6210\u300d\u8ba2\u5355\u7684 id）：<\/p>\n

                                                                                                                                                                                  {"cmd":"pickup","arg":3}<\/p>\n

                                                                                                                                                                                  \u6309\u56de\u8f66\u3002<\/p>\n

                                                                                                                                                                                    \n
                                                                                                                                                                                  • \u5982\u679c id \u5bf9\u5e94\u8ba2\u5355\u662f\u300c\u5df2\u5b8c\u6210\u300d：\n
                                                                                                                                                                                      \n
                                                                                                                                                                                    • \u65e5\u5fd7：\u2192 {"cmd":"pickup","arg":3} \u548c \u2190 {"type":"picked","order":{…,"status":"\u5df2\u53d6\u9910"}}；<\/li>\n
                                                                                                                                                                                    • \u8be5\u8ba2\u5355\u5361\u7247\u72b6\u6001\u53d8\u6210\u300c\u5df2\u53d6\u9910\u300d（\u5de6\u4fa7\u8272\u6761\u53d8\u7070）；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                    • \u5982\u679c\u8ba2\u5355\u4e0d\u5b58\u5728\u6216\u8fd8\u6ca1\u300c\u5df2\u5b8c\u6210\u300d：\n
                                                                                                                                                                                        \n
                                                                                                                                                                                      • \u65e5\u5fd7：\u2190 {"type":"error","error":"order 3 not found"} \u6216 \u2190 {"type":"error","error":"order 3 not ready"}；<\/li>\n<\/ul>\n<\/li>\n
                                                                                                                                                                                      • \u5982\u679c arg \u4e0d\u662f\u6570\u5b57：\n
                                                                                                                                                                                          \n
                                                                                                                                                                                        • \u65e5\u5fd7：\u2190 {"type":"error","error":"arg must be int order_id"}\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                                                                                                                                                                                          \u64cd\u4f5c\u51e0\u6b21\u540e，\u65e5\u5fd7\u533a\u4f1a\u50cf\u8fd9\u6837：<\/p>\n

                                                                                                                                                                                          \"WebSocket<\/p>\n

                                                                                                                                                                                          \u6ce8\u610f\u65e5\u5fd7\u91cc type \u5b57\u6bb5\u662f\u9ad8\u4eae\u84dd\u8272\u7684，\u65b9\u4fbf\u8fa8\u8ba4\u6d88\u606f\u7c7b\u578b；\u7bad\u5934\u989c\u8272\u533a\u5206\u6536\u53d1\u65b9\u5411\u3002<\/p>\n

                                                                                                                                                                                          8.4 \u9a8c\u8bc1\u6e05\u5355（\u9010\u6761\u52fe\u9009）<\/h3>\n\n#\u9a8c\u8bc1\u9879\u671f\u671b<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
                                                                                                                                                                                          1<\/td>\n\u542f\u52a8\u4e0d\u62a5\u9519<\/td>\n\u770b\u5230 Application startup complete.<\/td>\n<\/tr>\n
                                                                                                                                                                                          2<\/td>\n\u6d4f\u89c8\u5668\u6253\u5f00 \/<\/td>\n\u663e\u793a\u770b\u677f，\u4e0d\u662f 404<\/td>\n<\/tr>\n
                                                                                                                                                                                          3<\/td>\nSSE \u72b6\u6001\u706f<\/td>\n1 \u79d2\u5185\u53d8\u7eff\u95ea\u70c1<\/td>\n<\/tr>\n
                                                                                                                                                                                          4<\/td>\nWS \u72b6\u6001\u706f<\/td>\n1 \u79d2\u5185\u53d8\u7eff\u95ea\u70c1<\/td>\n<\/tr>\n
                                                                                                                                                                                          5<\/td>\n\u65f6\u949f<\/td>\n\u6bcf 0.8s \u8d70\u4e00\u6b21<\/td>\n<\/tr>\n
                                                                                                                                                                                          6<\/td>\n\u5de6\u4fa7\u8ba2\u5355<\/td>\n\u81ea\u52a8\u51fa\u73b0\u5e76\u63a8\u8fdb（\u5f85\u5236\u4f5c\u2192\u5236\u4f5c\u4e2d\u2192\u5df2\u5b8c\u6210\u2192\u5df2\u53d6\u9910）<\/td>\n<\/tr>\n
                                                                                                                                                                                          7<\/td>\n\u8fdb\u5ea6\u6761<\/td>\n\u300c\u5236\u4f5c\u4e2d\u300d\u8ba2\u5355\u8fdb\u5ea6\u6761\u5e73\u6ed1\u589e\u957f<\/td>\n<\/tr>\n
                                                                                                                                                                                          8<\/td>\n\u8001\u300c\u5df2\u53d6\u9910\u300d\u8ba2\u5355<\/td>\n\u6ee1\u4e00\u5b9a\u6570\u91cf\u540e\u4ece\u770b\u677f\u6d88\u5931（\u961f\u5217\u53ea\u7559 8 \u6761）<\/td>\n<\/tr>\n
                                                                                                                                                                                          9<\/td>\nping \u6309\u94ae<\/td>\n\u65e5\u5fd7\u51fa\u73b0 pong \u56de\u6267<\/td>\n<\/tr>\n
                                                                                                                                                                                          10<\/td>\nadd \u6309\u94ae<\/td>\n\u7acb\u523b\u591a\u4e00\u5f20\u8ba2\u5355\u5361<\/td>\n<\/tr>\n
                                                                                                                                                                                          11<\/td>\nsnapshot \u6309\u94ae<\/td>\n\u53f3\u4fa7\u8ba2\u5355\u5237\u65b0<\/td>\n<\/tr>\n
                                                                                                                                                                                          12<\/td>\npickup \u5408\u6cd5 id<\/td>\n\u8ba2\u5355\u53d8\u300c\u5df2\u53d6\u9910\u300d<\/td>\n<\/tr>\n
                                                                                                                                                                                          13<\/td>\npickup \u975e\u6cd5 id<\/td>\n\u65e5\u5fd7\u51fa\u73b0 error \u56de\u6267<\/td>\n<\/tr>\n
                                                                                                                                                                                          14<\/td>\n\u8f93\u5165\u6846\u975e\u6cd5 JSON<\/td>\n\u9759\u9ed8\u5ffd\u7565，\u4e0d\u62a5\u9519<\/td>\n<\/tr>\n
                                                                                                                                                                                          15<\/td>\n\u5173\u6389\u6d4f\u89c8\u5668\u518d\u5f00<\/td>\nSSE\/WS \u81ea\u52a8\u91cd\u8fde，\u72b6\u6001\u706f\u91cd\u65b0\u53d8\u7eff<\/td>\n<\/tr>\n
                                                                                                                                                                                          16<\/td>\n\u6539\u4efb\u610f\u540e\u7aef\u6587\u4ef6<\/td>\nuvicorn \u81ea\u52a8\u91cd\u542f（–reload）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                                                                                                          \u5168\u90e8\u901a\u8fc7 = \u9879\u76ee\u5b8c\u6574\u8dd1\u901a 🎉<\/p>\n

                                                                                                                                                                                          8.5 \u7528 curl \u9a8c\u8bc1 SSE（\u65e0\u9700\u6d4f\u89c8\u5668）<\/h3>\n

                                                                                                                                                                                          \u53e6\u5f00\u4e00\u4e2a\u7ec8\u7aef：<\/p>\n

                                                                                                                                                                                          curl<\/span> -N<\/span> http:\/\/127.0.0.1:8000\/sse\/orders<\/p>\n

                                                                                                                                                                                            \n
                                                                                                                                                                                          • -N：–no-buffer，\u7981\u7528\u7f13\u51b2，\u5b9e\u65f6\u8f93\u51fa；<\/li>\n
                                                                                                                                                                                          • \u4f60\u4f1a\u6301\u7eed\u770b\u5230 event: hello \u548c event: orders \u5e27\u6d41\u5f0f\u8f93\u51fa，\u6bcf 0.8s \u4e00\u5e27；<\/li>\n
                                                                                                                                                                                          • \u6309 Ctrl+C \u9000\u51fa\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                            8.6 \u7528\u6d4f\u89c8\u5668\u63a7\u5236\u53f0\u9a8c\u8bc1 WS<\/h3>\n

                                                                                                                                                                                            \u5728 http:\/\/127.0.0.1:8000\/ \u9875\u9762\u6309 F12 \u6253\u5f00\u63a7\u5236\u53f0，\u6267\u884c：<\/p>\n

                                                                                                                                                                                            const<\/span> ws =<\/span> new<\/span> WebSocket<\/span>(<\/span>"ws:\/\/127.0.0.1:8000\/ws\/orders"<\/span>)<\/span>;<\/span>
                                                                                                                                                                                            \nws.<\/span>onmessage<\/span> =<\/span> e<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>JSON<\/span>.<\/span>parse<\/span>(<\/span>e.<\/span>data)<\/span>)<\/span>;<\/span>
                                                                                                                                                                                            \nws.<\/span>onopen<\/span> =<\/span> (<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>"\u5df2\u8fde\u63a5"<\/span>)<\/span>;<\/span>
                                                                                                                                                                                            \nws.<\/span>onclose<\/span> =<\/span> (<\/span>)<\/span> =><\/span> console.<\/span>log<\/span>(<\/span>"\u5df2\u65ad\u5f00"<\/span>)<\/span>;<\/span><\/p>\n

                                                                                                                                                                                            \/\/ \u7b49\u300c\u5df2\u8fde\u63a5\u300d\u51fa\u73b0\u540e:<\/span>
                                                                                                                                                                                            \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "ping"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"pong",…}<\/span>
                                                                                                                                                                                            \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "add"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"added",…}<\/span>
                                                                                                                                                                                            \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "snapshot"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"snapshot",…}<\/span>
                                                                                                                                                                                            \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "pickup"<\/span>,<\/span> arg<\/span>:<\/span> 1<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b id=1 \u8ba2\u5355\u72b6\u6001<\/span>
                                                                                                                                                                                            \nws.<\/span>send<\/span>(<\/span>JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>cmd<\/span>:<\/span> "haha"<\/span>}<\/span>)<\/span>)<\/span>;<\/span> \/\/ \u770b\u5230 {type:"error", error:"unknown cmd: haha"}<\/span><\/p>\n

                                                                                                                                                                                            8.7 \u81ea\u52a8\u751f\u6210\u7684 API \u6587\u6863（\u5f69\u86cb）<\/h3>\n

                                                                                                                                                                                            FastAPI \u81ea\u52a8\u751f\u6210\u4ea4\u4e92\u5f0f API \u6587\u6863，\u8bbf\u95ee：<\/p>\n

                                                                                                                                                                                              \n
                                                                                                                                                                                            • http:\/\/127.0.0.1:8000\/docs \u2014\u2014 Swagger UI<\/li>\n
                                                                                                                                                                                            • http:\/\/127.0.0.1:8000\/redoc \u2014\u2014 ReDoc<\/li>\n<\/ul>\n

                                                                                                                                                                                              \u5728 \/docs \u91cc\u80fd\u770b\u5230 \/sse\/orders \u7b49 HTTP \u7aef\u70b9（WebSocket \u7aef\u70b9\u4e0d\u663e\u793a\u5728 Swagger \u91cc，\u56e0\u4e3a OpenAPI \u89c4\u8303\u4e0d\u8986\u76d6 WS）\u3002\u53ef\u4ee5\u76f4\u63a5\u5728\u9875\u9762\u4e0a\u300cTry it out\u300d\u6d4b\u8bd5 GET \u8def\u7531\u3002<\/p>\n

                                                                                                                                                                                              8.8 \u5e38\u89c1\u95ee\u9898<\/h3>\n

                                                                                                                                                                                              Q1：\u542f\u52a8\u62a5\u9519 ModuleNotFoundError: No module named 'fastapi'<\/h4>\n

                                                                                                                                                                                              \u4f9d\u8d56\u6ca1\u88c5\u3002\u6267\u884c：<\/p>\n

                                                                                                                                                                                              uv sync<\/span> # \u7528 uv<\/span>
                                                                                                                                                                                              \n# \u6216<\/span>
                                                                                                                                                                                              \npip install<\/span> fastapi "uvicorn[standard]"<\/span> websockets<\/p>\n

                                                                                                                                                                                              Q2：Address already in use \/ \u7aef\u53e3 8000 \u88ab\u5360\u7528<\/h4>\n

                                                                                                                                                                                              \u4e0a\u6b21\u7684\u670d\u52a1\u6ca1\u5173\u5e72\u51c0\u3002\u6362\u7aef\u53e3：<\/p>\n

                                                                                                                                                                                              uv run python -m<\/span> uvicorn src.app:app –port<\/span> 8001<\/span> –reload<\/span><\/p>\n

                                                                                                                                                                                              \u6216\u6740\u6389\u5360\u7528\u8fdb\u7a0b（Windows）：<\/p>\n

                                                                                                                                                                                              # \u627e\u5230\u5360\u7528 8000 \u7684 PID<\/span>
                                                                                                                                                                                              \nnetstat<\/span> -ano<\/span> |<\/span> findstr :8000
                                                                                                                                                                                              \ntaskkill \/F \/PID <<\/span>PID><\/span><\/p>\n

                                                                                                                                                                                              Q3：\u6d4f\u89c8\u5668\u6253\u5f00\u662f\u7a7a\u767d \/ \u4e00\u76f4\u8f6c\u5708<\/h4>\n
                                                                                                                                                                                                \n
                                                                                                                                                                                              • \u786e\u8ba4 static\/index.html \u5b58\u5728\u4e14\u5185\u5bb9\u5b8c\u6574（\u7b2c 7 \u7ae0）；<\/li>\n
                                                                                                                                                                                              • F12 \u770b Network，\/sse\/orders \u5e94\u662f pending \u72b6\u6001（\u957f\u8fde\u63a5\u6b63\u5e38）；\u5982\u679c\u7acb\u5373\u5931\u8d25，\u68c0\u67e5\u540e\u7aef\u65e5\u5fd7；<\/li>\n
                                                                                                                                                                                              • \u770b\u63a7\u5236\u53f0\u6709\u65e0 JS \u62a5\u9519\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                Q4：SSE \u72b6\u6001\u706f\u4e00\u76f4\u7ea2 \/ \u300c\u65ad\u5f00, 3s \u540e\u91cd\u8fde\u300d<\/h4>\n
                                                                                                                                                                                                  \n
                                                                                                                                                                                                • \u786e\u8ba4\u540e\u7aef\u5728\u8dd1；<\/li>\n
                                                                                                                                                                                                • \u786e\u8ba4\u8bbf\u95ee\u7684\u662f http:\/\/127.0.0.1:8000\/（\u4e0d\u662f localhost，\u6709\u65f6 cookie\/\u8de8\u57df\u95ee\u9898）；<\/li>\n
                                                                                                                                                                                                • \u7528 curl \u6d4b \/sse\/orders \u770b\u662f\u5426\u901a\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                  Q5：\u8ba2\u5355\u4e0d\u5237\u65b0<\/h4>\n
                                                                                                                                                                                                    \n
                                                                                                                                                                                                  • \u770b\u540e\u7aef\u7ec8\u7aef\u662f\u5426\u6709\u62a5\u9519；<\/li>\n
                                                                                                                                                                                                  • models.py \u7684 advance() \u662f\u5426\u88ab broadcaster.py \u6b63\u786e\u8c03\u7528；<\/li>\n
                                                                                                                                                                                                  • app.py \u7684 lifespan \u662f\u5426\u7ed1\u5b9a\u4e86 broadcaster（\u6f0f\u4e86 lifespan=lifespan \u5c31\u4e0d\u4f1a\u8d77\u540e\u53f0\u4efb\u52a1）\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                    Q6：pickup \u4e00\u76f4\u62a5 not ready<\/h4>\n

                                                                                                                                                                                                    \u8ba2\u5355\u5fc5\u987b**\u5148\u5230\u300c\u5df2\u5b8c\u6210\u300d**\u624d\u80fd\u53d6\u9910\u3002\u7b49\u8fdb\u5ea6\u6761\u6da8\u5230 100% \u72b6\u6001\u53d8\u6210\u300c\u5df2\u5b8c\u6210\u300d\u518d pickup\u3002\u6216\u5148 add \u4e00\u676f，\u591a\u7b49\u51e0\u4e2a tick\u3002<\/p>\n

                                                                                                                                                                                                    Q7：\u6539\u4e86\u4ee3\u7801\u4f46\u6ca1\u81ea\u52a8\u91cd\u542f<\/h4>\n

                                                                                                                                                                                                    \u786e\u8ba4\u542f\u52a8\u547d\u4ee4\u5e26\u4e86 –reload\u3002\u6ce8\u610f –reload \u76d1\u89c6\u7684\u662f\u5f53\u524d\u5de5\u4f5c\u76ee\u5f55，\u8981\u5728\u9879\u76ee\u6839\u76ee\u5f55\u542f\u52a8\u3002<\/p>\n

                                                                                                                                                                                                    Q8：Windows \u4e0b\u4e2d\u6587\u8def\u5f84\u62a5\u9519<\/h4>\n

                                                                                                                                                                                                    \u9879\u76ee\u8def\u5f84\u542b\u4e2d\u6587（\u5317\u4eac\u4e2d\u8f6f\/2026\/\u5317\u4eac\u90ae\u7535）\u3002uvicorn \u4e00\u822c\u6ca1\u95ee\u9898，\u4f46\u5982\u679c\u6709\u7f16\u7801\u9519\u8bef，\u5c1d\u8bd5\u628a\u9879\u76ee\u79fb\u5230\u7eaf\u82f1\u6587\u8def\u5f84\u6d4b\u8bd5\u3002<\/p>\n

                                                                                                                                                                                                    \n

                                                                                                                                                                                                    8.9 \u505c\u6b62\u670d\u52a1<\/h3>\n

                                                                                                                                                                                                    \u5728\u8fd0\u884c uvicorn \u7684\u7ec8\u7aef\u6309 Ctrl+C\u3002<\/p>\n

                                                                                                                                                                                                    \u505c\u6b62\u65f6\u4f1a\u770b\u5230：<\/p>\n

                                                                                                                                                                                                    INFO: Shutting down
                                                                                                                                                                                                    \nINFO: Waiting for application shutdown.
                                                                                                                                                                                                    \nINFO: Application shutdown complete.<\/p>\n

                                                                                                                                                                                                    Application shutdown complete. \u8868\u793a lifespan \u7684 finally \u8dd1\u5b8c\u4e86，\u5e7f\u64ad\u5668\u5df2\u88ab cancel，\u5e72\u51c0\u9000\u51fa\u3002<\/p>\n

                                                                                                                                                                                                    \n

                                                                                                                                                                                                    \u4e0b\u4e00\u7ae0 \u2192 09-SSE-vs-WebSocket.md：\u628a\u4e24\u79cd\u6280\u672f\u653e\u4e00\u8d77\u7cfb\u7edf\u5bf9\u6bd4 + \u6269\u5c55\u7ec3\u4e60\u3002<\/p>\n

                                                                                                                                                                                                    \n

                                                                                                                                                                                                    \u7b2c 9 \u7ae0 \u00b7 SSE vs WebSocket \u5bf9\u6bd4\u4e0e\u6269\u5c55\u7ec3\u4e60<\/h2>\n

                                                                                                                                                                                                    \u672c\u7ae0\u76ee\u6807<\/h3>\n

                                                                                                                                                                                                    \u628a\u524d\u9762\u5b66\u5230\u7684\u4e24\u79cd\u5b9e\u65f6\u901a\u4fe1\u6280\u672f\u653e\u5728\u4e00\u8d77\u7cfb\u7edf\u5bf9\u6bd4，\u5f62\u6210\u6e05\u6670\u7684\u77e5\u8bc6\u7f51\u7edc；\u518d\u7ed9\u51e0\u4e2a\u6269\u5c55\u7ec3\u4e60，\u5de9\u56fa\u7406\u89e3\u3002<\/p>\n

                                                                                                                                                                                                    \n

                                                                                                                                                                                                    9.1 \u5168\u9762\u5bf9\u6bd4\u8868<\/h3>\n\n\u7ef4\u5ea6SSE (Server-Sent Events)WebSocket<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
                                                                                                                                                                                                    \u65b9\u5411<\/td>\n\u5355\u5411（\u670d\u52a1\u5668\u2192\u5ba2\u6237\u7aef）<\/td>\n\u5168\u53cc\u5de5（\u53cc\u5411）<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u5e95\u5c42\u534f\u8bae<\/td>\nHTTP（\u666e\u901a GET \u54cd\u5e94\u6d41）<\/td>\nHTTP \u63e1\u624b\u540e\u5347\u7ea7\u4e3a ws:\/\/<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u6d4f\u89c8\u5668 API<\/td>\nnew EventSource(url)<\/td>\nnew WebSocket(url)<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u6570\u636e\u683c\u5f0f<\/td>\n\u6587\u672c（text\/event-stream \u5e27）<\/td>\n\u6587\u672c + \u4e8c\u8fdb\u5236<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u6d88\u606f\u8fb9\u754c<\/td>\n\u7528\u7a7a\u884c\u5206\u9694\u6bcf\u5e27<\/td>\n\u534f\u8bae\u81ea\u5e26\u5e27\u8fb9\u754c<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u4e8b\u4ef6\u547d\u540d<\/td>\n\u652f\u6301（event: xxx）<\/td>\n\u81ea\u5df1\u7ea6\u5b9a（\u901a\u5e38\u7528 type \u5b57\u6bb5）<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u81ea\u52a8\u91cd\u8fde<\/td>\n\u2705 \u6d4f\u89c8\u5668\u5185\u7f6e<\/td>\n\u274c \u9700\u624b\u52a8\u5b9e\u73b0<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u91cd\u8fde\u95f4\u9694<\/td>\n\u6d4f\u89c8\u5668\u63a7\u5236（\u53ef\u914d retry: \u5b57\u6bb5）<\/td>\n\u81ea\u5df1\u5199 setTimeout<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u8fde\u63a5\u6570\u9650\u5236<\/td>\n\u6d4f\u89c8\u5668\u5bf9\u540c\u6e90\u6709\u9650\u5236（\u901a\u5e38 6 \u4e2a）<\/td>\n\u65e0\u7279\u6b8a\u9650\u5236<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u7a7f\u8d8a\u9632\u706b\u5899\/\u4ee3\u7406<\/td>\n\u8f83\u597d（\u5c31\u662f HTTP）<\/td>\n\u5076\u5c14\u88ab\u62e6（\u9700 Upgrade \u5934）<\/td>\n<\/tr>\n
                                                                                                                                                                                                    HTTP \u4e2d\u95f4\u4ef6\u517c\u5bb9<\/td>\n\u597d（\u666e\u901a HTTP \u54cd\u5e94）<\/td>\n\u9700\u652f\u6301 Upgrade<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u670d\u52a1\u7aef\u5b9e\u73b0<\/td>\nStreamingResponse + \u5f02\u6b65\u751f\u6210\u5668<\/td>\n@router.websocket + accept\/receive\/send<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u6bcf\u8fde\u63a5\u7f13\u51b2<\/td>\n\u901a\u5e38\u914d asyncio.Queue<\/td>\n\u53ef\u76f4\u63a5 send<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u5178\u578b\u573a\u666f<\/td>\n\u884c\u60c5\u3001\u901a\u77e5\u3001\u65e5\u5fd7\u6d41\u3001\u770b\u677f<\/td>\n\u804a\u5929\u3001\u534f\u4f5c\u3001\u547d\u4ee4\u4ea4\u4e92\u3001\u6e38\u620f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                                                                                                                    9.2 \u5728\u672c\u9879\u76ee\u91cc\u7684\u5177\u4f53\u5dee\u5f02<\/h3>\n\n\u7ef4\u5ea6sse.pyws.py<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n
                                                                                                                                                                                                    \u88c5\u9970\u5668<\/td>\n@router.get("\/sse\/orders")<\/td>\n@router.websocket("\/ws\/orders")<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u63e1\u624b<\/td>\n\u65e0\u9700 accept<\/td>\nawait ws.accept()<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u63a5\u6536\u5ba2\u6237\u7aef\u6d88\u606f<\/td>\n\u274c \u4e0d\u80fd<\/td>\nawait ws.receive_text()<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u53d1\u9001\u65b9\u5f0f<\/td>\nyield "event: …\\\\ndata: …\\\\n\\\\n"<\/td>\nawait ws.send_text(json_str)<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u5ba2\u6237\u7aef\u96c6\u5408\u5b58\u4ec0\u4e48<\/td>\nasyncio.Queue（\u7f13\u51b2）<\/td>\nWebSocket \u5bf9\u8c61（\u76f4\u53d1）<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u5e7f\u64ad\u5668\u600e\u4e48\u5206\u53d1<\/td>\nawait queue.put({…})<\/td>\nawait ws.send_text(payload)<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u65ad\u5f00\u5f02\u5e38<\/td>\nGeneratorExit（yield \u5904\u629b）<\/td>\nWebSocketDisconnect（receive \u5904\u629b）<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u65ad\u5f00\u6e05\u7406<\/td>\nfinally: sse_clients.discard(queue)<\/td>\nfinally: ws_clients.discard(ws)<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u5931\u8d25\u5904\u7406<\/td>\nQueue \u4e0d\u4f1a\u5931\u8d25（\u7f13\u51b2）<\/td>\ntry\/except \u6355\u83b7 send \u5931\u8d25\u540e discard<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u524d\u7aef\u8fde\u63a5<\/td>\nnew EventSource('\/sse\/orders')<\/td>\nnew WebSocket('ws:\/\/…')<\/td>\n<\/tr>\n
                                                                                                                                                                                                    \u524d\u7aef\u91cd\u8fde<\/td>\nonerror \u2192 close + setTimeout<\/td>\nonclose \u2192 setTimeout<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

                                                                                                                                                                                                    9.3 \u8bbe\u8ba1\u54f2\u5b66\u5bf9\u6bd4<\/h3>\n

                                                                                                                                                                                                    SSE \u7684\u54f2\u5b66：\u300c\u591f\u7528\u5c31\u597d\u300d<\/h4>\n
                                                                                                                                                                                                      \n
                                                                                                                                                                                                    • \u5982\u679c\u4f60\u7684\u9700\u6c42\u662f\u300c\u670d\u52a1\u5668\u63a8\u3001\u5ba2\u6237\u7aef\u53ea\u770b\u300d，SSE \u662f\u6700\u7b80\u5355\u7684\u65b9\u6848；<\/li>\n
                                                                                                                                                                                                    • \u57fa\u4e8e HTTP，\u6240\u6709 HTTP \u57fa\u7840\u8bbe\u65bd（\u7f13\u5b58\u3001\u4ee3\u7406\u3001\u538b\u7f29\u3001CORS）\u90fd\u80fd\u76f4\u63a5\u7528；<\/li>\n
                                                                                                                                                                                                    • \u6d4f\u89c8\u5668\u81ea\u52a8\u91cd\u8fde\u3001\u81ea\u52a8\u6062\u590d，\u7701\u5fc3；<\/li>\n
                                                                                                                                                                                                    • \u672c\u9879\u76ee\u300c\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d\u5c31\u662f\u5178\u578b\u573a\u666f\u2014\u2014\u670d\u52a1\u5668\u63a8\u8ba2\u5355\u3001\u6d4f\u89c8\u5668\u53ea\u6e32\u67d3，SSE \u5b8c\u5168\u591f\u7528\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                      WebSocket \u7684\u54f2\u5b66：\u300c\u9700\u8981\u4ea4\u4e92\u624d\u4e0a\u300d<\/h4>\n
                                                                                                                                                                                                        \n
                                                                                                                                                                                                      • \u5982\u679c\u5ba2\u6237\u7aef\u8981\u4e3b\u52a8\u53d1\u6d88\u606f（\u547d\u4ee4\u3001\u804a\u5929\u3001\u63a7\u5236），\u5fc5\u987b\u53cc\u5411，\u7528 WS；<\/li>\n
                                                                                                                                                                                                      • \u4f46\u4ee3\u4ef7\u662f：\u63e1\u624b\u66f4\u590d\u6742\u3001\u91cd\u8fde\u8981\u81ea\u5df1\u5199\u3001\u4ee3\u7406\u517c\u5bb9\u6027\u8981\u6d4b\u3001\u6d88\u606f\u683c\u5f0f\u8981\u81ea\u5df1\u7ea6\u5b9a；<\/li>\n
                                                                                                                                                                                                      • \u672c\u9879\u76ee\u300c\u5e97\u5458\u64cd\u4f5c\u53f0\u300d\u9700\u8981\u53d1 ping\/add\/pickup\/snapshot \u547d\u4ee4，\u5fc5\u987b WS\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                        \u7ecf\u9a8c\u6cd5\u5219：\u80fd\u7528 SSE \u5c31\u522b\u4e0a WS\u3002SSE \u7684\u7b80\u5355\u6027\u5728\u957f\u671f\u7ef4\u62a4\u91cc\u4ef7\u503c\u5de8\u5927\u3002\u53ea\u6709\u786e\u8ba4\u9700\u8981\u53cc\u5411，\u624d\u7528 WS\u3002<\/p>\n

                                                                                                                                                                                                        9.4 \u672c\u9879\u76ee\u7684\u67b6\u6784\u5de7\u601d<\/h3>\n

                                                                                                                                                                                                        9.4.1 \u5171\u4eab\u5fc3\u8df3\u6e90<\/h4>\n

                                                                                                                                                                                                        \u4e24\u4e2a\u4f20\u8f93\u6a21\u5757\u5404\u81ea\u7ef4\u62a4\u8ba2\u9605\u8005\u96c6\u5408，\u4f46\u53ea\u6709\u4e00\u4e2a\u5e7f\u64ad\u5668\u8c03 advance()\u3002\u4fdd\u8bc1：<\/p>\n

                                                                                                                                                                                                          \n
                                                                                                                                                                                                        • \u72b6\u6001\u63a8\u8fdb\u53ea\u53d1\u751f\u4e00\u6b21（\u4e0d\u4f1a\u6309\u8fde\u63a5\u6570\u500d\u589e）；<\/li>\n
                                                                                                                                                                                                        • \u6240\u6709\u8fde\u63a5\u770b\u5230\u540c\u4e00\u65f6\u523b\u7684\u6570\u636e\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                          9.4.2 \u6570\u636e\u5c42\u5b8c\u5168\u89e3\u8026<\/h4>\n

                                                                                                                                                                                                          models.py \u4e0d\u77e5\u9053 SSE\/WS \u7684\u5b58\u5728\u3002\u597d\u5904：<\/p>\n

                                                                                                                                                                                                            \n
                                                                                                                                                                                                          • \u60f3\u6362\u4f20\u8f93\u5c42（\u5982\u6362\u6210\u7eaf\u8f6e\u8be2\u3001\u6216\u6362\u6210 Socket.IO）\u4e0d\u7528\u52a8\u6570\u636e\u5c42；<\/li>\n
                                                                                                                                                                                                          • \u5355\u5143\u6d4b\u8bd5\u6570\u636e\u5c42\u65f6\u4e0d\u9700\u8d77\u670d\u52a1\u5668；<\/li>\n
                                                                                                                                                                                                          • \u6570\u636e\u5c42\u53ef\u4ee5\u5355\u72ec\u590d\u7528（\u5982\u505a\u547d\u4ee4\u884c\u7248\u770b\u677f）\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                            9.4.3 \u4e24\u79cd\u5206\u53d1\u7b56\u7565\u5bf9\u7167<\/h4>\n
                                                                                                                                                                                                              \n
                                                                                                                                                                                                            • SSE \u7528 Queue \u7f13\u51b2：\u751f\u4ea7\u8005（\u5e7f\u64ad\u5668）\u548c\u6d88\u8d39\u8005（\u8fde\u63a5\u534f\u7a0b）\u89e3\u8026，\u5e7f\u64ad\u5668\u4e0d\u4f1a\u88ab\u6162\u5ba2\u6237\u7aef\u5361\u4f4f\u3002\u4ee3\u4ef7\u662f\u65ad\u8fde\u6e05\u7406\u9760\u534f\u7a0b finally；<\/li>\n
                                                                                                                                                                                                            • WS \u76f4\u63a5 send：\u5b9e\u65f6\u6027\u597d\u3001\u5931\u8d25\u5373\u77e5\u3002\u4ee3\u4ef7\u662f\u5e7f\u64ad\u5668\u8981\u5904\u7406\u53d1\u9001\u5931\u8d25\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                              \u8fd9\u662f\u6559\u5b66\u9879\u76ee\u6545\u610f\u505a\u7684\u5bf9\u7167\u2014\u2014\u540c\u4e00\u79cd\u300c\u5e7f\u64ad\u300d\u9700\u6c42，\u4e24\u79cd\u5b9e\u73b0\u601d\u8def\u3002<\/p>\n

                                                                                                                                                                                                              9.4.4 \u524d\u7aef\u5206\u5de5<\/h4>\n
                                                                                                                                                                                                                \n
                                                                                                                                                                                                              • \u5de6\u4fa7 SSE \u770b\u300c\u81ea\u52a8\u63a8\u9001\u7684\u8ba2\u5355\u300d；<\/li>\n
                                                                                                                                                                                                              • \u53f3\u4fa7 WS \u770b\u300c\u547d\u4ee4\u4ea4\u4e92 + \u901a\u4fe1\u65e5\u5fd7\u300d；<\/li>\n
                                                                                                                                                                                                              • \u4e24\u8fb9\u8ba2\u5355\u5361\u7247\u7528\u540c\u4e00\u4e2a renderOrders \u51fd\u6570，\u4ee3\u7801\u590d\u7528\u3002<\/li>\n<\/ul>\n
                                                                                                                                                                                                                \n

                                                                                                                                                                                                                9.5 \u6269\u5c55\u7ec3\u4e60<\/h3>\n

                                                                                                                                                                                                                \u6309\u96be\u5ea6\u6392\u5e8f，\u505a\u5b8c\u80fd\u52a0\u6df1\u7406\u89e3\u3002<\/p>\n

                                                                                                                                                                                                                🟢 \u7ec3\u4e60 1（\u7b80\u5355）：\u8c03\u6162\u5e7f\u64ad，\u89c2\u5bdf\u7ec6\u8282<\/h4>\n

                                                                                                                                                                                                                \u628a broadcaster.py \u7684 interval \u6539\u6210 2.0，\u91cd\u542f\u3002\u89c2\u5bdf：<\/p>\n

                                                                                                                                                                                                                  \n
                                                                                                                                                                                                                • \u8ba2\u5355\u63a8\u8fdb\u53d8\u6162，\u80fd\u6e05\u695a\u770b\u5230\u6bcf\u4e2a\u72b6\u6001\u505c\u7559；<\/li>\n
                                                                                                                                                                                                                • \u524d\u7aef\u65ad\u5f00\u91cd\u8fde\u7684 3 \u79d2\u548c 2 \u79d2\u5e7f\u64ad\u7684\u5173\u7cfb\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                                  🟢 \u7ec3\u4e60 2（\u7b80\u5355）：\u52a0\u4e00\u4e2a clear \u547d\u4ee4<\/h4>\n

                                                                                                                                                                                                                  \u5728 ws.py \u52a0\u4e00\u4e2a clear \u547d\u4ee4，\u6e05\u7a7a\u6240\u6709\u8ba2\u5355：<\/p>\n

                                                                                                                                                                                                                  elif<\/span> cmd ==<\/span> "clear"<\/span>:<\/span>
                                                                                                                                                                                                                  \n orders.<\/span>clear(<\/span>)<\/span>
                                                                                                                                                                                                                  \n await<\/span> send(<\/span>{<\/span>"type"<\/span>:<\/span> "cleared"<\/span>}<\/span>)<\/span><\/p>\n

                                                                                                                                                                                                                  \u524d\u7aef\u52a0\u4e2a\u6309\u94ae onclick='sendCmd({cmd:"clear"})'\u3002\u6ce8\u610f clear \u540e order_seq \u4e0d\u4f1a\u91cd\u7f6e，\u65b0\u8ba2\u5355\u53f7\u4f1a\u63a5\u7740\u6da8\u2014\u2014\u60f3\u60f3\u4e3a\u4ec0\u4e48（count \u662f\u6a21\u5757\u7ea7\u5168\u5c40）\u3002<\/p>\n

                                                                                                                                                                                                                  🟡 \u7ec3\u4e60 3（\u4e2d\u7b49）：\u7ed9 SSE \u4e5f\u52a0\u91cd\u8fde\u6b21\u6570\u663e\u793a<\/h4>\n

                                                                                                                                                                                                                  \u6539 connectSSE，\u7528\u4e00\u4e2a\u53d8\u91cf\u8bb0\u5f55\u91cd\u8fde\u6b21\u6570，\u5728\u72b6\u6001\u706f\u65c1\u663e\u793a\u300cSSE: \u5df2\u8fde\u63a5（\u91cd\u8fde 2 \u6b21）\u300d\u3002<\/p>\n

                                                                                                                                                                                                                  🟡 \u7ec3\u4e60 4（\u4e2d\u7b49）：\u8ba9 pickup \u4e5f\u80fd\u5728 SSE \u770b\u677f\u89e6\u53d1<\/h4>\n

                                                                                                                                                                                                                  \u73b0\u5728 pickup \u53ea\u6539 WS \u770b\u5230\u7684\u8ba2\u5355\u3002\u4f46\u56e0\u4e3a orders \u662f\u5171\u4eab\u7684，\u4e0b\u4e00\u6b21\u5e7f\u64ad（0.8s）SSE \u770b\u677f\u4e5f\u4f1a\u66f4\u65b0\u3002\u7ed9\u5de6\u4fa7\u6bcf\u5f20\u300c\u5df2\u5b8c\u6210\u300d\u5361\u7247\u52a0\u4e00\u4e2a\u300c\u53d6\u9910\u300d\u6309\u94ae，\u70b9\u51fb\u65f6\u901a\u8fc7 window._ws \u53d1 pickup \u547d\u4ee4，\u89c2\u5bdf\u5de6\u4fa7\u5728\u4e0b\u4e00\u6b21\u5e7f\u64ad\u540e\u4e5f\u66f4\u65b0\u3002\u8fd9\u80fd\u76f4\u89c2\u4f53\u4f1a\u300c\u5171\u4eab\u6570\u636e\u6e90\u300d\u3002<\/p>\n

                                                                                                                                                                                                                  🟡 \u7ec3\u4e60 5（\u4e2d\u7b49）：\u5e7f\u64ad\u5668\u63a8\u7ed9 WS \u7684\u6d88\u606f\u4e5f\u5e26 type<\/h4>\n

                                                                                                                                                                                                                  \u73b0\u5728\u5e7f\u64ad\u5668\u63a8\u7ed9 WS \u7684\u662f\u7eaf\u5feb\u7167 {"time":…,"orders":[…]}，\u6ca1\u6709 type\u3002\u524d\u7aef\u9760\u300c\u6ca1\u6709 type \u5c31\u5f53\u8ba2\u5355\u66f4\u65b0\u300d\u5224\u65ad\u3002\u6539\u6210：\u5e7f\u64ad\u5668\u63a8 {"type":"orders","time":…,"orders":[…]}，\u524d\u7aef onmessage \u91cc\u52a0 if (msg.type === "orders") renderOrders(box, msg.orders)\u3002\u8fd9\u6837 WS \u7aef\u7684\u8ba2\u5355\u4e5f\u5b9e\u65f6\u5237\u65b0（\u76ee\u524d WS \u7aef\u53ea\u9760 hello\/snapshot \u6e32\u67d3）\u3002<\/p>\n

                                                                                                                                                                                                                  🔴 \u7ec3\u4e60 6（\u8fdb\u9636）：\u52a0\u5fc3\u8df3\u68c0\u6d4b<\/h4>\n

                                                                                                                                                                                                                  WS \u8fde\u63a5\u957f\u65f6\u95f4\u6ca1\u6d88\u606f\u4f1a\u88ab\u4e2d\u95f4\u4ee3\u7406\u65ad\u5f00\u3002\u52a0\u4e00\u4e2a\u5fc3\u8df3：\u524d\u7aef\u6bcf 30 \u79d2\u53d1 {"cmd":"ping"}，\u670d\u52a1\u7aef\u56de pong\u3002\u5982\u679c 2 \u6b21 ping \u6ca1\u6536\u5230 pong，\u8ba4\u4e3a\u65ad\u5f00，\u4e3b\u52a8 ws.close() \u89e6\u53d1\u91cd\u8fde\u3002<\/p>\n

                                                                                                                                                                                                                  🔴 \u7ec3\u4e60 7（\u8fdb\u9636）：\u6301\u4e45\u5316<\/h4>\n

                                                                                                                                                                                                                  \u73b0\u5728\u8ba2\u5355\u5b58\u5728\u5185\u5b58 dict，\u91cd\u542f\u5c31\u6ca1\u4e86\u3002\u52a0\u4e00\u4e2a\u7b80\u5355\u6301\u4e45\u5316：\u6bcf 10 \u79d2\u628a orders \u5199\u5230 state.json，\u542f\u52a8\u65f6\u8bfb\u56de\u6765\u3002\u6ce8\u610f order_seq \u4e5f\u8981\u6301\u4e45\u5316（\u6216\u542f\u52a8\u65f6\u626b\u4e00\u904d orders \u627e\u6700\u5927 id）\u3002<\/p>\n

                                                                                                                                                                                                                  🔴 \u7ec3\u4e60 8（\u8fdb\u9636）：\u628a SSE \u770b\u677f\u6539\u6210\u53ea\u7528 WS<\/h4>\n

                                                                                                                                                                                                                  \u628a\u5de6\u4fa7\u4e5f\u6539\u6210\u7528 WebSocket（\u590d\u7528\u53f3\u4fa7\u7684\u8fde\u63a5，\u6216\u65b0\u5f00\u4e00\u4e2a WS）\u3002\u4f53\u4f1a：\u53ea\u7528 WS \u4e5f\u80fd\u505a\u770b\u677f，\u4f46\u4ee3\u7801\u6bd4 SSE \u590d\u6742（\u8981\u81ea\u5df1\u5904\u7406\u6d88\u606f\u7c7b\u578b\u5206\u53d1）\u3002\u7136\u540e\u6539\u56de SSE，\u4f53\u4f1a SSE \u7684\u7b80\u6d01\u3002<\/p>\n

                                                                                                                                                                                                                  \n

                                                                                                                                                                                                                  9.6 \u5b66\u5b8c\u4f60\u5e94\u8be5\u638c\u63e1\u7684\u6982\u5ff5<\/h3>\n
                                                                                                                                                                                                                    \n
                                                                                                                                                                                                                  • SSE \u662f\u4ec0\u4e48\u3001\u4e3a\u4ec0\u4e48\u662f\u5355\u5411\u3001\u57fa\u4e8e HTTP<\/li>\n
                                                                                                                                                                                                                  • EventSource \u7684\u7528\u6cd5\u3001\u81ea\u52a8\u91cd\u8fde<\/li>\n
                                                                                                                                                                                                                  • SSE \u5e27\u683c\u5f0f（event: \/ data: \/ \u7a7a\u884c）<\/li>\n
                                                                                                                                                                                                                  • StreamingResponse + \u5f02\u6b65\u751f\u6210\u5668\u5b9e\u73b0 SSE<\/li>\n
                                                                                                                                                                                                                  • WebSocket \u662f\u4ec0\u4e48\u3001\u4e3a\u4ec0\u4e48\u662f\u53cc\u5411\u3001\u63e1\u624b\u5347\u7ea7<\/li>\n
                                                                                                                                                                                                                  • WebSocket \u7684\u7528\u6cd5\u3001accept\/receive\/send\u3001\u624b\u52a8\u91cd\u8fde<\/li>\n
                                                                                                                                                                                                                  • FastAPI \u7684 @router.websocket \u5199\u6cd5<\/li>\n
                                                                                                                                                                                                                  • WebSocketDisconnect \u5f02\u5e38\u5904\u7406<\/li>\n
                                                                                                                                                                                                                  • \u540e\u53f0\u4efb\u52a1\u7528 asyncio.create_task + lifespan \u7ba1\u7406<\/li>\n
                                                                                                                                                                                                                  • \u7528 asyncio.Queue \u89e3\u8026\u751f\u4ea7\u8005\/\u6d88\u8d39\u8005<\/li>\n
                                                                                                                                                                                                                  • TypedDict \u505a\u6d88\u606f\u7c7b\u578b\u5951\u7ea6<\/li>\n
                                                                                                                                                                                                                  • \u6a21\u5757\u5316\u8def\u7531 APIRouter + include_router<\/li>\n
                                                                                                                                                                                                                  • \u6570\u636e\u5c42\u4e0e\u4f20\u8f93\u5c42\u89e3\u8026\u7684\u8bbe\u8ba1<\/li>\n
                                                                                                                                                                                                                  • \u5171\u4eab\u5fc3\u8df3\u6e90\u907f\u514d\u91cd\u590d\u63a8\u8fdb<\/li>\n<\/ul>\n

                                                                                                                                                                                                                    9.7 \u63a8\u8350\u7ee7\u7eed\u5b66\u4e60<\/h3>\n
                                                                                                                                                                                                                      \n
                                                                                                                                                                                                                    • Socket.IO：\u5728 WS \u4e4b\u4e0a\u52a0\u4e86\u623f\u95f4\u3001\u547d\u540d\u7a7a\u95f4\u3001\u81ea\u52a8\u91cd\u8fde\u3001\u964d\u7ea7\u7b49，\u9002\u5408\u590d\u6742\u5b9e\u65f6\u573a\u666f；<\/li>\n
                                                                                                                                                                                                                    • HTTP\/2 Server Push \/ HTTP Streaming：\u548c SSE \u76f8\u5173\u7684 HTTP \u7279\u6027；<\/li>\n
                                                                                                                                                                                                                    • FastAPI \u5b98\u65b9\u6587\u6863\u7684 Streaming Responses \u548c WebSockets \u7ae0\u8282；<\/li>\n
                                                                                                                                                                                                                    • uvicorn \/ Starlette \u7684 lifespan\u3001\u4e2d\u95f4\u4ef6\u673a\u5236\u3002<\/li>\n<\/ul>\n

                                                                                                                                                                                                                      9.8 \u7ed3\u8bed<\/h3>\n

                                                                                                                                                                                                                      \u8fd9\u4e2a\u9879\u76ee\u7528\u4e00\u676f\u5976\u8336\u7684\u8ba2\u5355\u6d41\u8f6c，\u628a SSE \u548c WebSocket \u4e24\u79cd\u5b9e\u65f6\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u6570\u636e\u6e90\u4e0a\u5bf9\u6bd4\u3002\u5e0c\u671b\u4f60\u770b\u5b8c\u80fd\u8bb0\u4f4f\u90a3\u53e5\u8bdd：<\/p>\n

                                                                                                                                                                                                                      \u80fd\u7528 SSE \u5c31\u522b\u4e0a WS；\u786e\u8ba4\u9700\u8981\u53cc\u5411，\u624d\u7528 WS\u3002<\/p>\n

                                                                                                                                                                                                                      \u606d\u559c\u4f60\u4ece\u5934\u5199\u5b8c\u4e86\u6574\u4e2a\u9879\u76ee 🎉\u3002<\/p>\n

                                                                                                                                                                                                                      \n","protected":false},"excerpt":{"rendered":"

                                                                                                                                                                                                                      fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f \u7528 FastAPI \u4ece\u96f6\u642d\u4e00\u4e2a\u300c\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d，\u628a SSE（\u5355\u5411\u63a8\u9001） \u548c WebSocket（\u53cc\u5411\u901a\u9053） \u4e24\u4e2a\u5b9e\u65f6\u901a\u4fe1\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u9879\u76ee\u91cc\u5bf9\u6bd4\u5b66\u4e60\u3002 \u8fd9\u4efd\u6559\u53ea\u8981\u8ddf\u7740\u7ae0\u8282\u987a\u5e8f\u8bfb\u3001\u6309\u6b65\u9aa4\u6572\u4ee3\u7801，\u5c31\u80fd\u72ec\u7acb\u5199\u5b8c\u6240\u6709\u6587\u4ef6\u5e76\u8ba9\u9879\u76ee\u8dd1\u8d77\u6765\u3002\u6bcf\u4e00\u7ae0\u90fd\u5305\u542b：
                                                                                                                                                                                                                      \n\u672c\u7ae0\u76ee\u6807 \u2014\u2014 \u8fd9\u7ae0\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898；\u539f\u59cb\u5b8c\u6574\u4ee3\u7801 \u2014<\/p>\n","protected":false},"author":2,"featured_media":90028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[72,81,234,947,191],"topic":[],"class_list":["post-90032","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-fastapi","tag-python","tag-sse","tag-websocket","tag-191"],"yoast_head":"\nfastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/90032.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f \u7528 FastAPI \u4ece\u96f6\u642d\u4e00\u4e2a\u300c\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d，\u628a SSE（\u5355\u5411\u63a8\u9001） \u548c WebSocket（\u53cc\u5411\u901a\u9053） \u4e24\u4e2a\u5b9e\u65f6\u901a\u4fe1\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u9879\u76ee\u91cc\u5bf9\u6bd4\u5b66\u4e60\u3002 \u8fd9\u4efd\u6559\u53ea\u8981\u8ddf\u7740\u7ae0\u8282\u987a\u5e8f\u8bfb\u3001\u6309\u6b65\u9aa4\u6572\u4ee3\u7801，\u5c31\u80fd\u72ec\u7acb\u5199\u5b8c\u6240\u6709\u6587\u4ef6\u5e76\u8ba9\u9879\u76ee\u8dd1\u8d77\u6765\u3002\u6bcf\u4e00\u7ae0\u90fd\u5305\u542b： \u672c\u7ae0\u76ee\u6807 \u2014\u2014 \u8fd9\u7ae0\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898；\u539f\u59cb\u5b8c\u6574\u4ee3\u7801 \u2014\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/90032.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-04T08:17:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260804081737-6a71a021780c1.png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"48 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/90032.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/90032.html\",\"name\":\"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-08-04T08:17:43+00:00\",\"dateModified\":\"2026-08-04T08:17:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/90032.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/90032.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/90032.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/90032.html","og_locale":"zh_CN","og_type":"article","og_title":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f \u7528 FastAPI \u4ece\u96f6\u642d\u4e00\u4e2a\u300c\u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f\u300d，\u628a SSE（\u5355\u5411\u63a8\u9001） \u548c WebSocket（\u53cc\u5411\u901a\u9053） \u4e24\u4e2a\u5b9e\u65f6\u901a\u4fe1\u6280\u672f\u653e\u5728\u540c\u4e00\u4e2a\u9879\u76ee\u91cc\u5bf9\u6bd4\u5b66\u4e60\u3002 \u8fd9\u4efd\u6559\u53ea\u8981\u8ddf\u7740\u7ae0\u8282\u987a\u5e8f\u8bfb\u3001\u6309\u6b65\u9aa4\u6572\u4ee3\u7801，\u5c31\u80fd\u72ec\u7acb\u5199\u5b8c\u6240\u6709\u6587\u4ef6\u5e76\u8ba9\u9879\u76ee\u8dd1\u8d77\u6765\u3002\u6bcf\u4e00\u7ae0\u90fd\u5305\u542b： \u672c\u7ae0\u76ee\u6807 \u2014\u2014 \u8fd9\u7ae0\u8981\u89e3\u51b3\u4ec0\u4e48\u95ee\u9898；\u539f\u59cb\u5b8c\u6574\u4ee3\u7801 \u2014","og_url":"https:\/\/www.wsisp.com\/helps\/90032.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-08-04T08:17:43+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/08\/20260804081737-6a71a021780c1.png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"48 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/90032.html","url":"https:\/\/www.wsisp.com\/helps\/90032.html","name":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-08-04T08:17:43+00:00","dateModified":"2026-08-04T08:17:43+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/90032.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/90032.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/90032.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"fastapi sse websocket \u5976\u8336\u5e97\u5b9e\u65f6\u8ba2\u5355\u770b\u677f"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/90032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=90032"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/90032\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/90028"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=90032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=90032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=90032"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=90032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}