uniapp如何解析eventstream数据流

在uniapp中接收到EventStream数据流后，如何进行解析处理？服务端返回的是分块传输的SSE格式数据，但uniapp的uni.request不支持直接监听流式数据。请问应该如何实现逐块读取并处理这些数据？最好能提供具体的代码示例。

2 回复

在uniapp中，可以使用uni.request接收event-stream数据，通过监听onChunkReceived事件逐块处理数据流。需要设置responseType: 'stream'，然后解析返回的chunk数据。


在 UniApp 中解析 EventStream（如 Server-Sent Events，SSE）数据流，通常通过 uni.request 或 WebSocket 实现。由于 UniApp 基于 Vue.js，且运行在多个平台（如小程序、H5），处理方式需考虑兼容性。以下是基于 H5 环境的实现方法（小程序可能不支持原生 EventSource，需用 WebSocket 模拟）：

步骤：

  1. 使用 EventSource（仅 H5 支持）：
    在 UniApp 的 H5 环境中，可直接用浏览器原生的 EventSource 对象。

    // 在 Vue 方法或生命周期中调用
if (typeof EventSource !== 'undefined') {
  const eventSource = new EventSource('你的 SSE 服务端 URL');
  
  // 监听消息事件
  eventSource.onmessage = function(event) {
    const data = JSON.parse(event.data); // 假设数据为 JSON 格式
    console.log('接收数据:', data);
    // 更新 UniApp 数据（如 data 中的变量）
    this.message = data;
  }.bind(this);
  
  // 监听自定义事件（可选）
  eventSource.addEventListener('customEvent', function(event) {
    console.log('自定义事件:', event.data);
  });
  
  // 错误处理
  eventSource.onerror = function(error) {
    console.error('EventStream 错误:', error);
    eventSource.close();
  };
} else {
  console.warn('当前环境不支持 EventSource');
}

  2. 使用 WebSocket 兼容多平台：
    如果 SSE 服务端支持 WebSocket，或需兼容小程序，可用 uni.connectSocket：

    uni.connectSocket({
  url: '你的 WebSocket URL',
  success: () => {
    console.log('连接成功');
  }
});

uni.onSocketMessage((res) => {
  const data = JSON.parse(res.data); // 解析数据
  console.log('接收数据:', data);
  // 更新页面数据
  this.message = data;
});

uni.onSocketError((error) => {
  console.error('WebSocket 错误:', error);
});

注意事项：

  • 平台差异：小程序环境不支持 EventSource，需用 WebSocket 或后端转换数据流。
  • 数据格式：确保服务端返回的数据为标准 SSE 格式（如 data: {...}\n\n），或 WebSocket 的文本帧。
  • 生命周期管理：在页面卸载时关闭连接（如 onUnload 中调用 eventSource.close() 或 uni.closeSocket()）。

简单示例（H5）：

假设服务端 SSE 数据为：

data: {"message": "Hello"}\n\n

解析代码：

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    if (typeof EventSource !== 'undefined') {
      const eventSource = new EventSource('https://api.example.com/sse');
      eventSource.onmessage = (event) => {
        this.message = JSON.parse(event.data).message;
      };
    }
  }
};

如需全平台兼容，建议使用 WebSocket 或封装第三方库（如 sse.js）。根据实际需求选择方案！

回到顶部