Vue客服组件集成Dify智能问答：从设计到落地（3）
前言
在现代前端开发中，特别是涉及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中不会自动换行，除非在标签中或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, '
') // 换行符转换为
标签
.replace(/\t/g, ' ') // 制表符转换为空格
.replace(/\r/g, '') // 回车符删除
.replace(/\\'/g, "'") // 转义的单引号
.replace(/\\"/g, '"') // 转义的双引号
.replace(/\\\\/g, '\\'); // 转义的反斜杠
// 处理HTML特殊字符，防止XSS攻击
html = html
.replace(/</g, '<')
.replace(/>/g, '>');
// 处理Markdown风格的格式标记（简单实现）
// 加粗
html = html.replace(/\*\*(.+?)\*\*/g, '$1');
// 斜体
html = html.replace(/\*(.+?)\*/g, '$1');
// 行内代码
html = html.replace(/`(.+?)`/g, '$1');
// 处理代码块（多行代码）
html = html.replace(/```(\w*)\n([\s\S]+?)```/g, function(match, language, code) {
return '+
(language || 'plaintext') + '">' +
code.replace(/</g, '<').replace(/>/g, '>') +
'这个函数实现了基本的转义字符处理，包括：
- 基本转义字符（
\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, '<')
.replace(/>/g, '>');
// 保存代码块，避免内部内容被其他规则处理
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, '
')
.replace(/\t/g, ' ')
.replace(/\r/g, '')
.replace(/\\'/g, "'")
.replace(/\\"/g, '"')
.replace(/\\\\/g, '\\');
// 处理Markdown格式
// 标题
html = html.replace(/^# (.+)$/gm, '$1
');
html = html.replace(/^## (.+)$/gm, '$1
');
html = html.replace(/^### (.+)$/gm, '$1
');
// 列表
html = html.replace(/^- (.+)$/gm, '$1 ');
html = html.replace(/(.+<\/li>\s*)+ /g, '$&
');
// 加粗和斜体
html = html.replace(/\*\*(.+?)\*\*/g, '$1');
html = html.replace(/\*(.+?)\*/g, '$1');
// 链接
html = html.replace(/\[(.+?)\]\((.+?)\)/g, '$1');
// 恢复代码块
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 '+
language + '">' +
code.replace(/</g, '<').replace(/>/g, '>') +
'3.2 在Vue组件中使用
以下是在Vue组件中使用转义字符处理函数的示例：
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组件示例，展示如何处理流式数据并进行增量渲染：
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时：
<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();
}
};
}
6. 总结与展望
6.1 技术总结
本文详细探讨了前端流式数据处理与转义字符转换的关键技术：
- 流式数据基础：理解了流式数据的特点和前端处理挑战
- 转义字符处理：实现了从转义字符到HTML的高效转换
- 流式数据接收：掌握了SSE和Fetch API的流式数据接收方法
- 增量渲染：通过Vue组件实现了高效的增量内容渲染
- 性能优化：应用批量更新、内存管理等技术提升性能
- 用户体验：通过打字机效果、智能滚动等增强用户体验
- 安全处理：实现了XSS防护和内容安全策略
- 错误恢复：设计了具有重试机制的弹性流处理系统
6.2 应用场景
这些技术在以下场景中特别有价值：
- AI对话系统：实时显示AI生成的回复
- 实时客服系统：流畅展示客服消息
- 代码编辑器：处理代码高亮和格式化
- 实时日志查看器：高效展示持续更新的日志
- 协作文档编辑：实时显示其他用户的编辑
6.3 未来展望
随着Web技术的发展，流式数据处理还将出现以下趋势：
- WebTransport API：提供比WebSocket更高效的双向通信
- WebCodecs API：更高效地处理音视频流
- WebAssembly：通过高性能编译代码处理大量流数据
- Web Workers和SharedArrayBuffer：更高效的并行处理
- 流式渲染框架：专为流式数据优化的前端框架
通过掌握这些技术，前端开发者可以构建出响应更快、体验更佳的实时交互应用，满足用户对即时反馈的期望，同时保持应用的高性能和安全性。
源码链接：Vue客服组件集成Dify智能问答：从设计到落地（4）