跨平台SSE技术实现：微信小程序、H5与App的兼容方案

1. 跨平台SSE解决方案概述

在当今AIGC（生成式AI）应用爆发的时代背景下，Server-Sent Events（SSE）作为实现文本流式传输的关键技术，已成为各类AI对话、内容生成场景的标配接口方案。然而在uni-app这样的跨平台框架中，由于各运行环境（微信小程序、H5、原生App）对网络请求的实现差异，开发者往往会遇到SSE兼容性问题。

SSE协议本质上是一个基于HTTP的长连接机制，服务器通过持续发送事件流（event stream）实现实时数据推送。与WebSocket不同，SSE是单向通信（服务端→客户端），特别适合AI生成内容这类持续输出的场景。但在uni-app中：

• 微信小程序环境：原生不支持EventSource对象，但提供了独特的HTTP分块传输能力
• H5环境：可以完整使用Fetch API的流式读取能力
• App环境：虽然语法与H5相同，但实际运行时缺少关键API支持

2. 微信小程序实现方案

2.1 核心机制解析

微信小程序通过enableChunked参数开启HTTP分块传输模式，这实际上是TCP层的数据分片机制。当服务器启用Transfer-Encoding: chunked时，响应体会被分成多个数据块传输，小程序端通过onChunkReceived回调逐个接收。

与标准SSE的区别在于：

1. 数据格式需要手动处理（没有自动的event/data解析）
2. 连接管理需要自行实现重连逻辑
3. 消息边界需要额外处理（可能一个chunk包含多个事件或半个事件）

2.2 完整实现代码

javascript复制// #ifdef MP-WEIXIN
function createSSEConnection(url, params, callbacks) {
  let buffer = '' // 用于处理不完整消息的缓冲区
  const task = uni.request({
    url,
    method: 'POST',
    data: params,
    timeout: 30000, // 适当超时设置
    header: {
      'Accept': 'text/event-stream',
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
      'Connection': 'keep-alive'
    },
    responseType: 'text',
    enableChunked: true,
    onChunkReceived: ({ data }) => {
      // 处理可能的UTF-8多字节字符截断问题
      buffer += typeof data === 'string' ? data : new TextDecoder().decode(data)
      
      // 按SSE协议解析消息（事件以\n\n分隔）
      const messages = buffer.split('\n\n')
      buffer = messages.pop() || '' // 最后一段可能是不完整消息
      
      messages.forEach(raw => {
        const event = { data: '', id: '', event: 'message' }
        raw.split('\n').forEach(line => {
          if (line.startsWith('data:')) event.data += line.slice(5).trim()
          else if (line.startsWith('id:')) event.id = line.slice(3).trim()
          else if (line.startsWith('event:')) event.event = line.slice(6).trim()
        })
        callbacks.onMessag