需求:项目开发需求对接chatgpt生成一段文案,需要实时且有打字效果
难点:无WebSocket实时,且为「text/event-stream;」小程序不支持这个东东,会一次性返回所有数据,这个时候就无法实时,所以想到了sse分段传输数据(我也不知道这么说对不对,大概意思就是流式返回数据)
知识点:微信小程序提供了「requestTask」这个东东
接下来就一起看看如何使用以「Taro」为例子满足需求,uniApp和wx原生应该差不多
- 第一步,直接正常调用接口
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.参考资料