uniapp 接收流式数据

在 UniApp 中接收和处理流式数据，尤其是在模拟 AI 对话等场景中，通常涉及到从服务器持续接收增量数据，并实时更新到前端界面。这种机制常见于基于 WebSocket 或 Server-Sent Events (SSE) 的通信方式。 ### 接收流式数据的方式 1. **使用 `fetch` 和 `ReadableStream`** 在某些后端支持的情况下，可以通过 `fetch` 获取响应流并逐步读取数据。由于标准的 `fetch` 不支持流式处理，因此需要结合 `ReadableStream` 来解析返回的数据流。 ```javascript async function fetchStream(url, onData) { const response = await fetch(url); const reader = response.body.getReader(); const decoder = new TextDecoder(); let buffer = ''; while (true) { const { done, value } = await reader.read(); if (done) break; buffer += decoder.decode(value, { stream: true }); const lines = buffer.split('\n'); buffer = lines.pop(); // 保留未完成的一行 lines.forEach(line => { if (line.trim()) { onData(JSON.parse(line)); // 处理每条消息 } }); } } ``` 2. **使用 WebSocket 实现实时通信** 如果服务端支持 WebSocket，可以建立持久连接以实现双向通信。这种方式适用于需要频繁更新内容的场景，例如聊天机器人或实时数据推送。 ```javascript const socket = new WebSocket('wss://your-websocket-url'); socket.addEventListener('message', event => { const data = JSON.parse(event.data); // 处理接收到的消息 handleEvent(data); }); function handleEvent(event) { switch (event.event) { case 'conversation.chat.created': // 初始化对话 break; case 'conversation.chat.in_progress': // 显示加载状态 break; case 'conversation.message.completed': // 更新完整回复内容 this.updateAssistantResponse(event.data.content, 'completed'); break; case 'conversation.message.delta': // 处理流式增量内容 this.updateAssistantResponse(event.data.content, 'delta'); break; default: } } ``` 3. **Server-Sent Events (SSE)** 若服务端仅需单向推送数据到客户端，可采用 SSE 技术。它允许服务器不断发送事件到客户端，适合长时间运行的数据流。 ```javascript const eventSource = new EventSource('https://your-sse-endpoint'); eventSource.addEventListener('message', event => { const data = JSON.parse(event.data); // 处理接收到的数据 updateContent(data); }); ``` ### 流式数据的处理与渲染优化 - **动态更新 UI**：每次接收到新数据时，应避免重新渲染整个页面，而是通过 Vue 的响应式机制局部更新相关 DOM 元素。 - **Markdown 解析与代码高亮**：若流式数据包含 Markdown 格式文本，可使用 `uv-parse` 进行解析。为了解决 `highlight.js` 高亮失效的问题，可在解析完成后手动调用高亮函数对代码块进行处理[^2]。 ```javascript import hljs from 'highlight.js'; function highlightCodeBlocks() { const codeBlocks = document.querySelectorAll('pre code'); codeBlocks.forEach(block => { hljs.highlightElement(block); }); } ``` - **错误处理与重连机制**：无论是 `fetch`、WebSocket 还是 SSE，都应加入异常捕获逻辑，并在断开连接时尝试自动重连，确保用户体验的连续性。 ---