1. 項目概述Agent應(yīng)用開發(fā)與渲染不是“前后端分工”而是“智能流與呈現(xiàn)流”的耦合設(shè)計“Agent應(yīng)用開發(fā)和渲染之間關(guān)系的思考”這個標(biāo)題乍看像一個技術(shù)哲學(xué)命題但在我過去三年深度參與7個生產(chǎn)級AI Agent產(chǎn)品涵蓋客服調(diào)度、金融投顧、工業(yè)設(shè)備巡檢、教育陪練四類場景的實踐中它根本不是抽象討論——而是一個每天都在發(fā)生的、直接影響用戶是否愿意多停留3秒、是否愿意點擊第二次、是否愿意為服務(wù)付費的關(guān)鍵工程現(xiàn)實。核心關(guān)鍵詞Agent、應(yīng)用開發(fā)、渲染、SSE、text/event-stream已經(jīng)精準(zhǔn)錨定了問題域我們正在構(gòu)建的不再是傳統(tǒng)Web應(yīng)用里“后端吐JSON、前端拼DOM”的靜態(tài)協(xié)作模型而是一個持續(xù)演進(jìn)的智能體Agent與動態(tài)響應(yīng)的用戶界面Rendering之間如何建立低延遲、高保真、可中斷、可追溯的雙向數(shù)據(jù)通道。這直接決定了Agent的“呼吸感”——用戶能否實時感知到Agent在思考、在檢索、在調(diào)用工具、在組織語言也決定了系統(tǒng)的“可控感”——當(dāng)Agent卡在某個步驟時前端能否立刻給出明確反饋而不是讓用戶面對一個轉(zhuǎn)圈的空白頁干等。我見過太多團(tuán)隊把Agent邏輯寫得天花亂墜結(jié)果渲染層只用一個div{response}/div硬塞導(dǎo)致用戶看到的是“一段最終答案”而非“一次可信的思考過程”。這種割裂讓Agent從“助手”退化成“黑盒計算器”。所以這不是“開發(fā)”和“渲染”誰更重要的問題而是必須把二者視為同一枚硬幣的兩面Agent是大腦渲染是神經(jīng)末梢與肌肉——沒有神經(jīng)信號的傳遞再強的大腦也無法驅(qū)動行為沒有大腦的指令再靈敏的末梢也只是無意義的抽搐。本文面向所有已能寫出基礎(chǔ)Agent鏈路比如用LangChain調(diào)通LLM API、但正被“用戶說‘怎么沒反應(yīng)’‘感覺很慢’‘不知道它在干嘛’”這類反饋困擾的開發(fā)者。你不需要是前端專家也不必精通底層渲染引擎但必須理解數(shù)據(jù)如何從Agent的決策節(jié)點毫秒級、結(jié)構(gòu)化、可調(diào)試地抵達(dá)用戶眼前。接下來的內(nèi)容全部基于真實壓測數(shù)據(jù)、線上日志分析和用戶眼動實驗不講虛的。2. 核心設(shè)計邏輯為什么SSE是Agent應(yīng)用渲染的“默認(rèn)解”而非WebSocket或輪詢2.1 從用戶心智模型出發(fā)Agent的“思考過程”天然具備單向流特征我們先拋開技術(shù)選型回到用戶最樸素的體驗預(yù)期。當(dāng)用戶向Agent提問“幫我對比iPhone 15和華為Mate 60的影像能力并推薦適合旅行攝影的機型”他期待看到什么絕不是3秒后彈出一個完整PDF報告。他期待的是第1秒看到“正在分析手機參數(shù)…”狀態(tài)提示第2秒看到“已檢索到iPhone 15 Pro主攝規(guī)格4800萬像素…”同時旁邊小圖標(biāo)顯示“正在訪問蘋果官網(wǎng)”過程透明第3秒看到“華為Mate 60 Pro影像數(shù)據(jù)加載中…”進(jìn)度條走到70%進(jìn)度感知第4秒看到“調(diào)用圖像處理工具生成樣張對比…”工具調(diào)用可視化第5秒看到最終結(jié)論段落逐句浮現(xiàn)每句后帶一個小勾?結(jié)果分步確認(rèn)這個過程本質(zhì)是一個由Agent內(nèi)部狀態(tài)機驅(qū)動的、不可逆的、按時間序展開的事件流Event Stream。每個事件Event包含類型status/tool_call/llm_response/chunk、內(nèi)容text/payload、時間戳、可選的元數(shù)據(jù)如tool_id、chunk_id。它天然符合“單向推送、有序、不可變”的特性。而WebSocket雖然也支持流式但它設(shè)計初衷是雙向全雙工通信需要客戶端和服務(wù)端都維護(hù)連接狀態(tài)、處理消息ACK、應(yīng)對網(wǎng)絡(luò)抖動重連對Agent這種“我只管發(fā)、你只管收”的輕量級場景屬于過度設(shè)計。我曾在一個電商Agent項目中強行用WebSocket替代SSE結(jié)果發(fā)現(xiàn)連接管理代碼量增加3倍且80%的邏輯用于處理“心跳包超時”“消息重復(fù)投遞”“客戶端斷連重連”等與Agent核心邏輯無關(guān)的問題當(dāng)Agent因調(diào)用外部API如支付網(wǎng)關(guān)阻塞時WebSocket連接會因超時被Nginx主動關(guān)閉導(dǎo)致整個流中斷用戶看到“連接已斷開”而SSE的retry機制會自動重連并從斷點續(xù)傳前端渲染層需要額外編寫狀態(tài)同步邏輯確保UI狀態(tài)如按鈕禁用/啟用與WebSocket消息隊列嚴(yán)格一致極易出現(xiàn)競態(tài)條件Race Condition比如用戶在Agent還在思考時就點了“取消”但取消指令和思考中的中間結(jié)果同時到達(dá)前端無法確定執(zhí)行順序。提示SSE的retry: 3000毫秒是黃金參數(shù)。實測表明3秒重連間隔既能覆蓋99.2%的瞬時網(wǎng)絡(luò)抖動基于CDN邊緣節(jié)點日志又不會因重連過于頻繁給服務(wù)端造成壓力。低于2秒CDN緩存未失效即重連可能拿到舊數(shù)據(jù)高于5秒用戶感知到明顯卡頓。2.2 SSE協(xié)議層優(yōu)勢瀏覽器原生支持、HTTP兼容、零配置穿透SSEServer-Sent Events是W3C標(biāo)準(zhǔn)所有現(xiàn)代瀏覽器Chrome 6、Firefox 6、Safari 5.1原生支持無需引入任何第三方庫。它的底層就是HTTP/1.1這意味著零配置穿透企業(yè)防火墻絕大多數(shù)企業(yè)內(nèi)網(wǎng)只開放80/443端口且允許HTTP流量。WebSocketws://和長連接如gRPC-Web常被安全策略攔截而SSE走h(yuǎn)ttps://api.example.com/agent/stream和普通API請求完全一樣運維同學(xué)連白名單都不用加。我在某銀行項目中客戶IT部門明確拒絕開放WebSocket端口但SSE接口當(dāng)天就通過了安全審計。天然支持HTTP緩存與CDNSSE響應(yīng)頭可設(shè)置Cache-Control: no-cache確保不緩存敏感數(shù)據(jù)同時CDN如Cloudflare能智能緩存SSE連接的初始握手階段HTTP 200響應(yīng)頭將連接建立時間從平均320ms降至80ms。我們對比過直連后端 vs 經(jīng)CDN代理首字節(jié)時間TTFB提升4倍。服務(wù)端實現(xiàn)極簡以Python FastAPI為例核心代碼僅需15行from fastapi import Response import asyncio app.get(/agent/stream) async def stream_agent_response(query: str): async def event_generator(): # 步驟1發(fā)送狀態(tài)事件 yield event: status\ndata: {message: 正在啟動分析流程}\n\n await asyncio.sleep(0.5) # 模擬Agent初始化 # 步驟2發(fā)送工具調(diào)用事件 yield event: tool_call\ndata: {tool: search_api, query: iPhone 15 Pro camera specs}\n\n await asyncio.sleep(1.2) # 模擬API調(diào)用 # 步驟3發(fā)送LLM流式響應(yīng)逐token for token in [根據(jù), 官方, 資料, , iPho, ne, 15, Pro]: yield fevent: llm_chunk\ndata: {json.dumps({token: token})}\n\n await asyncio.sleep(0.1) return Response( event_generator(), media_typetext/event-stream, headers{ Cache-Control: no-cache, X-Accel-Buffering: no, # Nginx關(guān)鍵配置禁用緩沖 Connection: keep-alive } )這段代碼清晰展示了SSE的核心event:定義事件類型data:攜帶JSON序列化數(shù)據(jù)\n\n分隔事件。服務(wù)端無需管理連接池、無需處理二進(jìn)制幀只需按需yield字符串。而同等功能的WebSocket實現(xiàn)需引入websockets庫編寫連接管理、心跳、錯誤恢復(fù)等數(shù)百行代碼。2.3 渲染層的“流式消化”如何讓前端不卡死、不丟幀、不錯亂SSE的挑戰(zhàn)不在服務(wù)端而在前端如何高效、穩(wěn)定地消費事件流。很多團(tuán)隊失敗在于前端用fetch().then(res res.body.getReader())手動讀取流結(jié)果發(fā)現(xiàn)read()返回的Uint8Array需要自己解析event:和data:還要處理跨事件的數(shù)據(jù)粘包如一個TCP包里含兩個完整事件代碼臃腫且易出錯。正確姿勢是擁抱瀏覽器原生EventSourceAPIconst eventSource new EventSource(/agent/stream?query encodeURIComponent(userQuery)); // 監(jiān)聽特定事件類型 eventSource.addEventListener(status, (e) { const data JSON.parse(e.data); updateStatusUI(data.message); // 更新狀態(tài)欄 }); eventSource.addEventListener(tool_call, (e) { const data JSON.parse(e.data); showToolLoading(data.tool, data.query); // 顯示工具調(diào)用動畫 }); eventSource.addEventListener(llm_chunk, (e) { const data JSON.parse(e.data); appendToResponseArea(data.token); // 追加到響應(yīng)區(qū)支持光標(biāo)閃爍效果 }); // 全局錯誤處理非網(wǎng)絡(luò)錯誤而是服務(wù)端主動發(fā)送error事件 eventSource.addEventListener(error, (e) { if (e.eventPhase EventSource.CLOSED) { console.log(SSE連接已關(guān)閉); } else { console.error(SSE錯誤:, e); } });EventSource自動處理連接建立與重連遵循retry頭事件解析自動分割event:/data:/id:數(shù)據(jù)解碼UTF-8網(wǎng)絡(luò)中斷后的無縫續(xù)傳服務(wù)端需配合發(fā)送id:注意EventSource不支持自定義HTTP Header如Bearer Token因此認(rèn)證必須放在URL參數(shù)如/stream?tokenxxx或Cookie中。我們采用JWT Cookie方案既安全又免去前端每次構(gòu)造Header的麻煩。3. 渲染架構(gòu)拆解從“純文本流”到“可交互的智能界面”3.1 渲染層的三層抽象事件接收器Receiver、狀態(tài)協(xié)調(diào)器Orchestrator、視圖渲染器Renderer將Agent的輸出流轉(zhuǎn)化為用戶界面不能簡單地“收到什么就渲染什么”。我們采用三層架構(gòu)確?？删S護(hù)性與擴展性事件接收器Receiver職責(zé)唯一——監(jiān)聽EventSource將原始事件{type: llm_chunk, data: {...}}轉(zhuǎn)換為標(biāo)準(zhǔn)化的內(nèi)部事件對象{type: LLM_CHUNK, payload: {token: hello}, timestamp: 1712345678901}并注入全局事件總線如mitt。它不關(guān)心業(yè)務(wù)邏輯只做協(xié)議轉(zhuǎn)換。狀態(tài)協(xié)調(diào)器Orchestrator這是核心大腦。它訂閱事件總線根據(jù)事件類型和上下文決定UI狀態(tài)如何變遷。例如收到TOOL_CALL事件 → 設(shè)置isToolRunning true觸發(fā)“工具加載中”動畫收到TOOL_RESULT事件 → 檢查tool_id是否匹配當(dāng)前運行的工具 → 若匹配設(shè)置isToolRunning false并觸發(fā)LLM_RETHINK事件收到LLM_CHUNK事件 → 將token追加到currentResponse字符串 → 若token是標(biāo)點。則觸發(fā)SENTENCE_COMPLETE事件通知Renderer可進(jìn)行語法高亮。它像一個交通指揮中心確保每個事件都被正確路由、狀態(tài)被準(zhǔn)確更新、副作用如播放音效、記錄日志被適時觸發(fā)。視圖渲染器Renderer純粹的UI組件。它只接收來自O(shè)rchestrator的狀態(tài)快照如{status: analyzing, response: 正在..., isToolRunning: true}并用聲明式方式React/Vue渲染。它不發(fā)起任何網(wǎng)絡(luò)請求不處理事件只做“狀態(tài)到DOM”的映射。這種分層讓調(diào)試變得極其簡單當(dāng)用戶反饋“狀態(tài)沒更新”我們直接檢查Orchestrator的日志當(dāng)“文字顯示錯亂”我們聚焦Renderer的DOM操作當(dāng)“連接頻繁斷開”我們審查Receiver的EventSource配置。我們在某教育Agent項目中通過在Orchestrator中添加console.timeLog(orchestration)定位到一個LLM_CHUNK事件處理耗時達(dá)120ms因同步執(zhí)行了復(fù)雜Markdown解析將其移至Web Worker后UI幀率從32fps提升至58fps。3.2 “思考過程”的可視化超越純文本的4種關(guān)鍵渲染模式Agent的渲染價值90%體現(xiàn)在對“思考過程”的具象化表達(dá)上。我們總結(jié)出4種經(jīng)過用戶測試驗證的高效模式狀態(tài)脈沖Status Pulse用微動效表示Agent活躍。不是簡單的“加載中…”文字而是一個環(huán)形進(jìn)度條寬度隨status事件中的progress字段動態(tài)變化背景色從淺藍(lán)idle→ 淡黃thinking→ 橙色tool_call→ 綠色done漸變每次收到新事件進(jìn)度條末端產(chǎn)生一次微小的“水波紋”擴散動畫CSSkeyframes。用戶眼動實驗顯示這種脈沖比靜態(tài)文字提升37%的“感知響應(yīng)速度”。工具調(diào)用卡片Tool Card當(dāng)Agent調(diào)用搜索、數(shù)據(jù)庫、API等工具時渲染一個可折疊的卡片div classtool-card div classtool-header 搜索引擎/div div classtool-queryiPhone 15 Pro camera specs/div div classtool-progress加載中... span classprogress-bar/span/div div classtool-result v-ifresult已獲取12條結(jié)果/div /div卡片右上角有“×”按鈕用戶可隨時點擊取消該工具調(diào)用需服務(wù)端支持cancel_tool指令。這賦予用戶掌控感避免“被Agent拖著走”。流式響應(yīng)高亮Streaming Highlight對LLM生成的文本按語義單元句子、短語分塊渲染并實時語法高亮名詞產(chǎn)品名、參數(shù)→ 藍(lán)色粗體動詞“支持”、“搭載”、“優(yōu)于”→ 綠色數(shù)值“4800萬”、“f/1.78”→ 橙色比較級“更強”、“更優(yōu)”→ 紅色下劃線。實現(xiàn)上我們用span classtoken nouniPhone 15 Pro/span包裹每個語義單元CSS控制樣式。用戶反饋高亮讓信息密度提升閱讀效率提高2.3倍。思考路徑圖譜Thought Graph對于復(fù)雜多步推理如“先查參數(shù)→再比價格→最后綜合推薦”在側(cè)邊欄渲染一個動態(tài)圖譜節(jié)點[參數(shù)查詢]→[價格對比]→[綜合推薦]邊箭頭表示流向顏色表示狀態(tài)灰色未開始/黃色進(jìn)行中/綠色完成懸停節(jié)點顯示該步驟的輸入、輸出、耗時。這讓用戶一眼看清Agent的“思維地圖”極大提升信任度。3.3 關(guān)鍵參數(shù)與性能邊界SSE流的吞吐、延遲與內(nèi)存控制SSE不是萬能的必須設(shè)定合理邊界否則會壓垮前端。我們基于百萬級日志統(tǒng)計給出硬性參數(shù)參數(shù)推薦值依據(jù)單事件最大長度≤ 4KBChrome對單個data:字段的解析有性能拐點超過4KB時EventSource.onmessage回調(diào)延遲從1ms升至15ms事件發(fā)送頻率≤ 20 events/sec高于此值iOS Safari的EventSource會出現(xiàn)事件丟失WebKit Bug #252134我們通過服務(wù)端節(jié)流throttling強制限制前端事件隊列深度≤ 100 events防止內(nèi)存泄漏。當(dāng)隊列滿時丟棄最老的status事件非關(guān)鍵保留llm_chunk和tool_result關(guān)鍵超時重連上限5次指數(shù)退避1s, 2s, 4s, 8s, 16s平衡用戶體驗與服務(wù)端壓力。第5次失敗后前端顯示“網(wǎng)絡(luò)異常請重試”并提供一鍵重連按鈕這些參數(shù)不是拍腦袋定的。例如“20 events/sec”我們用chrome://tracing錄制了不同頻率下的主線程占用10Hz時JS執(zhí)行時間穩(wěn)定在3ms/frame25Hz時因EventSource內(nèi)部事件循環(huán)競爭JS執(zhí)行時間飆升至18ms/frame導(dǎo)致UI卡頓。因此我們在服務(wù)端Agent框架中內(nèi)置了RateLimiter中間件class SSEThrottler: def __init__(self, max_rate20): self.rate_limiter TokenBucket(max_rate, 1.0) # 每秒20個token async def wait_if_needed(self): while not self.rate_limiter.consume(): await asyncio.sleep(0.05) # 等待50ms再試所有事件發(fā)送前必須await throttler.wait_if_needed()確保前端永遠(yuǎn)在舒適區(qū)運行。4. 實操全流程從零搭建一個支持思考過程可視化的Agent應(yīng)用4.1 環(huán)境準(zhǔn)備與依賴安裝精簡到極致的最小可行棧我們摒棄所有“全家桶”方案選擇最輕量、最可控的技術(shù)組合后端Agent RuntimePython 3.11 FastAPI 0.111 LangChain 0.1.16 LiteLLM統(tǒng)一LLM API前端Rendering LayerVanilla JavaScript無框架 Tailwind CSS原子化CSS EventSource原生部署Docker Nginx反向代理SSE優(yōu)化為什么不用Next.js/Nuxt因為它們的SSR/SSG會破壞SSE的流式特性——服務(wù)端渲染完HTML再推流用戶看到的是“空白頁等待”而非“實時流”。我們必須讓EventSource連接在HTML加載后立即建立。安裝命令一行搞定# 后端 pip install fastapi[all] langchain litellm uvicorn # 前端僅需一個index.html無構(gòu)建步驟 # 創(chuàng)建public/index.html內(nèi)容見下文4.2 后端Agent服務(wù)可復(fù)用的SSE流式響應(yīng)模板創(chuàng)建main.py這是核心from fastapi import FastAPI, Request, HTTPException, BackgroundTasks from fastapi.responses import Response, JSONResponse from pydantic import BaseModel import json import asyncio import logging from typing import AsyncGenerator, Dict, Any app FastAPI() # 模擬Agent核心邏輯實際應(yīng)替換為LangChain Chain class AgentExecutor: async def execute(self, query: str) - AsyncGenerator[str, None]: # 步驟1發(fā)送啟動狀態(tài) yield event: status\ndata: {message: 正在啟動分析流程, progress: 0}\n\n await asyncio.sleep(0.3) # 步驟2模擬工具調(diào)用搜索 yield event: tool_call\ndata: {tool: search, query: query, id: search_001}\n\n await asyncio.sleep(0.8) # 步驟3模擬工具結(jié)果 yield event: tool_result\ndata: {tool_id: search_001, result: [iPhone 15 Pro: 4800萬像素主攝, Huawei Mate 60 Pro: 5000萬像素超光變主攝]}\n\n await asyncio.sleep(0.2) # 步驟4LLM流式生成逐詞 response_words [根據(jù), 對比, 分析, , iPho, ne, 15, Pro, 在, 影, 像, 方, 面, 更, 加, 注, 重, 視, 頻, 拍, 攝, , 而, 華, 為, Ma, te, 60, Pro, 則, 擅, 長, 靜, 態(tài), 抓, 拍, 。, 對, 于, 旅, 行, 攝, 影, , 若, 你, 側(cè), 重, 視, 頻, 記, 錄, , 推, 薦, iPh, one, 15, Pro, , 若, 偏, 好, 高, 清, 靜, 態(tài), , 則, 華, 為, Ma, te, 60, Pro, 更, 適, 合, 。] for i, word in enumerate(response_words): # 每5個詞發(fā)送一個chunk事件模擬真實LLM token流 if i % 5 0: yield fevent: llm_chunk\ndata: {json.dumps({token: .join(response_words[max(0,i-4):i1])})}\n\n await asyncio.sleep(0.05) # 控制流速 # 步驟5發(fā)送完成狀態(tài) yield event: status\ndata: {message: 分析完成, progress: 100}\n\n app.get(/agent/stream) async def stream_agent_response(request: Request, query: str): # 從請求頭或Cookie提取用戶ID用于日志追蹤 user_id request.headers.get(X-User-ID, unknown) # 初始化Agent執(zhí)行器 executor AgentExecutor() async def event_generator(): try: async for event in executor.execute(query): yield event except Exception as e: # 發(fā)送錯誤事件前端可捕獲 yield fevent: error\ndata: {json.dumps({code: AGENT_ERROR, message: str(e)})}\n\n logging.error(fAgent execution failed for user {user_id}: {e}) return Response( event_generator(), media_typetext/event-stream, headers{ Cache-Control: no-cache, X-Accel-Buffering: no, # 關(guān)鍵禁用Nginx緩沖 Connection: keep-alive, Access-Control-Allow-Origin: *, # 開發(fā)環(huán)境生產(chǎn)環(huán)境請設(shè)具體域名 } ) if __name__ __main__: import uvicorn uvicorn.run(app, host0.0.0.0:8000, port8000, reloadTrue)關(guān)鍵細(xì)節(jié)說明X-Accel-Buffering: no是Nginx的魔法開關(guān)。默認(rèn)Nginx會緩沖SSE響應(yīng)直到4KB或1秒導(dǎo)致前端“等很久才看到第一個事件”。加此頭強制Nginx立即轉(zhuǎn)發(fā)。event: error事件是容錯關(guān)鍵。當(dāng)Agent內(nèi)部出錯如LLM API超時不關(guān)閉連接而是推送錯誤事件前端可優(yōu)雅降級如顯示“暫時無法處理請稍后重試”。user_id日志追蹤便于線上問題排查。4.3 前端渲染頁面100行代碼實現(xiàn)專業(yè)級思考過程可視化創(chuàng)建public/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleAgent思考過程可視化/title script srchttps://cdn.tailwindcss.com/script style keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .pulse { animation: pulse 1.5s infinite; } .tool-card { transition: all 0.2s ease; } .tool-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .token-noun { color: #3b82f6; font-weight: bold; } .token-verb { color: #10b981; } .token-number { color: #f59e0b; } .token-comparative { text-decoration: underline wavy red; } /style /head body classbg-gray-50 min-h-screen div classmax-w-4xl mx-auto p-4 h1 classtext-2xl font-bold text-gray-800 mb-2智能分析助手/h1 p classtext-gray-600 mb-6輸入問題觀察Agent的思考全過程/p !-- 輸入?yún)^(qū) -- div classmb-6 input idqueryInput typetext placeholder例如對比iPhone 15和華為Mate 60的影像能力... classw-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 button idsubmitBtn classmt-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition 開始分析 /button /div !-- 狀態(tài)脈沖區(qū) -- div idstatusBar classflex items-center mb-6 p-4 bg-white rounded-lg shadow-sm div idpulseDot classw-3 h-3 bg-blue-500 rounded-full mr-3 pulse/div span idstatusText classtext-gray-700等待輸入.../span /div !-- 響應(yīng)區(qū) -- div idresponseArea classbg-white rounded-lg shadow-sm p-4 min-h-[200px] div idresponseContent classprose prose-sm max-w-none/div /div !-- 工具調(diào)用區(qū) -- div idtoolArea classmt-6 space-y-3/div /div script let eventSource null; let currentResponse ; let toolCards {}; // 狀態(tài)協(xié)調(diào)器處理事件更新狀態(tài) function handleEvent(event) { const data JSON.parse(event.data); switch(event.type) { case status: document.getElementById(statusText).textContent data.message; if (data.progress 100) { document.getElementById(pulseDot).className w-3 h-3 bg-green-500 rounded-full mr-3; } break; case tool_call: const toolId data.id || tool_${Date.now()}; toolCards[toolId] { element: createToolCard(data.tool, data.query, toolId), status: running }; document.getElementById(toolArea).appendChild(toolCards[toolId].element); break; case tool_result: if (toolCards[data.tool_id]) { toolCards[data.tool_id].status done; const card toolCards[data.tool_id].element; card.querySelector(.tool-progress).textContent 已完成; card.querySelector(.tool-result).textContent 已獲取${data.result.length}條結(jié)果; } break; case llm_chunk: currentResponse data.token; document.getElementById(responseContent).innerHTML highlightText(currentResponse); // 滾動到底部 document.getElementById(responseArea).scrollTop document.getElementById(responseArea).scrollHeight; break; case error: alert(Agent錯誤: ${data.message}); closeEventSource(); break; } } // 創(chuàng)建工具調(diào)用卡片 function createToolCard(toolName, query, toolId) { const div document.createElement(div); div.className tool-card bg-gray-50 p-3 rounded border border-gray-200; div.innerHTML div classflex justify-between items-start div div classfont-medium text-gray-800${getToolIcon(toolName)} ${toolName}/div div classtext-sm text-gray-600 mt-1${query}/div /div button onclickcancelTool(${toolId}) classtext-xs text-red-500 hover:text-red-700取消/button /div div classmt-2 flex items-center div classtool-progress text-sm text-gray-500加載中.../div div classml-2 w-16 h-1.5 bg-gray-200 rounded-full overflow-hidden div classh-full bg-blue-500 rounded-full animate-pulse/div /div /div div classtool-result text-sm text-green-600 mt-1 hidden/div ; return div; } function getToolIcon(toolName) { const icons { search: , database: ?, api: }; return icons[toolName] || ??; } // 文本高亮函數(shù) function highlightText(text) { return text .replace(/(iPhone \d|Huawei Mate \d|Pro|Ultra)/g, span classtoken-noun$1/span) .replace(/(支持|搭載|優(yōu)于|強于|弱于|適合|推薦)/g, span classtoken-verb$1/span) .replace(/(\d萬|f\/\d\.\d|\dMP)/g, span classtoken-number$1/span) .replace(/(更.*?|最優(yōu)|最強|最佳)/g, span classtoken-comparative$1/span); } // 取消工具調(diào)用 window.cancelTool function(toolId) { if (toolCards[toolId] toolCards[toolId].status running) { fetch(/agent/cancel?tool_id${toolId}) .then(() { toolCards[toolId].status cancelled; toolCards[toolId].element.querySelector(.tool-progress).textContent 已取消; }); } }; // 啟動Agent流 document.getElementById(submitBtn).onclick function() { const query document.getElementById(queryInput).value.trim(); if (!query) return; // 關(guān)閉舊連接 closeEventSource(); // 創(chuàng)建新EventSource eventSource new EventSource(/agent/stream?query${encodeURIComponent(query)}); // 綁定事件 eventSource.addEventListener(status, handleEvent); eventSource.addEventListener(tool_call, handleEvent); eventSource.addEventListener(tool_result, handleEvent); eventSource.addEventListener(llm_chunk, handleEvent); eventSource.addEventListener(error, handleEvent); // 錯誤處理 eventSource.onerror function() { console.error(EventSource connection failed); document.getElementById(statusText).textContent 連接失敗請檢查網(wǎng)絡(luò); document.getElementById(pulseDot).className w-3 h-3 bg-red-500 rounded-full mr-3; }; }; // 關(guān)閉連接 function closeEventSource() { if (eventSource) { eventSource.close(); eventSource null; } // 清空UI currentResponse ; document.getElementById(responseContent).innerHTML ; document.getElementById(toolArea).innerHTML ; document.getElementById(statusText).textContent 等待輸入...; document.getElementById(pulseDot).className w-3 h-3 bg-blue-500 rounded-full mr-3 pulse; } /script /body /html實操心得高亮邏輯要輕量我們用正則而非復(fù)雜NLP庫因為highlightText()在每次llm_chunk事件中執(zhí)行必須保證1ms。正則/(iPhone \d)/g比new RegExp(iPhone \\d, g)快3倍V8引擎優(yōu)化。取消按鈕的實現(xiàn)前端點擊“取消”發(fā)送/agent/cancel?tool_idxxx請求服務(wù)端需有對應(yīng)接口終止后臺任務(wù)如asyncio.cancel(task)。這是用戶掌控感的核心。滾動到底部scrollTop scrollHeight是必須的否則長響應(yīng)會“消失”在視口外。但要注意頻繁設(shè)置scrollTop會觸發(fā)重排reflow我們用requestAnimationFrame做了節(jié)流但此處為簡化省略。4.4 Nginx部署配置讓SSE在生產(chǎn)環(huán)境穩(wěn)如磐石創(chuàng)建nginx.confupstream agent_backend { server 127.0.0.1:8000; } server { listen 80;