uniapp如何接收流式数据

在uniapp中如何接收流式数据？比如从服务器返回的实时数据流，应该用什么方法或API来处理？我尝试了普通的网络请求，但无法实时获取数据更新。有没有示例代码可以参考？需要支持WebSocket还是其他协议？

2 回复

在uni-app中接收流式数据，可以使用uni.request并设置responseType为arraybuffer或text，通过监听onChunkReceived回调处理分片数据。也可以使用WebSocket实时接收流数据。


在 UniApp 中接收流式数据（如 WebSocket 或 Server-Sent Events）主要通过以下方法实现。以下是详细步骤和示例代码：

1. 使用 WebSocket 接收流式数据

WebSocket 适合双向实时通信，UniApp 支持原生的 WebSocket API。

示例代码：

// 创建 WebSocket 连接
const socket = new WebSocket('ws://your-server-url');

// 监听连接打开事件
socket.onopen = function() {
    console.log('WebSocket 连接已打开');
    // 可在此发送请求到服务器
    socket.send('开始发送流数据');
};

// 监听接收消息事件（流式数据）
socket.onmessage = function(event) {
    console.log('收到数据:', event.data);
    // 处理接收到的数据，例如更新页面
    // this.dataList.push(event.data);
};

// 监听错误事件
socket.onerror = function(error) {
    console.error('WebSocket 错误:', error);
};

// 监听连接关闭事件
socket.onclose = function() {
    console.log('WebSocket 连接已关闭');
};

// 在页面卸载时关闭连接（可选）
onUnload() {
    if (socket) {
        socket.close();
    }
}

2. 使用 SSE（Server-Sent Events）接收流式数据

SSE 适用于服务器单向推送数据，UniApp 中可通过 uni.request 或第三方库实现（注意 UniApp 未原生支持 EventSource，需手动处理）。

示例代码（使用 uni.request 模拟 SSE）：

// 使用 GET 请求，服务器需返回流式数据（如 text/event-stream 类型）
uni.request({
    url: 'https://your-sse-server-url',
    method: 'GET',
    responseType: 'text', // 确保响应类型为文本
    success: (res) => {
        // 手动处理流数据（假设服务器返回逐行数据）
        const lines = res.data.split('\n');
        lines.forEach(line => {
            if (line.startsWith('data: ')) {
                const data = line.replace('data: ', '');
                console.log('收到 SSE 数据:', data);
                // 处理数据，例如更新 UI
            }
        });
    },
    fail: (err) => {
        console.error('SSE 请求失败:', err);
    }
});

3. 使用 HTTP 分块传输（Chunked Transfer）

如果服务器使用 HTTP 分块编码，可通过 uni.request 结合 responseType: 'text' 处理，但需注意 UniApp 对流的支持有限。

注意事项：

  • 平台差异：WebSocket 在 H5 和 App 端支持良好，但 SSE 在部分平台（如小程序）可能受限，建议优先使用 WebSocket。
  • 数据格式：确保服务器返回的数据格式正确（如 JSON 或纯文本），并在客户端解析。
  • 性能优化：对于大数据流，分批处理以避免内存问题。

总结

  • WebSocket：推荐用于实时双向通信，代码简单且跨平台兼容性好。
  • SSE/HTTP 流：适用于服务器推送场景，需手动处理响应数据。

根据实际需求选择合适方法。如果涉及复杂流处理（如视频流），可能需要结合插件或原生开发。

回到顶部