微信小程序使用 SSE 流式输出，进行 Ai 对话

最新推荐文章于 2025-11-27 09:42:44 发布

原创最新推荐文章于 2025-11-27 09:42:44 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

一.实现逻辑

1.使用 wx.request 开启流式输出（当然后端也要开启 transfer-encoding： chunked）有些后端会默认开启

this.requestTask = wx.request({
      url: 'xxxxxx',
      enableChunked: true, //开启 transfer-encoding chunked。
      method: 'POST',
      header: {
        'content-type': 'application/json',
        Authorization: `Bearer ${this.data.token}`
      },
      data: {
        question: message
      }
    })

2.使用 onChunkReceived 来监听返回的数据

    this.requestTask.onChunkReceived((res) => {
      console.log(res.data, 888)
      const parsed = this.decodeUint8Array(res.data)
      const temp = this.extractContentFromStream(parsed)
      console.log(temp)//转换之后的内容
    })

3.处理sse返回的数据（默认返回的是 ArrayBuffer(87) {} ）

import encoding from '../../utils/encoding.js'
  
decodeUint8Array(uint8Array) {
    const data16 = this.buf2hex(uint8Array)
    const requestData = this.hexToStr(data16)
    return requestData
  },
  buf2hex(arrayBuffer) {
    return Array.prototype.map.call(new Uint8Array(arrayBuffer), (x) => ('00' + x.toString(16)).slice(-2)).join('')
  },

  hexToStr(hex) {
    let trimedStr = hex.trim()
    let rawStr = trimedStr.substr(0, 2).toLowerCase() === '0x' ? trimedStr.substr(2) : trimedStr
    let len = rawStr.length
    if (len % 2 !== 0) {
      return ''
    }
    let curCharCode 
    let resultStr = [] 
    for (let i = 0; i < len; i = i + 2) {
      curCharCode = parseInt(rawStr.substr(i, 2), 16)
      resultStr.push(curCharCode)
    }
    let bytesView = new Uint8Array(resultStr) 
    let str = new encoding.TextDecoder().decode(bytesView)
    return str
  }

4.需要两个文件 encoding.js 和 encoding-indexes.js 文件

二、问题

1.微信开发者工具中的真机调试没反应（测试机微信版本8.0.60）

使用微信开发者工具的预览或者上传体验版本测试

2.在微信开发者工具中即使你开启了 enableChunked: true, 数据也不是流式返回，而是只响应了一次，一次性返回的

升级最新版本的微信开发者工具（我是这个原因，微信开发者工具太旧）

3.这时会遇到一个新的问题：微信开发者工具是流式返回但是真机测试又是一次性返回。。。。当时我真是吐血，看了微信开放社区和百度 ai 都没解决方法，最后发现是后端 Nginx 配置问题

location /products/ai/ {
    proxy_pass http://localhost:5000;      
    proxy_http_version 1.1;               
    proxy_set_header Connection "";        
    proxy_buffering off;                     
    chunked_transfer_encoding on;             
    proxy_hide_header Content-Length;        
}