uniapp 流式消息
时间: 2025-05-14 08:02:31 浏览: 24
### UniApp 中实现流式消息功能
在 UniApp 开发环境中,可以通过 `fetch` 或者 WebSocket 来处理流式数据并实现实时更新的消息显示效果。以下是基于所提供的参考资料以及专业知识构建的一个完整解决方案。
#### 1. 使用 Fetch 处理流式数据
Fetch API 支持读取响应体作为可读流(ReadableStream),这使得我们可以逐步解析服务器返回的数据片段,并实时渲染到页面上。以下是一个简单的代码示例:
```javascript
async function fetchStreamingData(url) {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: "你好" }) // 请求参数
});
if (!response.ok) throw new Error('Network response was not ok');
const reader = response.body.getReader();
let result = '';
while (true) {
const { done, value } = await reader.read(); // 逐块读取数据
if (done) break;
const chunk = new TextDecoder().decode(value); // 将二进制数据转为字符串
result += chunk;
// 更新 UI 显示部分结果
updateUI(chunk);
}
console.log(result); // 所有数据接收完成后的最终结果
}
function updateUI(newChunk) {
const chatBox = document.getElementById('chat-box');
chatBox.innerHTML += escapeHtml(newChunk); // 防止 XSS 注入攻击
}
```
上述代码展示了如何利用 `fetch` 的流式特性来获取来自服务器的增量数据[^1]。每次接收到新的数据块都会调用一次 `updateUI()` 方法刷新界面内容。
#### 2. WebSockets 替代方案
如果目标平台确实存在某些限制无法直接使用 HTTP/1.1 流模式,则可以考虑采用 WebSocket 协议建立持久连接来进行双向通信。这种方式特别适合于需要频繁交互的应用场景比如聊天室或者在线游戏等。
下面给出一段关于创建WebSocket实例并与之通讯的基础例子:
```javascript
const socket = new uni.connectSocket({
url: 'wss://example.com/socket',
});
socket.onMessage(function(res){
var msg=res.data;
processIncomingMessage(msg);
});
// 发送消息给服务端
function sendMessage(messageText){
try{
socket.send({data:messageText});
}
catch(e){
console.error("Failed to send message:", e);
}
};
function processIncomingMessage(data){
// 解析传入的数据包...
};
```
这里需要注意的是,在实际项目部署过程中可能还会遇到跨域资源共享(CORS)等问题,因此建议提前做好相应的配置工作[^2]。
#### 总结说明
无论是选用哪种技术路线去达成目的——即让前端能够及时反映出后端持续推送过来的信息变化情况,都需要仔细权衡两者之间的优劣之处再做出决定。对于大多数现代浏览器而言,HTTP/2 提供了更好的性能表现;然而当面对更加复杂的业务需求或者是特定环境下的兼容性考量时,WebSockets 则不失为一种强有力的选择。
---
阅读全文
相关推荐


















