Taro/react/微信小程序 对接chatgpt(SSE) 无需websocket_微信小程序sse

        需求：项目开发需求对接chatgpt生成一段文案，需要实时且有打字效果

        难点：无WebSocket实时，且为「text/event-stream;」小程序不支持这个东东，会一次性返回所有数据，这个时候就无法实时，所以想到了sse分段传输数据（我也不知道这么说对不对，大概意思就是流式返回数据）

        知识点：微信小程序提供了「requestTask」这个东东

接下来就一起看看如何使用以「Taro」为例子满足需求，uniApp和wx原生应该差不多

1. 第一步，直接正常调用接口

   const requestTask = Taro.request({
     url: textChat, // 你正常请求接口的地址
     timeout: 100000,
     method: "POST",
     header: {
       'content-type': 'application/x-www-form-urlencoded'
     },
     enableChunked: true, // 必须的
     data: obj, // 接口的其他参数
     success: (response) => {
         requestTask.abort()
         // 这里是成功调用完的 可以写去掉加载中等逻辑
         // 由于SSE特性，需要由用户端断开连接，所以在使用完毕时，需要调用requestTask.abort()断开连接
     },
     fail: (error) => {
       Taro.showToast({
         title: error.errMsg == 'request:fail timeout' ? '请求超时，请稍后重试' : '网络错误，请稍后重试',
         icon: 'none',
         duration: 1000
       });
     },
   });
   

 2.第二步，对返回的数据进行操作，这个逻辑仅供参考，有不同的需要自行修改

requestTask.onHeadersReceived(function (res) {
  console.log(res.header);
});
requestTask.onChunkReceived((response: any) => {
  // 对返回的数据进行操作，这个逻辑仅供参考，有不同的需要自行修改
  let arrayBuffer = response.data; // 接收持续返回的数据
  let uint8Array = new Uint8Array(arrayBuffer);
  let text = Taro.arrayBufferToBase64(uint8Array);
  const base64ToUtf8 = (base64String) => {
    // base64转utf8 这个方法可以提出去 我这里方便展示
    // new TextDecoder() 小程序真机中没有这个方法，得下载一个这个 text-encoding
    // npm install text-encoding --save-dev
    // 引入import { TextDecoder } from "text-encoding/lib/encoding"; 
    const bytes = Taro.base64ToArrayBuffer(base64String);
    const utf8String = new TextDecoder().decode(bytes);
    return utf8String;
  }
  text = base64ToUtf8(text);
  // console.log(text);
  // 持续的转译 最后会变成类似这样的
  // {xx: 111}\n{xx: 111}\n{xx: 111}
  const convertStringToArr = (str) => {
    // 格式化返回的流式数据 这个方法也可以提出去 我这里方便展示
    var arr = str.trim().split('\n').map(JSON.parse);
    return arr;
  }
  let textArr = convertStringToArr(text);
  // console.log(textArr);
  // textArr会变成数组对象[{xx: 111},{xx: 11},{xx: 111}]
  textArr.map((v: any) => {
    if (v.hasOwnProperty('xx')) {
      // 这里的xx为流式传输的关键词  如果有多个关键词 需要写多个if判断
      str += v.xx;
      // console.log(str);
      // 这里只有把str作为值持续给到页面上即可实现打字效果
    }
    if (v.hasOwnProperty('code')) {
      // 这里的code为后端返回的 成功或者失败都在这里体现所以要单独做一个判断
      // console.log(v);
      if (v.code != 200) {
        Taro.showToast({
          title: v.msg,
          icon: 'none',
          duration: 1000
        })
      }
    }
  })
});

3.参考资料

在微信小程序中用流模式打造ChatGPT实时回复机器人

淡莣一苆~微信小程序对接SSE接口记录