前端流式渲染EventSource数据,并且渲染marked格式

<think>好的，用户想了解如何在前端使用EventSource实现流式渲染，并用marked库渲染Markdown格式。首先，我需要回忆EventSource的基本用法，它是HTML5的一部分，用于服务器推送事件。然后，marked库的作用是将Markdown转换为HTML，所以需要正确引入和使用。 接下来，考虑步骤。首先，创建EventSource实例连接到服务器端点。然后监听message事件接收数据。数据可能分块传输，需要逐步累加。同时，使用marked解析可能需要处理流式数据，可能每次接收到数据就更新DOM，或者积累到一定量再渲染。 还要注意错误处理，比如网络中断或服务器错误，需要监听error事件并处理。此外，考虑跨域问题，确保服务器设置了正确的CORS头。 然后，代码结构大概分为初始化EventSource，定义数据接收处理函数，实时更新页面元素内容，并用marked转换。可能需要防抖或定时更新，避免频繁操作DOM影响性能。 用户可能遇到的问题包括数据拼接、Markdown解析的时机、以及如何实时显示。需要示例代码展示这些步骤，比如在接收到数据时不断追加到div，然后用marked解析整个内容。或者逐块解析，但可能效率较低。 最后，生成相关问题，如EventSource和WebSocket的区别，如何优化流式渲染性能，处理Markdown的安全问题，以及服务器端如何推送数据。确保覆盖用户可能进一步想知道的内容。</think>以下是如何在前端使用 `EventSource` 实现流式渲染，并结合 `marked` 库解析 Markdown 格式的详细教程： --- ### 1. 基础实现步骤 #### 1.1 引入依赖库 ```html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> ``` #### 1.2 创建 EventSource 连接 ```javascript const eventSource = new EventSource('/stream-data'); let accumulatedContent = ''; // 存储累积的流式数据 eventSource.onmessage = (event) => { accumulatedContent += event.data; // 追加新数据 const htmlContent = marked.parse(accumulatedContent); // 实时转换为 HTML document.getElementById('output').innerHTML = htmlContent; }; eventSource.onerror = (error) => { console.error('EventSource 错误:', error); eventSource.close(); }; ``` --- ### 2. 优化渲染性能（防抖模式） ```javascript let renderTimer; eventSource.onmessage = (event) => { accumulatedContent += event.data; clearTimeout(renderTimer); // 清除旧定时器 renderTimer = setTimeout(() => { // 延迟渲染减少 DOM 操作 document.getElementById('output').innerHTML = marked.parse(accumulatedContent); }, 100); // 100ms 延迟可根据需求调整 }; ``` --- ### 3. 服务端示例（Node.js） ```javascript app.get('/stream-data', (req, res) => { res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); const markdownChunks = [ '# 实时数据流\n\n', '```javascript\nconsole.log("Hello World");\n```\n\n', '**当前时间**: ' + new Date().toISOString() ]; // 模拟分块发送 markdownChunks.forEach((chunk, index) => { setTimeout(() => { res.write(`data: ${JSON.stringify(chunk)}\n\n`); if (index === markdownChunks.length - 1) res.end(); }, index * 500); }); }); ``` --- ### 4. 安全增强建议 ```javascript // 配置 marked 的 XSS 过滤 marked.setOptions({ sanitize: true, // 启用 HTML 标签过滤 breaks: true // 转换换行为 <br> }); // 使用 DOMPurify 二次过滤 import DOMPurify from 'dompurify'; document.getElementById('output').innerHTML = DOMPurify.sanitize(marked.parse(content)); ``` --- ### 关键点说明 1. **流式拼接**：通过 `accumulatedContent` 变量持续累积数据片段[^2] 2. **渲染优化**：使用防抖模式减少高频 DOM 操作带来的性能损耗 3. **安全处理**：结合 `marked` 的 XSS 过滤和 `DOMPurify` 双重防护[^3] 4. **错误处理**：通过 `onerror` 捕获连接异常并优雅降级 ---