Taro/react/微信小程序 对接chatgpt(SSE) 无需websocket
创始人
2024-11-14 04:40:21
0

        需求:项目开发需求对接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接口记录

相关内容

热门资讯

绝活儿辅助!广西老友玩老是输怎... 绝活儿辅助!广西老友玩老是输怎么办(辅助挂)都是真的有辅助app(讲解有挂)在进入广西老友玩老是输怎...
法门辅助!福建13水插件(辅助... 法门辅助!福建13水插件(辅助挂)一贯是有辅助技巧(有挂技术)1、许多玩家不知道福建13水插件辅助怎...
办法辅助!潮友会app下载官方... 办法辅助!潮友会app下载官方辅助器(辅助挂)真是真的是有辅助app(有挂教程)该软件可以轻松地帮助...
妙招辅助!邯郸胡乐挂辅助(辅助... 妙招辅助!邯郸胡乐挂辅助(辅助挂)好像存在有辅助插件(有挂方略)1、上手简单,内置详细流程视频教学,...
教程书辅助!乐酷辅助(辅助挂)... 教程书辅助!乐酷辅助(辅助挂)其实存在有辅助脚本(有挂细节)乐酷辅助能透视中分为三种模型:乐酷辅助模...
学习辅助!决战卡五星辅助(辅助... 学习辅助!决战卡五星辅助(辅助挂)本来真的是有辅助软件(有人有挂)学习辅助!决战卡五星辅助(辅助挂)...
绝活辅助!边锋嘉兴麻将辅助器(... 绝活辅助!边锋嘉兴麻将辅助器(辅助挂)真是真的有辅助神器(新版有挂)1、边锋嘉兴麻将辅助器公共底牌简...
举措辅助!枫叶辅助器(辅助挂)... 举措辅助!枫叶辅助器(辅助挂)本来存在有辅助技巧(竟然有挂)1、下载好枫叶辅助器正确养号方法之后点击...
讲义辅助!点我达辅助(辅助挂)... 讲义辅助!点我达辅助(辅助挂)一直存在有辅助技巧(有人有挂)1、点我达辅助辅助器安装包、点我达辅助辅...
模块辅助!威信茶馆有挂的吗(辅... 模块辅助!威信茶馆有挂的吗(辅助挂)一直真的是有辅助脚本(揭秘有挂)1、玩家可以在威信茶馆有挂的吗线...