小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 使用 UniApp 在微信小程序中实现 SSE 流式响应

使用 UniApp 在微信小程序中实现 SSE 流式响应

一、核心实现方案

1. 基础配置

  • 启用分块传输:通过 uni.request 的 enableChunked 特性实现流式接收

  • 请求头设置:需声明 Accept: text/event-stream 和 Content-Type: application/json

uni.request({
  url: 'https://api.example.com/sse',
  method: 'POST',
  header: {
    'Accept': 'text/event-stream',
    'Authorization': uni.getStorageSync('token')
  },
  enableChunked: true,  // 关键配置
  responseType: 'arraybuffer'
})

2. 数据流处理

  • 二进制解码:处理 ArrayBuffer 转 UTF-8 字符串(支持中文)

function decode(data) {
  const uint8Array = new Uint8Array(data);
  let str = '';
  for (let i=0; i

3. 分块接收机制

  • 事件监听:通过 onChunkReceived 实时处理数据块

requestTask.onChunkReceived((res) => {
  const decoded = decode(res.data);
  const eventData = decoded.match(/data:\s*({.*?})\n/g);  // 正则提取SSE格式数据[5](@ref)
  if(eventData) this.$emit('message', JSON.parse(eventData[0].slice(5)));
});
联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了