[{"data":1,"prerenderedAt":511},["ShallowReactive",2],{"content-/blog/sse-implementation":3,"related-blog":486},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":480,"_id":481,"_source":482,"_file":483,"_stem":484,"_extension":485},"/blog/sse-implementation","blog",false,"","SSE 实现详解","Server-Sent Events 技术实现，实时推送数据到客户端","SSE 实现详解, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":475},"root",[18,26,33,48,54,84,89,97,101,106,469],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","SSE（Server-Sent Events）是实现单向服务器推送的简单方案，适合流式日志、状态更新或轻量级实时通知。本文介绍实现模式、心跳/重连与与回退策略。",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"sse-优势与限制",[31],{"type":24,"value":32},"SSE 优势与限制",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":24,"value":42},"优势：实现简单、基于 HTTP，易于通过代理与 CDN 回源；浏览器端支持 EventSource API。",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":24,"value":47},"限制：仅支持单向流（服务器到客户端），对大量并发连接需要注意服务器资源（每个连接保持 HTTP 长连接）。",{"type":19,"tag":27,"props":49,"children":51},{"id":50},"实现要点nodejs-示例",[52],{"type":24,"value":53},"实现要点（Node.js 示例）",{"type":19,"tag":34,"props":55,"children":56},{},[57,71],{"type":19,"tag":38,"props":58,"children":59},{},[60,62,69],{"type":24,"value":61},"在服务端设置合适的 ",{"type":19,"tag":63,"props":64,"children":66},"code",{"className":65},[],[67],{"type":24,"value":68},"Content-Type: text/event-stream",{"type":24,"value":70},"、禁用响应缓存并定期发送心跳以防连接断开。",{"type":19,"tag":38,"props":72,"children":73},{},[74,76,82],{"type":24,"value":75},"提供重连策略：客户端默认会在连接断开后自动重连，可在事件中发送 ",{"type":19,"tag":63,"props":77,"children":79},{"className":78},[],[80],{"type":24,"value":81},"retry",{"type":24,"value":83}," 指令调整重连间隔。",{"type":19,"tag":27,"props":85,"children":87},{"id":86},"伸缩与回退",[88],{"type":24,"value":86},{"type":19,"tag":34,"props":90,"children":91},{},[92],{"type":19,"tag":38,"props":93,"children":94},{},[95],{"type":24,"value":96},"对于高并发情形使用连接池或转发层（如 Nginx、Envoy）并监控连接数；必要时回退到 WebSocket 或短轮询方案。",{"type":19,"tag":98,"props":99,"children":100},"hr",{},[],{"type":19,"tag":20,"props":102,"children":103},{},[104],{"type":24,"value":105},"示例参考：",{"type":19,"tag":107,"props":108,"children":112},"pre",{"className":109,"code":110,"language":111,"meta":7,"style":7},"language-js shiki shiki-themes github-dark github-dark","// 简化的 Express SSE 示例\napp.get('/sse', (req, res) => {\n    res.setHeader('Content-Type', 'text/event-stream');\n    res.setHeader('Cache-Control', 'no-cache');\n    res.write('retry: 10000\\n\\n');\n    const id = setInterval(() => res.write(`data: ${JSON.stringify({ t: Date.now() })}\\n\\n`), 3000);\n    req.on('close', () => clearInterval(id));\n});\n","js",[113],{"type":19,"tag":63,"props":114,"children":115},{"__ignoreMap":7},[116,128,192,229,263,300,418,460],{"type":19,"tag":117,"props":118,"children":121},"span",{"class":119,"line":120},"line",1,[122],{"type":19,"tag":117,"props":123,"children":125},{"style":124},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[126],{"type":24,"value":127},"// 简化的 Express SSE 示例\n",{"type":19,"tag":117,"props":129,"children":131},{"class":119,"line":130},2,[132,138,144,149,155,160,166,171,176,181,187],{"type":19,"tag":117,"props":133,"children":135},{"style":134},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[136],{"type":24,"value":137},"app.",{"type":19,"tag":117,"props":139,"children":141},{"style":140},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[142],{"type":24,"value":143},"get",{"type":19,"tag":117,"props":145,"children":146},{"style":134},[147],{"type":24,"value":148},"(",{"type":19,"tag":117,"props":150,"children":152},{"style":151},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[153],{"type":24,"value":154},"'/sse'",{"type":19,"tag":117,"props":156,"children":157},{"style":134},[158],{"type":24,"value":159},", (",{"type":19,"tag":117,"props":161,"children":163},{"style":162},"--shiki-default:#FFAB70;--shiki-dark:#FFAB70",[164],{"type":24,"value":165},"req",{"type":19,"tag":117,"props":167,"children":168},{"style":134},[169],{"type":24,"value":170},", ",{"type":19,"tag":117,"props":172,"children":173},{"style":162},[174],{"type":24,"value":175},"res",{"type":19,"tag":117,"props":177,"children":178},{"style":134},[179],{"type":24,"value":180},") ",{"type":19,"tag":117,"props":182,"children":184},{"style":183},"--shiki-default:#F97583;--shiki-dark:#F97583",[185],{"type":24,"value":186},"=>",{"type":19,"tag":117,"props":188,"children":189},{"style":134},[190],{"type":24,"value":191}," {\n",{"type":19,"tag":117,"props":193,"children":195},{"class":119,"line":194},3,[196,201,206,210,215,219,224],{"type":19,"tag":117,"props":197,"children":198},{"style":134},[199],{"type":24,"value":200},"    res.",{"type":19,"tag":117,"props":202,"children":203},{"style":140},[204],{"type":24,"value":205},"setHeader",{"type":19,"tag":117,"props":207,"children":208},{"style":134},[209],{"type":24,"value":148},{"type":19,"tag":117,"props":211,"children":212},{"style":151},[213],{"type":24,"value":214},"'Content-Type'",{"type":19,"tag":117,"props":216,"children":217},{"style":134},[218],{"type":24,"value":170},{"type":19,"tag":117,"props":220,"children":221},{"style":151},[222],{"type":24,"value":223},"'text/event-stream'",{"type":19,"tag":117,"props":225,"children":226},{"style":134},[227],{"type":24,"value":228},");\n",{"type":19,"tag":117,"props":230,"children":232},{"class":119,"line":231},4,[233,237,241,245,250,254,259],{"type":19,"tag":117,"props":234,"children":235},{"style":134},[236],{"type":24,"value":200},{"type":19,"tag":117,"props":238,"children":239},{"style":140},[240],{"type":24,"value":205},{"type":19,"tag":117,"props":242,"children":243},{"style":134},[244],{"type":24,"value":148},{"type":19,"tag":117,"props":246,"children":247},{"style":151},[248],{"type":24,"value":249},"'Cache-Control'",{"type":19,"tag":117,"props":251,"children":252},{"style":134},[253],{"type":24,"value":170},{"type":19,"tag":117,"props":255,"children":256},{"style":151},[257],{"type":24,"value":258},"'no-cache'",{"type":19,"tag":117,"props":260,"children":261},{"style":134},[262],{"type":24,"value":228},{"type":19,"tag":117,"props":264,"children":266},{"class":119,"line":265},5,[267,271,276,280,285,291,296],{"type":19,"tag":117,"props":268,"children":269},{"style":134},[270],{"type":24,"value":200},{"type":19,"tag":117,"props":272,"children":273},{"style":140},[274],{"type":24,"value":275},"write",{"type":19,"tag":117,"props":277,"children":278},{"style":134},[279],{"type":24,"value":148},{"type":19,"tag":117,"props":281,"children":282},{"style":151},[283],{"type":24,"value":284},"'retry: 10000",{"type":19,"tag":117,"props":286,"children":288},{"style":287},"--shiki-default:#79B8FF;--shiki-dark:#79B8FF",[289],{"type":24,"value":290},"\\n\\n",{"type":19,"tag":117,"props":292,"children":293},{"style":151},[294],{"type":24,"value":295},"'",{"type":19,"tag":117,"props":297,"children":298},{"style":134},[299],{"type":24,"value":228},{"type":19,"tag":117,"props":301,"children":303},{"class":119,"line":302},6,[304,309,314,319,324,329,333,338,342,346,351,356,361,366,371,376,380,385,390,395,399,404,409,414],{"type":19,"tag":117,"props":305,"children":306},{"style":183},[307],{"type":24,"value":308},"    const",{"type":19,"tag":117,"props":310,"children":311},{"style":287},[312],{"type":24,"value":313}," id",{"type":19,"tag":117,"props":315,"children":316},{"style":183},[317],{"type":24,"value":318}," =",{"type":19,"tag":117,"props":320,"children":321},{"style":140},[322],{"type":24,"value":323}," setInterval",{"type":19,"tag":117,"props":325,"children":326},{"style":134},[327],{"type":24,"value":328},"(() ",{"type":19,"tag":117,"props":330,"children":331},{"style":183},[332],{"type":24,"value":186},{"type":19,"tag":117,"props":334,"children":335},{"style":134},[336],{"type":24,"value":337}," res.",{"type":19,"tag":117,"props":339,"children":340},{"style":140},[341],{"type":24,"value":275},{"type":19,"tag":117,"props":343,"children":344},{"style":134},[345],{"type":24,"value":148},{"type":19,"tag":117,"props":347,"children":348},{"style":151},[349],{"type":24,"value":350},"`data: ${",{"type":19,"tag":117,"props":352,"children":353},{"style":287},[354],{"type":24,"value":355},"JSON",{"type":19,"tag":117,"props":357,"children":358},{"style":151},[359],{"type":24,"value":360},".",{"type":19,"tag":117,"props":362,"children":363},{"style":140},[364],{"type":24,"value":365},"stringify",{"type":19,"tag":117,"props":367,"children":368},{"style":151},[369],{"type":24,"value":370},"({ t: ",{"type":19,"tag":117,"props":372,"children":373},{"style":134},[374],{"type":24,"value":375},"Date",{"type":19,"tag":117,"props":377,"children":378},{"style":151},[379],{"type":24,"value":360},{"type":19,"tag":117,"props":381,"children":382},{"style":140},[383],{"type":24,"value":384},"now",{"type":19,"tag":117,"props":386,"children":387},{"style":151},[388],{"type":24,"value":389},"() })",{"type":19,"tag":117,"props":391,"children":392},{"style":151},[393],{"type":24,"value":394},"}",{"type":19,"tag":117,"props":396,"children":397},{"style":287},[398],{"type":24,"value":290},{"type":19,"tag":117,"props":400,"children":401},{"style":151},[402],{"type":24,"value":403},"`",{"type":19,"tag":117,"props":405,"children":406},{"style":134},[407],{"type":24,"value":408},"), ",{"type":19,"tag":117,"props":410,"children":411},{"style":287},[412],{"type":24,"value":413},"3000",{"type":19,"tag":117,"props":415,"children":416},{"style":134},[417],{"type":24,"value":228},{"type":19,"tag":117,"props":419,"children":421},{"class":119,"line":420},7,[422,427,432,436,441,446,450,455],{"type":19,"tag":117,"props":423,"children":424},{"style":134},[425],{"type":24,"value":426},"    req.",{"type":19,"tag":117,"props":428,"children":429},{"style":140},[430],{"type":24,"value":431},"on",{"type":19,"tag":117,"props":433,"children":434},{"style":134},[435],{"type":24,"value":148},{"type":19,"tag":117,"props":437,"children":438},{"style":151},[439],{"type":24,"value":440},"'close'",{"type":19,"tag":117,"props":442,"children":443},{"style":134},[444],{"type":24,"value":445},", () ",{"type":19,"tag":117,"props":447,"children":448},{"style":183},[449],{"type":24,"value":186},{"type":19,"tag":117,"props":451,"children":452},{"style":140},[453],{"type":24,"value":454}," clearInterval",{"type":19,"tag":117,"props":456,"children":457},{"style":134},[458],{"type":24,"value":459},"(id));\n",{"type":19,"tag":117,"props":461,"children":463},{"class":119,"line":462},8,[464],{"type":19,"tag":117,"props":465,"children":466},{"style":134},[467],{"type":24,"value":468},"});\n",{"type":19,"tag":470,"props":471,"children":472},"style",{},[473],{"type":24,"value":474},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":194,"depth":194,"links":476},[477,478,479],{"id":29,"depth":130,"text":32},{"id":50,"depth":130,"text":53},{"id":86,"depth":130,"text":86},"markdown","content:blog:sse-implementation.md","content","blog/sse-implementation.md","blog/sse-implementation","md",[487,495,503],{"_path":488,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":489,"description":490,"keywords":491,"author":11,"date":12,"category":13,"image":14,"_type":480,"_id":492,"_source":482,"_file":493,"_stem":494,"_extension":485},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":496,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":497,"description":498,"keywords":499,"author":11,"date":12,"category":13,"image":14,"_type":480,"_id":500,"_source":482,"_file":501,"_stem":502,"_extension":485},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":504,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":505,"description":506,"keywords":507,"author":11,"date":12,"category":13,"image":14,"_type":480,"_id":508,"_source":482,"_file":509,"_stem":510,"_extension":485},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277206]