当前位置：首页 > wzjs >正文

舞蹈学校网站模板seo网站有优化培训班吗

wzjs 2025/7/21 4:36:15

舞蹈学校网站模板,seo网站有优化培训班吗,广告网页制作,电子商务经营范围有哪些?前言在现代前端开发中，特别是涉及AI对话、实时客服系统等场景时，流式数据处理已成为一项关键技术。本文将深入探讨流式数据的特点、转义字符处理的必要性，以及在实际项目中的最佳实践，帮助开发者构建高效、流畅的用户交互体验。…

前言

在现代前端开发中，特别是涉及AI对话、实时客服系统等场景时，流式数据处理已成为一项关键技术。本文将深入探讨流式数据的特点、转义字符处理的必要性，以及在实际项目中的最佳实践，帮助开发者构建高效、流畅的用户交互体验。

1. 流式数据处理基础

1.1 什么是流式数据？

流式数据（Streaming Data）是指数据以连续、实时的方式传输，而不是一次性完整传输。在前端应用中，流式数据通常来自于：

AI回复的实时生成文本
服务器发送事件（Server-Sent Events，SSE）
WebSocket连接中的消息推送
长轮询（Long Polling）返回的分块数据

1.2 流式数据的核心特点

实时性：数据一边生成一边传输，用户无需等待完整响应
增量性：数据以小块形式陆续到达，需要不断追加显示
不确定性：无法预知数据总量和结束时间
格式多样：可能包含各种转义字符和特殊格式标记

1.3 前端开发中的挑战

处理流式数据时，前端开发者面临以下挑战：

数据解析：需要正确解析可能不完整的JSON或其他格式
增量渲染：需要高效地将新数据追加到已显示内容中
格式转换：处理换行符、特殊字符等转义字符
UI更新：保持平滑的用户体验，避免界面抖动
性能优化：频繁DOM更新可能导致性能问题

2. 为什么需要转义字符转HTML

2.1 转义字符的问题

在流式数据中，特别是AI生成的文本回复中，经常包含各种转义字符（如\n、\t、\r等）和Markdown风格的格式标记（如*加粗*、_斜体_等）。这些字符在原始文本中不会被浏览器正确解析为格式化内容：

换行符不会自动转换：\n在HTML中不会自动换行，除非在<pre>标签中或CSS设置了white-space: pre
格式标记不会被解析：*加粗*、_斜体_等Markdown标记在HTML中只会显示为普通字符
特殊字符可能导致安全问题：未处理的<、>等字符可能被解析为HTML标签，造成XSS风险

2.2 为什么不直接使用富文本编辑器

虽然可以使用现成的富文本编辑器组件（如CKEditor、TinyMCE等）来显示格式化内容，但在处理流式数据时存在以下问题：

实时更新困难：富文本编辑器通常设计用于编辑完整内容，而非增量更新
性能开销大：富文本编辑器包含大量功能，对于简单的文本显示来说过于臃肿
控制粒度受限：对特定转义字符的处理方式难以精确控制
样式一致性：富文本编辑器的默认样式可能与应用整体UI不一致
流式数据兼容性差：在处理持续更新的流式数据时，富文本编辑器可能出现光标跳动、内容重排等问题

2.3 自定义转换的优势

通过自定义的转义字符到HTML的转换函数，我们可以：

精确控制：根据业务需求定制转换规则
高效渲染：只转换必要的字符，减少不必要的DOM操作
增量友好：适合流式数据的增量追加场景
一致的样式：确保转换后的HTML符合应用的设计规范
安全可控：防止XSS等安全问题

3. 转义字符处理实现

下面我们来看一个实际的转义字符处理函数实现：

/*** 将转义字符转换为HTML格式* @param {string} text - 包含转义字符的文本* @returns {string} - 转换后的HTML格式文本*/
export function escapeToHtml(text) {if (!text) return '';// 处理基本的转义字符let html = text.replace(/\n/g, '<br>') // 换行符转换为<br>标签.replace(/\t/g, '&emsp;&emsp;') // 制表符转换为空格.replace(/\r/g, '') // 回车符删除.replace(/\\'/g, "'") // 转义的单引号.replace(/\\"/g, '"') // 转义的双引号.replace(/\\\\/g, '\\'); // 转义的反斜杠// 处理HTML特殊字符，防止XSS攻击html = html.replace(/</g, '&lt;').replace(/>/g, '&gt;');// 处理Markdown风格的格式标记（简单实现）// 加粗html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');// 斜体html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');// 行内代码html = html.replace(/`(.+?)`/g, '<code>$1</code>');// 处理代码块（多行代码）html = html.replace(/```(\w*)\n([\s\S]+?)```/g, function(match, language, code) {return '<pre><code class="language-' + (language || 'plaintext') + '">' + code.replace(/&lt;/g, '<').replace(/&gt;/g, '>') + '</code></pre>';});return html;
}

