\u003Cbr/>Monaco Editor 作為一款輕量級(jí)、高性能的代碼編輯器，已經(jīng)成為現(xiàn)代Web開發(fā)中不可或缺的工具之一。它支持多種編程語言的語法高亮、代碼自動(dòng)補(bǔ)全、錯(cuò)誤提示、格式化等功能，能夠顯著提升開發(fā)效率。無論是JavaScript、JSON，還是MySQL等語言，Monaco Editor 都能提供卓越的編輯體驗(yàn)。\u003Cbr/>\u003Cbr/>而GPTBots作為基于GPT技術(shù)的智能體，具備強(qiáng)大的自然語言處理和代碼理解能力。將GPTBots與Monaco Editor相結(jié)合，不僅可以實(shí)現(xiàn)對(duì)代碼的智能化補(bǔ)全和優(yōu)化，還能通過自然語言與開發(fā)者交互，幫助開發(fā)者快速解決問題，甚至生成高質(zhì)量的代碼片段。\u003Cbr/>\u003Cbr/>本文將深入探討如何利用GPTBots的AI能力與Monaco Editor 的強(qiáng)大功能，構(gòu)建一個(gè)更智能、更高效的代碼編輯器。通過這一探索，我們希望為開發(fā)者提供一款真正AI賦能的開發(fā)工具，助力開發(fā)者在復(fù)雜的編程任務(wù)中如虎添翼。\u003Cbr/>\u003Cbr/>\u003Cb>什么是Monaco Editor\u003C/b>\u003Cbr/>MonacoEditor是它提供了與 VSCode類似的編輯體驗(yàn)，支持多種編程語言的語法高亮、代碼補(bǔ)全、錯(cuò)誤提示等功能，同時(shí)具有高度的可定制性。專門為Web環(huán)境設(shè)計(jì)，廣泛應(yīng)用于在線代碼編輯器、開發(fā)工具和教學(xué)平臺(tái)中。\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>Monaco Editor 的核心特點(diǎn)\u003C/b>\u003Cbr/>1. 多語言支持\u003Cbr/>（1）支持多種編程語言的語法高亮（如 JavaScript、HTML、CSS、Python 等），內(nèi)置語言解析器，提供精準(zhǔn)的高亮效果\u003Cbr/>（2）支持通過插件擴(kuò)展更多語言的支持\u003Cbr/>2. 關(guān)鍵字高亮\u003Cbr/>（1）提供精準(zhǔn)的語法高亮，能夠根據(jù)語言規(guī)則為關(guān)鍵字、變量、函數(shù)、注釋等添加不同的顏色和樣式\u003Cbr/>（2）支持自定義語法高亮規(guī)則，適配特殊語言或場(chǎng)景。\u003Cbr/>3. 代碼補(bǔ)全\u003Cbr/>（1）提供智能的代碼補(bǔ)全功能，根據(jù)上下文內(nèi)容和語言規(guī)則，實(shí)時(shí)提示變量、函數(shù)、方法等\u003Cbr/>（2）支持函數(shù)簽名提示，幫助開發(fā)者快速了解函數(shù)的參數(shù)和返回值\u003Cbr/>4. 錯(cuò)誤檢測(cè)與提示\u003Cbr/>（1）內(nèi)置錯(cuò)誤檢測(cè)功能，能夠?qū)崟r(shí)標(biāo)記語法錯(cuò)誤，并提供修復(fù)建議（如紅色波浪線提示錯(cuò)誤）\u003Cbr/>（2）支持自定義錯(cuò)誤提示規(guī)則，適配特定的編程語言或框架\u003Cbr/>5. 高定制化\u003Cbr/>（1）提供豐富的 API，允許開發(fā)者自定義編輯器的外觀、行為和功能\u003Cbr/>（2）支持插件擴(kuò)展，可以添加自定義語言支持、代碼提示規(guī)則等。\u003Cbr/>\u003Cbr/>\u003Cb>Monaco Editor 的優(yōu)缺點(diǎn)\u003C/b>\u003Cbr/>優(yōu)點(diǎn)：\u003Cbr/>（1）功能強(qiáng)大：支持語法高亮、代碼補(bǔ)全、錯(cuò)誤提示等，與 VSCode 的核心編輯功能一致。\u003Cbr/>（2）高度可定制：提供豐富的 API，允許開發(fā)者根據(jù)需求定制功能和外觀。\u003Cbr/>（3）跨平臺(tái)：基于瀏覽器運(yùn)行，適配所有支持現(xiàn)代瀏覽器的設(shè)備。\u003Cbr/>（4）輕量級(jí)：加載速度快，性能優(yōu)越，適合處理大文件和復(fù)雜代碼。\u003Cbr/>\u003Cbr/>缺點(diǎn)\u003Cbr/>（1）依賴瀏覽器環(huán)境：不能直接運(yùn)行在桌面環(huán)境中，適配性依賴于瀏覽器。\u003Cbr/>（2）功能有限：相比 VSCode，缺少調(diào)試、終端等高級(jí)功能。\u003Cbr/>（3）學(xué)習(xí)成本：對(duì)于初學(xué)者來說，配置和定制可能需要一定的學(xué)習(xí)時(shí)間。\u003Cbr/>\u003Cbr/>\u003Cb>使用Monaco Editor集成SQL編輯器\u003C/b>\u003Cbr/>monaco-editor-webpack-plugin對(duì)應(yīng)的Monaco Editor版本要兼容\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/221366/1.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>\u003C/p>\u003Cp style=\"line-height:2.5;\">1. 集成\u003Cbr/>項(xiàng)目依賴安裝\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/324998/2.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>配置rsbuild.config\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/986219/3.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>Webpack配置如下：\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/926129/4.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>頁面集成 Monaco Editor\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/147450/5.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>\u003C/p>\u003Cp style=\"line-height:2.5;\">2. SQL校驗(yàn)與優(yōu)化\u003Cbr/>使用 dt-sql-parser 實(shí)現(xiàn)基礎(chǔ)校驗(yàn)\u003Cbr/>dt-sql-parser支持多種SQL方言（如MySQL、Flink、Spark等），可以在前端實(shí)現(xiàn)基礎(chǔ)的語法校驗(yàn)。\u003Cbr/>優(yōu)點(diǎn)：\u003Cbr/>支持多種語言MySQL、Flink、park、Hive、PostgreSQL、Trino、Impala\u003Cbr/>局限性：\u003Cbr/>(1)前端單獨(dú)使用 dt-sql-parser 可以實(shí)現(xiàn)基礎(chǔ)的語法校驗(yàn)，但無法完成復(fù)雜的錯(cuò)誤校驗(yàn)（如語義校驗(yàn)、表結(jié)構(gòu)校驗(yàn)等）。\u003Cbr/>(2)如果需要更高級(jí)的校驗(yàn)功能（如檢查字段是否存在、表是否存在等），需要結(jié)合后端支持。\u003Cbr/>(3)后端支持校驗(yàn)方式\u003Cbr/> Python:\u003Cbr/> 通過工具（如 pyright）實(shí)現(xiàn)復(fù)雜的 SQL 校驗(yàn)邏輯。\u003Cbr/> 返回校驗(yàn)結(jié)果給前端。\u003Cbr/>(4)前端與后端的交互方式：WebSocket\u003Cbr/>3. 其他校驗(yàn)工具對(duì)比\u003Cbr/>sql-lint（需要后端服務(wù)）\u003Cbr/>優(yōu)點(diǎn)\u003Cbr/>1.輕量級(jí)：\u003Cbr/> (1)專注于 SQL 語法檢查，體積小，易于集成。\u003Cbr/> (2)提供代碼質(zhì)量建議\u003Cbr/> 缺點(diǎn):\u003Cbr/>1.僅限于語法檢查和代碼質(zhì)量建議，無法進(jìn)行復(fù)雜的語義分析（如表結(jié)構(gòu)校驗(yàn)、字段校驗(yàn)等）\u003Cbr/>2.無法檢查 SQL 的上下文（如表是否存在、字段是否有效等）\u003Cbr/>3.不提供 SQL 格式化功能，需要借助其他工具\(yùn)u003Cbr/>4.不支持代碼補(bǔ)全、關(guān)鍵字高亮等功能\u003Cbr/> (1)防抖接口調(diào)用：\u003Cbr/> ①前端通過防抖機(jī)制，減少頻繁的接口調(diào)用。\u003Cbr/> ② 每次用戶輸入 SQL 后，調(diào)用后端接口獲取校驗(yàn)結(jié)果。\u003Cbr/> (2)WebSocket 實(shí)時(shí)校驗(yàn)：\u003Cbr/> ①前端通過 WebSocket 與后端保持長(zhǎng)連接。\u003Cbr/> ②用戶輸入時(shí)，實(shí)時(shí)將 SQL 發(fā)送給后端，獲取校驗(yàn)結(jié)果。\u003Cbr/> (3)使用 Node.js 實(shí)現(xiàn)校驗(yàn)\u003Cbr/> ①可以直接使用 其他 SQL 解析器庫(kù)（如sql-parser（需要依賴fs模塊）、sql-lint需要依賴內(nèi)置模塊 util），解析 SQL 并返回校驗(yàn)結(jié)果。\u003Cbr/>sql-parser（需要后端服務(wù)）\u003Cbr/>優(yōu)點(diǎn)\u003Cbr/> 1. 能夠解析 SQL 語句并生成語法樹，適合復(fù)雜的 SQL 校驗(yàn)和分析\u003Cbr/> 缺點(diǎn):\u003Cbr/>需要一定的開發(fā)成本來解析語法樹并實(shí)現(xiàn)自定義校驗(yàn)邏輯。\u003Cbr/>對(duì)于大型 SQL 語句，解析語法樹可能會(huì)帶來一定的性能開銷\u003Cbr/>學(xué)習(xí)成本較大\u003Cbr/>4.所用插件\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/809735/6.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>5.問題點(diǎn)\u003Cbr/>創(chuàng)建Monaco Editor編輯器時(shí)，使用ref儲(chǔ)存編輯器實(shí)例會(huì)導(dǎo)致頁面會(huì)卡死\u003Cbr/>原因是Vue的響應(yīng)式，系統(tǒng)會(huì)對(duì) ref 中的對(duì)象進(jìn)行代理，而 編輯器實(shí)例 返回的對(duì)象包含復(fù)雜的內(nèi)部狀態(tài)或非普通對(duì)象屬性\u003Cbr/>解決辦法\u003Cbr/>1.使用實(shí)例調(diào)用方法使用toRaw，獲取響應(yīng)式對(duì)象的原始值，再調(diào)用方法\u003Cbr/>2.不使用響應(yīng)式的方式儲(chǔ)存實(shí)例，（利用let的方式儲(chǔ)存）\u003Cbr/>安裝Monaco Editor會(huì)出現(xiàn)告警\u003Cbr/>原因是因?yàn)橐蕾囀褂胷equire式無法靜態(tài)提取依賴項(xiàng)\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/267431/7.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>解決方式有：\u003Cbr/>1.忽略告警\u003C/p>\u003Cp>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/506526/8.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003C/p>\u003Cp style=\"line-height:2.5;\">2.使用cdn方式引入Monaco Editor\u003Cbr/>提示MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker告警\u003Cbr/>原因getWorkerUrl和getWorker主要是用于異步加載和管理代碼編輯環(huán)境中的工作線程（Worker），這些線程可以在后臺(tái)執(zhí)行一些計(jì)算密集型的任務(wù)，比如語法分析和實(shí)時(shí)錯(cuò)誤檢測(cè)。\u003Cbr/>getWorkerUrl\u003Cbr/>函數(shù)返回一個(gè)URL，可以從動(dòng)態(tài)加載Monaco工作進(jìn)程（worker），這對(duì)于跨域請(qǐng)求或者自定義worker腳本是有必要的\u003Cbr/>monacoEnvironment.getWorker\u003Cbr/>則會(huì)根據(jù)給定的語言類型創(chuàng)建并返回一個(gè)新的工作線程實(shí)例\u003Cbr/>解決方法：\u003Cbr/>要有處理worker的方法函數(shù)\u003Cbr/>1.自定義getWorkerUrl函數(shù)用來告訴 Monaco Editor 如何獲取 worker 腳本（引用對(duì)應(yīng)語言的worker）\u003Cbr/>2.使用插件monaco-editor-webpack-plugin，內(nèi)部自動(dòng)做好需要加載語言worker的處理\u003Cbr/>6. SQL功能點(diǎn)\u003Cbr/>編輯器限制最大行數(shù)\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/618102/9.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>防止用戶粘貼文本超出最大行數(shù)\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/911158/10.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>超過最大行數(shù)，撤回用戶輸入新行\(zhòng)u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/189060/11.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>代碼提示功能\u003Cbr/>主要邏輯是使用monaco.languages.registerCompletionItemProvide方法注冊(cè)關(guān)鍵字列表，返回對(duì)應(yīng)列表的suggestions\u003Cbr/>suggestions數(shù)組格式為\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/492900/12.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/224676/13.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>輸入特定字符提示快捷變量名\u003Cbr/>例如輸入{{}}展示快捷變量名\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/206035/14.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>標(biāo)記錯(cuò)誤信息\u003Cbr/>* 設(shè)置標(biāo)記信息，eslint標(biāo)記的所有者\(yùn)u003Cbr/>* editor 編輯器模型\u003Cbr/>* range 每個(gè)標(biāo)記是一個(gè)對(duì)象，描述了標(biāo)記的范圍\u003Cbr/>* type 標(biāo)記的錯(cuò)誤類型\u003Cbr/>* message 標(biāo)記消息\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/445396/15.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>檢測(cè) SQL 代碼的語法錯(cuò)誤\u003Cbr/>首先引入dt-sql-parser庫(kù)\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/263208/16.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>總結(jié)：\u003C/b>\u003Cbr/>Monaco Editor 是一款功能強(qiáng)大、靈活且高性能的代碼編輯器，適合在Web環(huán)境中實(shí)現(xiàn)復(fù)雜的代碼編輯功能，雖然Monaco Editor在功能上存在一些局限性（如不支持調(diào)試、復(fù)雜校驗(yàn)等），但通過結(jié)合后端服務(wù)和其他工具，可以實(shí)現(xiàn)更高級(jí)的功能。通過按需加載、性能優(yōu)化和用戶體驗(yàn)改進(jìn)，\u003Cbr/>但是Monaco Editor官方文檔可讀性太差了，沒有例子，就一段描述\u003Cbr/>\u003Cbr/>\u003Cb>參考：\u003C/b>\u003Cbr/>https://microsoft.github.io/monaco-editor/docs.html\u003Cbr/>https://wf0.github.io/api/editor.html\u003Cbr/>\u003C/p>","隨著人工智能技術(shù)的飛速發(fā)展，AI智能體在各個(gè)領(lǐng)域的應(yīng)用變得越來越廣泛，在代碼開發(fā)領(lǐng)域，智能體的作用愈發(fā)重要。",[41],"https://sdkfiledl.jiguang.cn/public-picture/2025-07-08/772959/博客封面 - 800px400px.png","2025-07-08 15:59:58","2025-07-08 16:13:30","2025-07-08 16:17:17",[],{"id":63,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":64,"content":65,"summary":66,"tag":67,"author":19,"category":70,"coverLink":71,"seoTitle":64,"seoKeywords":72,"seoDescription":73,"publishTime":74,"createTime":75,"updateTime":76,"internalLinkList":77,"sideType":20,"languageType":30},89,"EngageLab深度解析：AI 驅(qū)動(dòng)的全渠道營(yíng)銷自動(dòng)化如何賦能業(yè)務(wù)高速增長(zhǎng)","\u003Cp style=\"line-height:2.5;\">在用戶注意力稀缺、觸點(diǎn)分散的今天，傳統(tǒng)營(yíng)銷已難以滿足增長(zhǎng)需求。EngageLab Marketing Automation（營(yíng)銷自動(dòng)化）平臺(tái)，以AI技術(shù)為核心驅(qū)動(dòng)，融合全渠道觸達(dá)能力，專為尋求精細(xì)化運(yùn)營(yíng)和高速增長(zhǎng)的企業(yè)（尤其跨境出海企業(yè)）打造，助您輕松玩轉(zhuǎn)客戶經(jīng)營(yíng)，搶占全球市場(chǎng)先機(jī)！\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>EngageLab MA：不止于自動(dòng)化，更是智能增長(zhǎng)引擎\u003C/b>\u003Cbr/>EngageLab MA 的核心競(jìng)爭(zhēng)力，在于深度整合的技術(shù)與對(duì)業(yè)務(wù)場(chǎng)景的理解：\u003Cbr/>\u003Cb>1.原生全渠道觸達(dá)：體驗(yàn)無縫，送達(dá)無憂 ?\u003C/b>\u003Cbr/>（1）\u003Cb>主流渠道全覆蓋：\u003C/b>原生支持AppPush, WebPush, Email, SMS, WhatsApp 等，API 開放可擴(kuò)展。\u003Cbr/>（2）\u003Cb>統(tǒng)一用戶視圖： \u003C/b>跨渠道精準(zhǔn)識(shí)別同一用戶(EUID)，展現(xiàn)用戶的全景畫像。\u003Cbr/>（3）\u003Cb>高送達(dá)率保障：\u003C/b>原生集成 EngageLab 強(qiáng)大的底層消息服務(wù)(AppPush 送達(dá)率提升40%，Email 高達(dá)99.97%)，確保信息高效可靠傳遞。\u003C/p>\u003Cp style=\"line-height:2.5;\">（4）\u003Cb>全球服務(wù)節(jié)點(diǎn)：\u003C/b> 美國(guó)/德國(guó)/新加坡/香港全球多節(jié)點(diǎn)，低延遲、高可用、保合規(guī)。\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>2.可視化旅程編排：拖拽之間，策略落地 ??\u003C/b>\u003Cbr/>（1）\u003Cb>豐富場(chǎng)景模板\u003C/b>（注冊(cè)、試用、購(gòu)物車、生日等），快速上線。\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/424374/640.gif\" style=\"max-width:100%;\" contenteditable=\"false\"/>（2）\u003Cb>拖拽式界面\u003C/b>，無需代碼，輕松設(shè)計(jì)復(fù)雜流程。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/233773/640-1.gif\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003C/p>\u003Cp style=\"line-height:2.5;\">（3）\u003Cb>多觸發(fā)器、條件判斷、動(dòng)作\u003C/b>，滿足多樣自動(dòng)化需求（歡迎、促活、挽回、培育...）。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/686855/640-2.gif\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>3.實(shí)時(shí)用戶數(shù)據(jù)平臺(tái)：洞察用戶，精準(zhǔn)出擊 ??\u003C/b>\u003Cbr/>（1）全面監(jiān)控營(yíng)銷自動(dòng)化旅程中的各消息通道發(fā)送、點(diǎn)擊與折損，提供詳盡報(bào)表，有助于快速定位問題。\u003Cbr/>（2）用戶行為深度追蹤，智能整合消息反饋與用戶行為數(shù)據(jù)，實(shí)現(xiàn)行為歸因分析。\u003Cbr/>（3）收入轉(zhuǎn)化分析，自動(dòng)計(jì)算ROI，聚焦高價(jià)值策略。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/733362/640.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>4. AI深度賦能：讓營(yíng)銷更“聰明” ??\u003C/b>\u003Cbr/>（1）\u003Cb>AI 寫文案：\u003C/b>AI一鍵生成多語言營(yíng)銷文案，效率提升。\u003Cbr/>（2）\u003Cb>AI 懂用戶：\u003C/b> 智能預(yù)測(cè)用戶行為（購(gòu)買、流失），實(shí)現(xiàn)前瞻性觸達(dá)。\u003Cbr/>（3）\u003Cb>AI 優(yōu)策略：\u003C/b> 智能推薦最佳發(fā)送時(shí)機(jī)與渠道，提升互動(dòng)。\u003Cbr/>（4）\u003Cb>AI 助分析：\u003C/b> 自動(dòng)解讀數(shù)據(jù)，驅(qū)動(dòng)優(yōu)化。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/552441/640-1.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>\u003Cbr/>\u003C/b>\u003C/p>\u003Cp style=\"line-height:2.5;\">\u003Cb>EngageLab MA 實(shí)戰(zhàn)場(chǎng)景\u003C/b>\u003Cbr/>1、電商零售- 購(gòu)物車放棄挽回與復(fù)購(gòu)促進(jìn)：\u003Cbr/>自動(dòng)分流高價(jià)值客戶，推送個(gè)性化優(yōu)惠，多渠道跟進(jìn)，提升轉(zhuǎn)化與復(fù)購(gòu)。\u003Cbr/>\u003Cb>MA應(yīng)用舉例：\u003C/b>以“加入購(gòu)物車”事件為觸發(fā)點(diǎn)，系統(tǒng)會(huì)判斷用戶在1小時(shí)內(nèi)是否完成付款。\u003Cbr/>（1）如果未完成，將通過AppPush和WebPush推送「優(yōu)惠信息」；\u003Cbr/>（2）等待1小時(shí)后，若用戶仍未付款，則再次推送「其他優(yōu)惠消息」。\u003Cbr/>在整個(gè)用戶旅程中，還可以靈活引入如“用戶屬性（是否為VIP）”、“用戶行為（是否收藏商品、瀏覽商品時(shí)長(zhǎng)超過5分鐘）”等多維度條件，進(jìn)行A/B測(cè)試，進(jìn)一步優(yōu)化轉(zhuǎn)化效果。\u003Cbr/>\u003Cbr/>\u003Cb>2、SaaS - 從試用到付費(fèi)的全生命周期管理\u003C/b>：\u003Cbr/>注冊(cè)后自動(dòng)引導(dǎo)，智能分流PQL/MQL，自動(dòng)培育與轉(zhuǎn)化，提升付費(fèi)率。\u003Cbr/>\u003Cb>MA應(yīng)用舉例：\u003C/b>以“注冊(cè)成功”事件為觸發(fā)點(diǎn)，系統(tǒng)將自動(dòng)發(fā)送Email和In-App Message，向新用戶推送「產(chǎn)品使用指引」。\u003Cbr/>（1）若用戶在3天內(nèi)未完成“產(chǎn)品試用”事件，則通過Email再次發(fā)送「引導(dǎo)信息，提升試用轉(zhuǎn)化率」。\u003Cbr/>（2）若用戶已完成“產(chǎn)品試用”事件，系統(tǒng)將等待7天后，自動(dòng)推送「付費(fèi)優(yōu)惠信息」，促進(jìn)用戶轉(zhuǎn)化為付費(fèi)客戶。\u003Cbr/>\u003Cbr/>\u003Cb>3、游戲出海-新手引導(dǎo)與付費(fèi)轉(zhuǎn)化：\u003C/b>\u003Cbr/>新手引導(dǎo)任務(wù)旅程，定期推送游戲內(nèi)的最新活動(dòng)、福利信息和社區(qū)動(dòng)態(tài)，觸發(fā)首充激勵(lì)，流失預(yù)警與召回。\u003Cbr/>\u003Cb>MA應(yīng)用舉例：\u003C/b>以“注冊(cè)成功”事件為觸發(fā)點(diǎn)，系統(tǒng)將自動(dòng)發(fā)送Email和AppPush，推送「新手引導(dǎo)信息」，幫助新用戶快速上手。\u003Cbr/>（1）若用戶在1天內(nèi)未完成“充值”操作，則通過Email和SMS發(fā)送「首充優(yōu)惠消息」，激勵(lì)用戶完成首次充值。\u003Cbr/>（2）若用戶在2天內(nèi)未訪問游戲，系統(tǒng)將通過Email、SMS和WhatsApp推送「回歸福利消息」，喚醒沉睡用戶，提升活躍度。\u003Cbr/>\u003Cb>更多關(guān)于實(shí)戰(zhàn)的深度解析，近期將上線，敬請(qǐng)期待！\u003C/b>\u003Cbr/>\u003Cbr/>\u003Cb>EngageLab MA 全棧能力一覽\u003C/b>\u003Cbr/>無論是全渠道消息觸達(dá)、AI智能賦能，還是數(shù)據(jù)安全與開發(fā)者友好，EngageLab MA都以一站式平臺(tái)為企業(yè)提供從營(yíng)銷自動(dòng)化到精細(xì)化運(yùn)營(yíng)的全流程支持。我們將核心能力高度集成，開發(fā)者可便捷調(diào)用，企業(yè)可靈活擴(kuò)展，助力全球業(yè)務(wù)高速增長(zhǎng)。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/764870/640-2.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cb>準(zhǔn)備好開啟智能營(yíng)銷新篇章了嗎？\u003C/b>\u003Cbr/>新老用戶注冊(cè)或登錄賬戶，即可體驗(yàn)！\u003Cbr/>https://www.engagelab.com/zh_CN/accounts/signin\u003C/p>","在用戶注意力稀缺、觸點(diǎn)分散的今天，傳統(tǒng)營(yíng)銷已難以滿足增長(zhǎng)需求。EngageLab Marketing Automation（營(yíng)銷自動(dòng)化）平臺(tái)，以AI技術(shù)為核心驅(qū)動(dòng)，融合全渠道觸達(dá)能力，專為尋求精細(xì)化運(yùn)營(yíng)和高速增長(zhǎng)的企業(yè)（尤其跨境出海企業(yè)）打造，助您輕松玩轉(zhuǎn)客戶經(jīng)營(yíng)，搶占全球市場(chǎng)先機(jī)！",[68,69],"EngageLab","MA","產(chǎn)品動(dòng)態(tài)","https://sdkfiledl.jiguang.cn/public-picture/2025-06-25/251447/博客封面 - 800px400px.png","EngageLab, MA, 營(yíng)銷自動(dòng)化","在用戶注意力稀缺、觸點(diǎn)分散的今天，傳統(tǒng)營(yíng)銷已難以滿足增長(zhǎng)需求。EngageLab Marketing Automation（營(yíng)銷自動(dòng)化）平臺(tái)，以AI技","2025-06-25 16:29:51","2025-06-25 16:49:37","2025-06-25 16:50:51",[78,81,84],{"anchorText":79,"linkUrl":80},"歸因分析","http://www.youxiatong.com/analysis",{"anchorText":82,"linkUrl":83},"精細(xì)化運(yùn)營(yíng)","http://www.youxiatong.com/operation",{"anchorText":85,"linkUrl":80},"用戶行為數(shù)據(jù)",{"id":87,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":88,"content":89,"summary":90,"tag":91,"author":19,"category":22,"coverLink":92,"seoTitle":88,"seoKeywords":41,"seoDescription":93,"publishTime":94,"createTime":95,"updateTime":96,"internalLinkList":97,"sideType":20,"languageType":30},88,"GPTBots使用fetch-event-source實(shí)現(xiàn)SSE POST傳參","\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">SSE（Server-Sent Events）技術(shù)因其基于HTTP、原生支持以及實(shí)現(xiàn)簡(jiǎn)單的特點(diǎn)，非常適合大模型流式輸出數(shù)據(jù)的場(chǎng)景，許多大模型廠商因此提供支持SSE的API。GPTBots也推出了支持SSE的對(duì)話API，近期對(duì)Web頁面進(jìn)行技術(shù)升級(jí)，SSE使用標(biāo)準(zhǔn)Event Source API被改造為基于fetch-event-source實(shí)現(xiàn)，從而支持POST請(qǐng)求傳參。本文將圍繞相關(guān)技術(shù)知識(shí)展開，進(jìn)行對(duì)比分析并解析其原理。\u003Cbr/>\u003Cbr/>\u003Cb>一、什么是SSE\u003C/b>\u003Cbr/>SSE（Server-Sent Events）是一種基于HTTP協(xié)議的服務(wù)器推送技術(shù)，允許服務(wù)器向客戶端發(fā)送實(shí)時(shí)更新。它是HTML5標(biāo)準(zhǔn)的一部分，旨在提供一種輕量級(jí)的方式，使瀏覽器能夠接收來自服務(wù)器的事件流。SSE的核心是EventSource接口，它為客戶端提供了與服務(wù)器建立單向連接的能力，從而實(shí)現(xiàn)消息的實(shí)時(shí)傳遞。\u003Cbr/>\u003Cbr/>SSE的工作原理非常簡(jiǎn)單：客戶端通過HTTP請(qǐng)求向服務(wù)器發(fā)起連接，服務(wù)器在保持連接的同時(shí)，持續(xù)地以文本流的形式發(fā)送事件數(shù)據(jù)?？蛻舳私邮盏綌?shù)據(jù)后，可以通過JavaScript代碼處理這些事件。\u003Cbr/>\u003Cbr/>SSE的主要特點(diǎn)包括：\u003Cbr/>（1）單向通信：服務(wù)器可以主動(dòng)向客戶端推送數(shù)據(jù)，但客戶端無法通過同一連接向服務(wù)器發(fā)送數(shù)據(jù)。\u003Cbr/>（2）自動(dòng)重連：當(dāng)連接意外斷開時(shí)，瀏覽器會(huì)自動(dòng)嘗試重新連接。\u003Cbr/>（3）輕量級(jí)協(xié)議：基于HTTP協(xié)議，易于實(shí)現(xiàn)和調(diào)試。\u003Cbr/>（4）支持事件類型：支持自定義事件類型，便于對(duì)不同類型的數(shù)據(jù)流進(jìn)行處理。\u003Cbr/>\u003Cbr/>SSE非常適合大模型流式返回?cái)?shù)據(jù)的場(chǎng)景，因此很多模型服務(wù)廠商提供了SSE的接口，前端接入后可以實(shí)現(xiàn)打字機(jī)效果，實(shí)時(shí)輸出和展示大模型的回復(fù)內(nèi)容。\u003Cbr/>\u003Cbr/>\u003Cb>二、SSE和WebSocket技術(shù)對(duì)比\u003C/b>\u003Cbr/>SSE和WebSocket都是實(shí)現(xiàn)實(shí)時(shí)通信的技術(shù)，但它們的設(shè)計(jì)理念和適用場(chǎng)景存在顯著差異。\u003Cbr/>\u003Cimg src=\"https://sdkfiledl.jiguang.cn/public-picture/2025-06-23/827544/640.jpg\" style=\"max-width:100%;\" contenteditable=\"false\"/>\u003Cbr/>\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">選擇SSE還是WebSocket，取決于具體的業(yè)務(wù)需求。如果只需要服務(wù)器向客戶端推送數(shù)據(jù)，且對(duì)通信性能要求不高，SSE是一個(gè)簡(jiǎn)單高效的選擇；而如果需要雙向通信或?qū)π阅芤筝^高，WebSocket則更為適合。\u003Cbr/>\u003Cbr/>\u003Cb>三、標(biāo)準(zhǔn)的EventSource API\u003C/b>\u003Cbr/>在瀏覽器中，SSE通過EventSource對(duì)象實(shí)現(xiàn)。以下是EventSource API的主要特性和用法：\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>1. 創(chuàng)建EventSource對(duì)象\u003C/b>\u003Cbr/>使用EventSource對(duì)象時(shí)，需要指定服務(wù)器的URL：\u003Cbr/>const eventSource = new EventSource(https://example.com/sse);\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>2. 事件監(jiān)聽\u003C/b>\u003Cbr/>EventSource支持三種事件類型：\u003Cbr/>message：處理默認(rèn)事件。\u003Cbr/>open：連接成功時(shí)觸發(fā)。\u003Cbr/>error：連接出錯(cuò)或斷開時(shí)觸發(fā)。\u003Cbr/>示例代碼：\u003Cbr/>eventSource.onopen = function(event) {\u003Cbr/> console.log('Connection opened:', event);\u003Cbr/>};\u003Cbr/>eventSource.onmessage = function(event) {\u003Cbr/> console.log('Message received:', event.data);\u003Cbr/>};\u003Cbr/>eventSource.onerror = function(event) {\u003Cbr/> console.error('Error occurred:', event);\u003Cbr/>};\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>3. 自定義事件類型\u003C/b>\u003Cbr/>服務(wù)器可以發(fā)送自定義事件類型，客戶端可以通過addEventListener監(jiān)聽：\u003Cbr/>eventSource.addEventListener('custom-event', function(event) {\u003Cbr/> console.log('Custom event received:', event.data);\u003Cbr/>});\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>4. 關(guān)閉連接\u003C/b>\u003Cbr/>可以通過調(diào)用close()方法手動(dòng)關(guān)閉連接：\u003Cbr/>eventSource.close();\u003Cbr/>console.log('Connection closed');\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>5. 服務(wù)器發(fā)送數(shù)據(jù)格式\u003C/b>\u003Cbr/>服務(wù)器需要按照以下格式發(fā)送數(shù)據(jù)：\u003Cbr/>data: Hello, World!\u003Cbr/>event: custom-event\u003Cbr/>id: 12345\u003Cbr/>retry: 3000\u003Cbr/>data：事件數(shù)據(jù)。\u003Cbr/>event：事件類型（可選）。\u003Cbr/>id：事件ID，用于斷線重連時(shí)恢復(fù)狀態(tài)（可選）。\u003Cbr/>retry：指定重連間隔時(shí)間（以毫秒為單位，可選）。\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>四、@microsoft/fetch-event-source 介紹\u003C/b>\u003Cbr/>@microsoft/fetch-event-source是微軟開發(fā)的一個(gè)輕量級(jí)庫(kù)，用于在Node.js和瀏覽器環(huán)境中實(shí)現(xiàn)SSE（Server-Sent Events）。與原生的EventSource相比，它提供了更多的靈活性和功能，例如支持自定義HTTP方法（如POST）、請(qǐng)求頭、認(rèn)證、請(qǐng)求體等。\u003Cbr/>npm倉(cāng)庫(kù)：https://www.npmjs.com/package/@microsoft/fetch-event-source。\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>1. 安裝\u003C/b>\u003Cbr/>可以通過npm或yarn安裝：\u003Cbr/>npm install @microsoft/fetch-event-source\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>2. 使用示例\u003C/b>\u003Cbr/>以下是一個(gè)簡(jiǎn)單的使用示例：\u003Cbr/>import { fetchEventSource } from '@microsoft/fetch-event-source';\u003Cbr/>fetchEventSource(https://example.com/sse, {\u003Cbr/> method: POST,\u003Cbr/> headers: {\u003Cbr/> Content-Type: application/json,\u003Cbr/> Authorization: Bearer YOUR_TOKEN,\u003Cbr/> },\u003Cbr/> body: JSON.stringify({ key: value }),\u003Cbr/> onopen(response) {\u003Cbr/> if (response.ok && response.headers.get('content-type') === 'text/event-stream') {\u003Cbr/> console.log('Connection established');\u003Cbr/> } else {\u003Cbr/> console.error('Connection failed');\u003Cbr/> }\u003Cbr/> },\u003Cbr/> onmessage(event) {\u003Cbr/> console.log('Message received:', event.data);\u003Cbr/> },\u003Cbr/> onclose() {\u003Cbr/> console.log('Connection closed by server');\u003Cbr/> },\u003Cbr/> onerror(err) {\u003Cbr/> console.error('Error occurred:', err);\u003Cbr/> },\u003Cbr/>});\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>3. 特性\u003C/b>\u003Cbr/>（1）支持自定義HTTP方法（如POST）。 \u003Cbr/>（2）支持請(qǐng)求頭和請(qǐng)求體。 \u003Cbr/>（3）提供事件鉤子（如onopen、onmessage、onclose、onerror）。 \u003Cbr/>（4）支持?jǐn)嗑€重連。\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>五、@microsoft/fetch-event-source 原理解析\u003C/b>\u003Cbr/>@microsoft/fetch-event-source的實(shí)現(xiàn)基于fetch API，通過流式處理實(shí)現(xiàn)了SSE的功能。以下是其核心實(shí)現(xiàn)原理的解析：\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>1. 核心邏輯\u003C/b>\u003Cbr/>該庫(kù)的核心邏輯是使用fetch API發(fā)起HTTP請(qǐng)求，并通過ReadableStream解析服務(wù)器返回的事件流。\u003Cbr/>源碼片段（簡(jiǎn)化版）：\u003Cbr/>async function fetchEventSource(url, options) {\u003Cbr/> const response = await fetch(url, options);\u003Cbr/> const reader = response.body.getReader();\u003Cbr/> const decoder = new TextDecoder();\u003Cbr/> let buffer = '';\u003Cbr/> while (true) {\u003Cbr/> const { done, value } = await reader.read();\u003Cbr/> if (done) break;\u003Cbr/> buffer += decoder.decode(value, { stream: true });\u003Cbr/> const lines = buffer.split('\\n');\u003Cbr/> buffer = lines.pop(); // 保留未完整的行\(zhòng)u003Cbr/> for (const line of lines) {\u003Cbr/> if (line.startsWith('data:')) {\u003Cbr/> const data = line.slice(5).trim();\u003Cbr/> options.onmessage({ data });\u003Cbr/> }\u003Cbr/> }\u003Cbr/> }\u003Cbr/> options.onclose();\u003Cbr/>}\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>2. POST傳參的實(shí)現(xiàn)\u003C/b>\u003Cbr/>與原生EventSource不同，該庫(kù)允許通過POST方法發(fā)送參數(shù)。實(shí)現(xiàn)方式是將請(qǐng)求體傳遞給fetch API：\u003Cbr/>fetch(url, {\u003Cbr/> method: 'POST',\u003Cbr/> headers: options.headers,\u003Cbr/> body: options.body,\u003Cbr/>});\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>3. 自動(dòng)重連\u003C/b>\u003Cbr/>當(dāng)連接斷開時(shí)，庫(kù)會(huì)自動(dòng)嘗試重新連接：\u003Cbr/>setTimeout(() => {\u003Cbr/> fetchEventSource(url, options);\u003Cbr/>}, retryInterval);\u003C/p>\u003Cp data-we-empty-p=\"\" style=\"line-height:2.5;\">\u003Cbr/>\u003Cb>4. 錯(cuò)誤處理\u003C/b>\u003Cbr/>通過try-catch捕獲錯(cuò)誤，并調(diào)用onerror回調(diào)：\u003Cbr/>try {\u003Cbr/> // 讀取流數(shù)據(jù)\u003Cbr/>} catch (err) {\u003Cbr/> options.onerror(err);\u003Cbr/>}\u003C/p>","SSE（Server-Sent Events）技術(shù)因其基于HTTP、原生支持以及實(shí)現(xiàn)簡(jiǎn)單的特點(diǎn)，非常適合大模型流式輸出數(shù)據(jù)的場(chǎng)景，許多大模型廠商因此提供支持SSE的API。",[41],"https://sdkfiledl.jiguang.cn/public-picture/2025-06-23/444388/未命名的設(shè)計(jì).png","SSE（Server-Sent Events）技術(shù)因其基于HTTP、原生支持以及實(shí)現(xiàn)簡(jiǎn)單的特點(diǎn)，非常適合大模型流式輸出數(shù)據(jù)的場(chǎng)景，許多大模型廠商因此提","2025-06-23 21:35:47","2025-06-23 21:45:16","2025-06-23 21:46:50",[98,99,102],{"anchorText":49,"linkUrl":50},{"anchorText":100,"linkUrl":101},"服務(wù)器推送","http://www.youxiatong.com/push",{"anchorText":103,"linkUrl":101},"推送技術(shù)",[105,109,113,116,122],{"id":16,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":7,"content":33,"summary":8,"tag":106,"author":19,"category":22,"coverLink":6,"seoTitle":7,"seoKeywords":23,"seoDescription":8,"publishTime":24,"createTime":25,"updateTime":14,"internalLinkList":107,"sideType":20,"languageType":30},[12],[108],{"anchorText":28,"linkUrl":29},{"id":17,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":18,"content":38,"summary":39,"tag":110,"author":19,"category":22,"coverLink":42,"seoTitle":18,"seoKeywords":43,"seoDescription":39,"publishTime":44,"createTime":45,"updateTime":46,"internalLinkList":111,"sideType":20,"languageType":30},[41],[112],{"anchorText":49,"linkUrl":50},{"id":52,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":53,"content":54,"summary":55,"tag":114,"author":19,"category":22,"coverLink":57,"seoTitle":53,"seoKeywords":41,"seoDescription":55,"publishTime":58,"createTime":59,"updateTime":60,"internalLinkList":115,"sideType":20,"languageType":30},[41],[],{"id":63,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":64,"content":65,"summary":66,"tag":117,"author":19,"category":70,"coverLink":71,"seoTitle":64,"seoKeywords":72,"seoDescription":73,"publishTime":74,"createTime":75,"updateTime":76,"internalLinkList":118,"sideType":20,"languageType":30},[68,69],[119,120,121],{"anchorText":79,"linkUrl":80},{"anchorText":82,"linkUrl":83},{"anchorText":85,"linkUrl":80},{"id":87,"lastId":19,"lastTitle":19,"nextId":19,"nextTitle":19,"status":20,"title":88,"content":89,"summary":90,"tag":123,"author":19,"category":22,"coverLink":92,"seoTitle":88,"seoKeywords":41,"seoDescription":93,"publishTime":94,"createTime":95,"updateTime":96,"internalLinkList":124,"sideType":20,"languageType":30},[41],[125,126,127],{"anchorText":49,"linkUrl":50},{"anchorText":100,"linkUrl":101},{"anchorText":103,"linkUrl":101},[],["Reactive",130],{"$snuxt-i18n-meta":131},{},["Set"],["ShallowReactive",134],{"blogBannerData":19,"hotBlogList":19,"aboutBlogList":19,"$kuwAeAxGO7":19},true,"/blog/92"]