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

Vue客服组件集成Dify智能问答：从设计到落地（3）

news 来源：原创 2025/6/26 5:08:19

前言

在现代前端开发中，特别是涉及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特殊字符，防止XSS
    let 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开始的JSON
      const 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 => {
  // 更新DOM
  appendContent(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();
    }
  };
}