这个函数实现了基本的转义字符处理，包括：

基本转义字符（\n, \t, \r等）转换为HTML标签
HTML特殊字符（<, >等）转义，防止XSS攻击
简单的Markdown格式标记转换为HTML标签

3.1 处理更复杂的格式

对于更复杂的格式需求，我们可以扩展上述函数：

/*** 增强版转义字符处理函数* @param {string} text - 原始文本* @returns {string} - 处理后的HTML*/
export function enhancedEscapeToHtml(text) {if (!text) return '';// 先处理HTML特殊字符，防止XSSlet html = text.replace(/</g, '&lt;').replace(/>/g, '&gt;');// 保存代码块，避免内部内容被其他规则处理const codeBlocks = [];html = html.replace(/```([\s\S]+?)```/g, function(match) {const placeholder = `__CODE_BLOCK_${codeBlocks.length}__`;codeBlocks.push(match);return placeholder;});// 处理基本转义字符html = html.replace(/\n/g, '<br>').replace(/\t/g, '&emsp;&emsp;').replace(/\r/g, '').replace(/\\'/g, "'").replace(/\\"/g, '"').replace(/\\\\/g, '\\');// 处理Markdown格式// 标题html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');// 列表html = html.replace(/^- (.+)$/gm, '<li>$1</li>');html = html.replace(/(<li>.+<\/li>\s*)+/g, '<ul>$&</ul>');// 加粗和斜体html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');// 链接html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');// 恢复代码块html = html.replace(/__CODE_BLOCK_(\d+)__/g, function(match, index) {const codeBlock = codeBlocks[parseInt(index)];const language = codeBlock.match(/```(\w*)/)[1] || 'plaintext';const code = codeBlock.replace(/```\w*\n([\s\S]+?)```/, '$1');return '<pre><code class="language-' + language + '">' + code.replace(/&lt;/g, '<').replace(/&gt;/g, '>') + '</code></pre>';});return html;
}

3.2 在Vue组件中使用

以下是在Vue组件中使用转义字符处理函数的示例：

<template><div class="message-container"><div v-html="formattedMessage" class="message-content"></div></div>
</template><script>
import { escapeToHtml } from '@/utils/formatText';export default {props: {message: {type: String,default: ''}},computed: {formattedMessage() {return escapeToHtml(this.message);}}
}
</script><style scoped>
.message-container {padding: 10px;background-color: #f9f9f9;border-radius: 8px;
}.message-content :deep(code) {background-color: #f0f0f0;padding: 2px 4px;border-radius: 4px;font-family: monospace;
}.message-content :deep(pre) {background-color: #282c34;color: #abb2bf;padding: 16px;border-radius: 8px;overflow-x: auto;
}
</style>

4. 前端流式数据处理流程

4.1 流式数据接收与解析

处理流式数据的第一步是建立连接并接收数据。以下是几种常见的流式数据接收方式：

4.1.1 使用Server-Sent Events (SSE)

