uniapp 流式输出

### UniApp 中实现流式输出的方法 在 UniApp 开发环境中，可以通过 WebSocket 或者 HTTP 的分块传输功能来实现流式输出。以下是两种常见的方法及其具体实现方式。 #### 方法一：通过 WebSocket 实现实时流式输出 WebSocket 是一种全双工通信协议，适合用于实时数据推送场景。尽管您提到尝试将 SSE 转换为 WebSocket 遇到困难[^1]，但如果能够成功配置 WebSocket，则可以实现出色的流式效果。 以下是一个基于 WebSocket 的简单示例： ```javascript // 初始化 WebSocket 连接 const socketTask = uni.connectSocket({ url: 'wss://your-websocket-server.com', }); // 监听连接打开事件 socketTask.onOpen(() => { console.log('WebSocket 已连接'); }); // 接收服务器发送的消息并处理流式输出 socketTask.onMessage((res) => { const chunkData = res.data; // 获取消息片段 updateUI(chunkData); // 更新 UI 显示内容 }); function updateUI(dataChunk) { let currentText = uni.getStorageSync('currentDialog') || ''; currentText += dataChunk; uni.setStorageSync('currentDialog', currentText); // 假设有一个文本框用于显示对话内容 uni.$emit('update-dialog', { text: currentText }); } ``` 此代码展示了如何利用 WebSocket 来接收来自服务器的数据碎片，并逐步更新界面中的对话内容。 --- #### 方法二：HTTP 分块传输 (chunked transfer encoding) 如果您的后端支持 HTTP 分块传输模式，那么可以直接通过 `fetch` API 或 `uni.request` 来获取流式数据。这种方法无需额外维护长连接，适用于某些特定需求下的流式加载。 下面是一段使用 Fetch 和 Markdown 渲染组件的例子[^2]: ```javascript async function fetchStream() { try { const response = await fetch('https://api.example.com/stream-endpoint', { method: 'GET', headers: { Accept: 'text/plain', }, }); if (!response.ok) throw new Error(`请求失败 ${response.status}`); const reader = response.body.getReader(); let result = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const decodedValue = new TextDecoder().decode(value); result += decodedValue; renderMarkdown(result); // 动态渲染 markdown 内容 } } catch (error) { console.error(error.message); } } function renderMarkdown(textContent) { const mdComponent = uni.createSelectorQuery() .select('#markdown-renderer') .context(); // 组件 ID 对应页面上的 markdown 渲染器 mdComponent.setData({ content: textContent }); // 设置新的 markdown 数据 } ``` 上述代码实现了从服务端拉取分块数据，并动态将其解析成可读形式的过程。 --- #### 注意事项 - 如果采用 WebSocket 方案，请确保前后端都已正确设置心跳检测机制以维持稳定链接。 - 使用 HTTP 分块传输前需确认目标环境兼容性（如微信小程序最新版本确实允许此类操作）。 - 在实际项目里可能还需要考虑错误重试逻辑、超时控制等因素。 ---

### 使用 UniApp 实现流式响应输出页面 在 UniApp 中实现流式响应输出页面功能，可以通过 WebSocket 或者基于 `fetch` 的分片请求来完成。由于微信小程序不支持 EventSource 协议[^1]，因此推荐使用 WebSocket 来替代。 以下是通过 WebSocket 和 Spring Boot 后台配合的方式实现流式响应输出的代码示例： #### 服务器端 (Spring Boot) 以下是一个基于 Spring WebFlux 的流式接口实现，返回 SSE（Server-Sent Events）风格的数据[^2]： ```java @RestController @RequestMapping("/stream") public class StreamController { @PostMapping(value = "/completions", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Result<CompletionsOutMsg>> completions(@RequestBody CompletionsInMsg inMsg) { // 模拟异步数据流生成逻辑 return Flux.interval(Duration.ofMillis(500)) // 每隔 500ms 发送一次消息 .take(10) // 总共发送 10 次 .map(sequence -> new Result<>(new CompletionsOutMsg("Chunk " + sequence))); } } ``` 上述代码会每隔 500 毫秒向客户端推送一条消息，直到达到指定次数为止。 --- #### 客户端 (UniApp) 在 UniApp 中可以利用 WebSocket 进行实时通信并动态更新页面内容。以下是具体的前端代码实现： ##### 页面结构 (`index.vue`) ```vue <template> <view> <text>流式输出：</text> <scroll-view scroll-y style="height: 300px;"> <block v-for="(chunk, index) in chunks" :key="index"> <text>{{ chunk }}</text> </block> </scroll-view> </view> </template> <script> export default { data() { return { chunks: [], // 存储接收到的消息片段 socketTask: null, }; }, onLoad() { this.initWebSocket(); }, methods: { initWebSocket() { const url = 'wss://your-spring-boot-server/stream/completions'; // 替换为实际地址 this.socketTask = uni.connectSocket({ url: url, success(res) { console.log('WebSocket连接成功', res); }, fail(err) { console.error('WebSocket连接失败', err); } }); // 接收消息事件 uni.onSocketMessage((res) => { const message = JSON.parse(res.data).data; this.chunks.push(message); // 动态追加到列表中 }); // 关闭连接事件 uni.onSocketClose(() => { console.log('WebSocket已关闭'); }); } }, onUnload() { if (this.socketTask) { this.socketTask.close(); // 销毁 WebSocket 避免内存泄漏 } } }; </script> ``` --- #### 注意事项 1. **跨域配置**: 如果前后端分离部署，则需要确保 Spring Boot 开启 CORS 支持。 ```java @Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.addAllowedOrigin("*"); configuration.setAllowedMethods(Arrays.asList("GET", "POST")); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } ``` 2. **WebSocket 路径映射**: 确保后端路径 `/stream/completions` 已正确定义，并且能够处理 WebSocket 请求。 3. **兼容性问题**: 尽管此处采用了 WebSocket 解决方案，但在某些特殊场景下仍需验证其与目标平台的适配情况。 --- ###