/*** 使用SSE接收流式数据* @param {string} url - SSE接口地址* @param {Function} onMessage - 消息处理回调* @param {Function} onError - 错误处理回调* @returns {EventSource} - SSE连接实例*/
function connectSSE(url, onMessage, onError) {const eventSource = new EventSource(url);eventSource.onmessage = (event) => {try {// 解析数据（可能是JSON或纯文本）const data = event.data.startsWith('{') ? JSON.parse(event.data) : event.data;onMessage(data);} catch (error) {console.error('解析SSE消息失败:', error);onError(error);}};eventSource.onerror = (error) => {console.error('SSE连接错误:', error);onError(error);eventSource.close();};return eventSource;
}

4.1.2 使用Fetch API的流式响应

/*** 使用Fetch API接收流式数据* @param {string} url - 接口地址* @param {Object} options - fetch选项* @param {Function} onChunk - 数据块处理回调* @param {Function} onComplete - 完成处理回调* @param {Function} onError - 错误处理回调*/
async function streamFetch(url, options, onChunk, onComplete, onError) {try {const response = await fetch(url, options);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const reader = response.body.getReader();const decoder = new TextDecoder();let buffer = '';while (true) {const { done, value } = await reader.read();if (done) {if (buffer) {onChunk(buffer);}onComplete();break;}// 解码二进制数据为文本const chunk = decoder.decode(value, { stream: true });buffer += chunk;// 处理可能的分隔符（如换行符）const lines = buffer.split('\n');buffer = lines.pop(); // 保留最后一个可能不完整的行// 处理完整的行for (const line of lines) {if (line.trim()) {try {// 尝试解析JSON，如果失败则作为纯文本处理const data = line.startsWith('{') ? JSON.parse(line) : line;onChunk(data);} catch (e) {onChunk(line);}}}}} catch (error) {console.error('流式请求错误:', error);onError(error);}
}

4.2 增量渲染与状态管理

接收到流式数据后，需要高效地进行增量渲染。以下是一个Vue组件示例，展示如何处理流式数据并进行增量渲染：

<template><div class="chat-container"><div class="messages"><div v-for="(msg, index) in messages" :key="index" class="message" :class="msg.role"><div class="avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div><div class="content"><div v-if="msg.role === 'assistant' && msg.isStreaming" class="typing-indicator"><span></span><span></span><span></span></div><div v-html="formatMessage(msg.content)" class="message-text"></div></div></div></div><div class="input-area"><textarea v-model="userInput" @keydown.enter.prevent="sendMessage" placeholder="输入消息..."></textarea><button @click="sendMessage" :disabled="isLoading">发送</button></div></div>
</template><script>
import { escapeToHtml } from '@/utils/formatText';export default {data() {return {messages: [],userInput: '',isLoading: false,currentStreamingIndex: -1};},methods: {formatMessage(text) {return escapeToHtml(text);},async sendMessage() {if (!this.userInput.trim() || this.isLoading) return;// 添加用户消息this.messages.push({role: 'user',content: this.userInput,isStreaming: false});const userMessage = this.userInput;this.userInput = '';this.isLoading = true;// 添加助手消息（初始为空，准备接收流式数据）this.messages.push({role: 'assistant',content: '',isStreaming: true});this.currentStreamingIndex = this.messages.length - 1;try {// 发起流式请求await this.fetchStreamingResponse(userMessage);} catch (error) {console.error('获取回复失败:', error);// 更新错误状态this.messages[this.currentStreamingIndex].content = '抱歉，获取回复时出现错误。';} finally {// 完成流式接收this.messages[this.currentStreamingIndex].isStreaming = false;this.isLoading = false;this.currentStreamingIndex = -1;// 滚动到底部this.$nextTick(() => {this.scrollToBottom();});}},async fetchStreamingResponse(message) {const apiUrl = '/api/chat/stream';const response = await fetch(apiUrl, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ message }),});if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) break;// 解码并追加新内容const chunk = decoder.decode(value, { stream: true });this.appendStreamChunk(chunk);// 滚动到底部this.$nextTick(() => {this.scrollToBottom();});}},appendStreamChunk(chunk) {if (this.currentStreamingIndex >= 0) {// 追加新内容到当前流式消息this.messages[this.currentStreamingIndex].content += chunk;}},scrollToBottom() {const container = document.querySelector('.messages');if (container) {container.scrollTop = container.scrollHeight;}}}
};
</script><style scoped>
/* 样式省略 */
</style>

4.3 处理特殊情况

在实际应用中，流式数据处理可能遇到各种特殊情况，需要特别处理：

4.3.1 处理连接中断

/*** 带重试功能的SSE连接* @param {string} url - SSE接口地址* @param {Function} onMessage - 消息处理回调* @param {Object} options - 配置选项*/
function connectSSEWithRetry(url, onMessage, options = {}) {const {maxRetries = 3,retryDelay = 2000,onError = () => {},onRetry = () => {},onMaxRetriesReached = () => {}} = options;let retryCount = 0;let eventSource;function connect() {eventSource = new EventSource(url);eventSource.onmessage = onMessage;eventSource.onerror = (error) => {onError(error);eventSource.close();if (retryCount < maxRetries) {retryCount++;onRetry(retryCount, retryDelay);setTimeout(() => {connect();}, retryDelay);} else {onMaxRetriesReached();}};}connect();return {close: () => {if (eventSource) {eventSource.close();}}};
}

4.3.2 处理不完整的JSON

/*** 处理可能不完整的JSON流* @param {string} chunk - 接收到的数据块* @param {string} buffer - 累积的缓冲区* @returns {Object} - 处理结果*/
function handleJsonStream(chunk, buffer = '') {buffer += chunk;const result = {parsedObjects: [],remainingBuffer: buffer};// 尝试从缓冲区中提取完整的JSON对象let startPos = buffer.indexOf('{');while (startPos !== -1) {try {// 尝试解析从startPos开始的JSONconst obj = JSON.parse(buffer.substring(startPos));result.parsedObjects.push(obj);result.remainingBuffer = '';break;} catch (e) {// 如果解析失败，尝试找到一个有效的JSON结束位置let endPos = buffer.lastIndexOf('}');if (endPos > startPos) {try {const obj = JSON.parse(buffer.substring(startPos, endPos + 1));result.parsedObjects.push(obj);result.remainingBuffer = buffer.substring(endPos + 1);buffer = result.remainingBuffer;startPos = buffer.indexOf('{');continue;} catch (e) {// 无法解析，继续查找下一个可能的起始位置}}// 找不到有效的JSON，保留缓冲区等待更多数据break;}}return result;
}

5. 性能优化与最佳实践

5.1 减少DOM操作

频繁的DOM操作是流式数据渲染中的主要性能瓶颈。以下是一些减少DOM操作的策略：

5.1.1 使用虚拟DOM框架

框架如Vue、React等使用虚拟DOM可以批量处理DOM更新，减少实际DOM操作次数。

5.1.2 批量更新策略

/*** 批量更新策略* @param {Function} updateFn - 更新函数* @param {number} delay - 批处理延迟（毫秒）*/
function createBatchUpdater(updateFn, delay = 100) {let buffer = '';let timeout = null;return function(chunk) {buffer += chunk;// 清除现有定时器if (timeout) {clearTimeout(timeout);}// 设置新定时器timeout = setTimeout(() => {if (buffer) {updateFn(buffer);buffer = '';}}, delay);};
}// 使用示例
const batchUpdate = createBatchUpdater((text) => {document.getElementById('output').innerHTML += escapeToHtml(text);
});// 接收流式数据时调用
streamFetch(url, options, batchUpdate);

5.2 内存管理

长时间接收流式数据可能导致内存占用过高，需要注意内存管理：

5.2.1 限制历史消息数量

/*** 限制数组长度的辅助函数* @param {Array} array - 要限制的数组* @param {number} maxLength - 最大长度*/
function limitArrayLength(array, maxLength) {if (array.length > maxLength) {array.splice(0, array.length - maxLength);}
}// 在Vue组件中使用
watch: {messages(newMessages) {// 限制最多保留100条消息limitArrayLength(this.messages, 100);}
}

5.2.2 使用Web Workers处理大量数据

对于需要大量计算的数据处理，可以使用Web Workers避免阻塞主线程：

// 主线程代码
const worker = new Worker('text-processor.js');worker.onmessage = function(e) {// 接收处理后的结果document.getElementById('output').innerHTML += e.data;
};// 接收到流式数据后发送给Worker处理
streamFetch(url, options, chunk => {worker.postMessage(chunk);
});// text-processor.js (Worker文件)
importScripts('escape-to-html.js'); // 导入处理函数onmessage = function(e) {// 处理文本const processed = escapeToHtml(e.data);postMessage(processed);
};

5.3 用户体验优化

5.3.1 添加打字机效果

为了增强用户体验，可以添加打字机效果，使AI回复看起来更自然：

/*** 打字机效果函数* @param {string} text - 要显示的文本* @param {Function} onUpdate - 更新回调* @param {Function} onComplete - 完成回调* @param {Object} options - 配置选项*/
function typewriterEffect(text, onUpdate, onComplete, options = {}) {const {speed = 30,variance = 10,minSpeed = 10} = options;let index = 0;let displayText = '';function type() {if (index < text.length) {// 添加下一个字符displayText += text[index];onUpdate(displayText);index++;// 随机变化打字速度，使效果更自然const randomSpeed = Math.max(minSpeed,speed + Math.floor(Math.random() * variance * 2) - variance);setTimeout(type, randomSpeed);} else {onComplete();}}type();
}

5.3.2 滚动优化

在长对话中，自动滚动到最新消息是必要的，但简单的滚动实现可能导致以下问题：

频繁滚动：每次接收到新数据块就触发滚动，可能导致界面抖动
滚动中断：用户正在查看历史消息时，自动滚动会打断用户的阅读体验
性能问题：频繁调用滚动API可能导致性能下降

以下是一个优化的滚动实现：

/*** 智能滚动管理器* @param {string} containerSelector - 容器选择器* @param {Object} options - 配置选项*/
function createScrollManager(containerSelector, options = {}) {const {threshold = 100, // 距离底部多少像素内认为是"接近底部"smoothScroll = true // 是否使用平滑滚动} = options;// 获取容器元素const getContainer = () => document.querySelector(containerSelector);// 检查是否接近底部const isNearBottom = () => {const container = getContainer();if (!container) return false;const { scrollTop, scrollHeight, clientHeight } = container;return scrollHeight - scrollTop - clientHeight <= threshold;};// 记录上次是否接近底部let wasNearBottom = true;return {// 智能滚动到底部（仅当之前接近底部时）scrollToBottom: () => {if (wasNearBottom) {const container = getContainer();if (container) {// 更新前记录是否接近底部wasNearBottom = isNearBottom();if (smoothScroll) {container.scrollTo({top: container.scrollHeight,behavior: 'smooth'});} else {container.scrollTop = container.scrollHeight;}}}},// 强制滚动到底部（无论当前位置）forceScrollToBottom: () => {const container = getContainer();if (container) {if (smoothScroll) {container.scrollTo({top: container.scrollHeight,behavior: 'smooth'});} else {container.scrollTop = container.scrollHeight;}wasNearBottom = true;}},// 更新是否接近底部的状态updateScrollState: () => {wasNearBottom = isNearBottom();return wasNearBottom;},// 获取是否接近底部isNearBottom};
}// 使用示例
const scrollManager = createScrollManager('.messages');// 接收到新数据时
streamFetch(url, options, chunk => {// 更新DOMappendContent(chunk);// 智能滚动scrollManager.scrollToBottom();
});// 用户点击"滚动到底部"按钮时
scrollButton.addEventListener('click', () => {scrollManager.forceScrollToBottom();
});

5.3.3 用户反馈指示器

在流式数据加载过程中，提供适当的视觉反馈非常重要：

/*** 创建加载指示器管理器* @param {string} containerSelector - 容器选择器* @param {Object} options - 配置选项*/
function createLoadingIndicator(containerSelector, options = {}) {const {loadingClass = 'is-loading',typingClass = 'is-typing',completeClass = 'is-complete',errorClass = 'is-error'} = options;// 获取容器元素const getContainer = () => document.querySelector(containerSelector);return {// 显示加载状态showLoading: () => {const container = getContainer();if (container) {container.classList.add(loadingClass);container.classList.remove(typingClass, completeClass, errorClass);}},// 显示打字中状态showTyping: () => {const container = getContainer();if (container) {container.classList.add(typingClass);container.classList.remove(loadingClass, completeClass, errorClass);}},// 显示完成状态showComplete: () => {const container = getContainer();if (container) {container.classList.add(completeClass);container.classList.remove(loadingClass, typingClass, errorClass);// 添加短暂的过渡动画后移除完成状态setTimeout(() => {container.classList.remove(completeClass);}, 1000);}},// 显示错误状态showError: () => {const container = getContainer();if (container) {container.classList.add(errorClass);container.classList.remove(loadingClass, typingClass, completeClass);}},// 重置所有状态reset: () => {const container = getContainer();if (container) {container.classList.remove(loadingClass, typingClass, completeClass, errorClass);}}};
}// 使用示例
const loadingIndicator = createLoadingIndicator('.message-container');// 开始请求时
async function fetchData() {loadingIndicator.showLoading();try {// 开始接收流式数据const response = await fetch('/api/stream');loadingIndicator.showTyping();// 处理流式数据...// 完成接收loadingIndicator.showComplete();} catch (error) {loadingIndicator.showError();console.error('Error:', error);}
}

5.4 安全考虑

在处理流式数据时，安全性是一个重要考虑因素：

5.4.1 XSS防护

/*** 安全的HTML渲染函数* @param {string} text - 原始文本* @param {Object} options - 配置选项* @returns {string} - 安全处理后的HTML*/
function safeHtmlRender(text, options = {}) {const {allowedTags = ['br', 'p', 'strong', 'em', 'code', 'pre', 'ul', 'ol', 'li'],allowedAttributes = {'a': ['href', 'target'],'code': ['class'],'pre': ['class']}} = options;// 1. 首先进行基本的HTML转义let html = escapeToHtml(text);// 2. 使用DOMPurify进行额外的安全过滤（如果可用）if (typeof DOMPurify !== 'undefined') {html = DOMPurify.sanitize(html, {ALLOWED_TAGS: allowedTags,ALLOWED_ATTR: Object.keys(allowedAttributes).reduce((attrs, tag) => {return [...attrs, ...allowedAttributes[tag]];}, [])});}return html;
}

5.4.2 内容安全策略 (CSP)

在处理流式数据时，应当配置适当的内容安全策略，特别是当内容包含用户生成的HTML时：

<!-- 在HTML头部添加CSP -->  
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' api.example.com;">

5.5 错误处理与恢复

流式数据处理中的错误处理需要特别注意，因为错误可能发生在数据流的任何阶段：

/*** 带错误恢复的流式数据处理* @param {string} url - 接口地址* @param {Object} options - 配置选项* @param {Function} onChunk - 数据块处理回调* @returns {Object} - 控制器对象*/
function resilientStreamProcessor(url, options = {}, onChunk) {const {maxRetries = 3,retryDelay = 2000,timeout = 30000,onError = () => {},onComplete = () => {},onRetry = () => {}} = options;let abortController = new AbortController();let retryCount = 0;let lastReceivedIndex = -1;let buffer = '';const processStream = async () => {try {const fetchOptions = {...options.fetchOptions,signal: abortController.signal,headers: {...options.fetchOptions?.headers,'Last-Received-Index': lastReceivedIndex.toString()}};// 设置超时const timeoutId = setTimeout(() => {abortController.abort();}, timeout);const response = await fetch(url, fetchOptions);clearTimeout(timeoutId);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const { done, value } = await reader.read();if (done) {onComplete();break;}const chunk = decoder.decode(value, { stream: true });buffer += chunk;// 处理数据块，可能包含索引信息const processedChunks = processChunksWithIndex(buffer);buffer = processedChunks.remainingBuffer;// 更新最后接收的索引if (processedChunks.chunks.length > 0) {const lastChunk = processedChunks.chunks[processedChunks.chunks.length - 1];if (lastChunk.index !== undefined) {lastReceivedIndex = Math.max(lastReceivedIndex, lastChunk.index);}// 调用回调处理每个数据块processedChunks.chunks.forEach(chunk => onChunk(chunk.data));}}} catch (error) {if (error.name === 'AbortError') {onError(new Error('请求超时'));} else {onError(error);}// 尝试重试if (retryCount < maxRetries) {retryCount++;onRetry(retryCount, retryDelay);setTimeout(() => {abortController = new AbortController();processStream();}, retryDelay);}}};// 处理可能包含索引信息的数据块function processChunksWithIndex(buffer) {// 示例格式: "[index:123]data"const chunks = [];let remainingBuffer = buffer;const regex = /\[index:(\d+)\]([\s\S]+?)(?=\[index|$)/g;let match;while ((match = regex.exec(buffer)) !== null) {const index = parseInt(match[1], 10);const data = match[2];chunks.push({ index, data });remainingBuffer = buffer.substring(regex.lastIndex);}// 如果没有找到索引格式，则作为普通数据处理if (chunks.length === 0 && buffer.trim()) {chunks.push({ data: buffer });remainingBuffer = '';}return { chunks, remainingBuffer };}// 开始处理processStream();// 返回控制器return {abort: () => {abortController.abort();},retry: () => {abortController.abort();abortController = new AbortController();processStream();}};
}