在微信小程序中如何支持使用流模式(stream),打造ChatGPT实时回复机器人,最详细讲解。

有开发过ChatGPT相关应用的都知道,小程序是不支持流式请求的,目前市面上大多数开发者的解决方案都是使用websocket来解决。

还有一部分开发者是小程序嵌套网页解决这个问题,前者对于我们软件销售型的团队来说,交付会很麻烦,而且问题也会很多,而后者主要是体验不怎么好,而且需要设置网页授权域名。

作为ChatGPT最早期的开发者,我们开发的ChatGPT分销版占据了市面上60%左右的市场,和下面图片相似的都是我们的ChatGPT分销版。

 在开发这个项目之前,我们开源了这个产品的前端模板,现在市面上很多雷同的产品都是基于我们的模板进行开发的,或者是借鉴开发的。

有客户运营我们的产品,目前已经累计200w+的充值金额,净利润预估至少100w+,我们的产品质量源自于这些客户的数据支撑。

我们的后端使用ThinkPHP5.0进行开发,Saas架构,界面看上去很大气,如下图所示。

 颜值绝对秒杀市面上的所有ChatGPT应用,当然我们的定价和服务也是相当超值的。

废话不多说,接下来我来详细介绍下我是怎么实现微信小程序的流式请求的。

一、设置请求头

我的微信小程序和网页H5都是用的同一个接口,而微信小程序不支持stream的方式,只能使用分段传输的方式。

所以在这一步你需要做一个接口的兼容,我是传一个参数代表是微信小程序请求还是网页请求,从而设置不同的请求头。

网页H5的我就不给出header了,这里主要给出小程序的请求头,如下所示。

// 设置响应头信息
header('Access-Control-Allow-Credentials: true');
// 设置响应头信息
header('Transfer-Encoding: chunked');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Connection: keep-alive');
header('X-Accel-Buffering: no');

二,设置回复兼容

网页H5的流式请求我是直接返回的官方的响应数据,所以这里不能动之前的数据格式,在小程序请求这个接口时,需要单独返回对应的数据格式。

if ($is_wxapp) {echo "success: " . json_encode(['content' => $content]) . "\r\n";
}

结尾使用“\r\n”,并且当所有数据响应完成之后一定要输出0,如下图所示。

if ($is_wxapp) {echo "0\r\n\r\n";ob_flush();flush();
}

我这里为了兼容网页H5的流式请求,也是同样的加了判断之后输出的。

三,进入前端请求代码

以下是我完整的小程序请求方法,里面包含了我很多的业务逻辑,你可以根据你的业务进行修改,后面我会挑几个注意事项进行简述。

async onChatApplet() {let _this = this;let token = uni.getStorageSync('token');const url = "";const requestTask = uni.request({url: url,timeout: 15000,responseType: 'text',method: 'GET',enableChunked: true,data: {},success: response => {// console.log(response)},fail: error => {}})requestTask.onHeadersReceived(function(res) {// console.log(res.header);});requestTask.onChunkReceived(function(response) {const arrayBuffer = response.data;const uint8Array = new Uint8Array(arrayBuffer);let text = uni.arrayBufferToBase64(uint8Array)text = new Buffer(text, 'base64')text = text.toString('utf8');if (text.indexOf('error') > 0) {let error = text.replace("event: error\ndata: ", "").replace("\r\n", "")error = JSON.parse(error)let len = _this.question.length_this.disabled = falseif (error.code == 0) {_this.$refs.uToast.show({type: 'error',message: error.msg})if (len > 0) {_this.question[len - 1].content = error.msg} else {_this.question[0].content = error.msg}return false;}if (in_array(error.code, [10001, 11000, 500, 404])) {let length1 = 0if (length1 > 0) {_this.question[length1 - 1].content = error.msg} else {_this.question[0].content = error.msg}_this.$refs.uToast.show({type: 'error',message: error.msg})return false;}switch (error.code) {case -1:_this.question.pop()uni.navigateTo({url: '/pages/user/passport/login'})break;case 101:_this.question.pop()_this.$refs.uToast.show({type: 'error',message: error.msg,complete() {uni.navigateTo({url: '/pages/user/recharge/index'})}})break;case 102:let length = _this.question.lengthif (length > 0) {_this.question[length - 1].content = error.msg} else {_this.question[0].content = error.msg}_this.$refs.uToast.show({type: 'error',message: error.msg})break;default:break;}return false;}if (text.indexOf('success') != -1) {let json = text.split('success: ');json.forEach(function(element) {if (element) {element = JSON.parse(element)let index = 0if (_this.question.length > 0) {index = _this.question.length - 1}_this.question[index].content += element.content;_this.$nextTick(() => {uni.pageScrollTo({scrollTop: 2000000,duration: 0});});}})return false;}let done = text.replace("\r\n", "")if (done == 0) {_this.disabled = false}})
}

注意事项:编码

const arrayBuffer = response.data;
const uint8Array = new Uint8Array(arrayBuffer);
let text = uni.arrayBufferToBase64(uint8Array)
text = new Buffer(text, 'base64')
text = text.toString('utf8');

我这个方式比较简单粗暴,我在网上看到有人使用了第三方库,但是我测试下来行不通,就使用了uni官方这个转成Base64,然后再进行转码。

以上就是整个小程序的流式响应回复所需要用到的技术,也是最直接有效的方法,如果你现在掌握这门技术,再加上ChatGPT目前的势头,我相信你也能做出一些事情。

好了,就这样,做一个小小的记录,后期如果有空,我会继续分享我在开发ChatGPT产品的其他思路。

个人公众号:程序员在囧途

欢迎大佬交流合作,交个朋友也行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/4499.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

chatgpt写微信小程序

作为微信小程序开发者,您的任务是使用微信小程序原生开发,编写一个计数器页面,请回复满足以下要求的代码: 创建一个包含wxml、js、wxss和json文件的微信小程序页面,并在其中实现一个计数器页面。视图中显示的文本应为中文。请注意…

基于ChatGPT的智能问答、ai绘图微信小程序思路

ChatGPT ![在这里插入图片描述](https://img-blog.csdnimg.cn/186d9ecc453b48be9f19c467da7c3f07.jpeg ChatGPT是openai公司的一个人工智能机器人产品,目前已经升级到4.0版本。其因便捷高效,已经在大学生、IT届、科研界等领域广为流传。但是直接进入其…

微信小程序ChatGpt流式响应

最近用微信小程序做chatGpt的Ai对话,其中重要的一点就是流式响应,现在分享处理逻辑,先给演示图。 下面是关键代码实现逻辑 const that this;const requestTask wx.request({url: xxxxx,responseType: "arraybuffer",method: POST…

微信小程序_把chatgpt聊天数据复制到剪切板

文章目录 ⭐ 前言⭐ 开始网格背景样式配置对话框样式配置复制到剪切板 ⭐ 结束 ⭐ 前言 大家好,我是yma16,不止前端,本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据。 往期微信小程序文章 小程序自定义微信昵称和头像 小程序制作…

KeepChatGPT:让ChatGPT畅聊无阻的浏览器插件

ChatGPT是一款强大的自然语言处理模型,但在使用过程中经常出现网络报错、刷新网页等问题,让使用体验大打折扣。而今天介绍的KeepChatGPT浏览器插件则能够有效解决这些问题,让ChatGPT畅聊无阻! KeepChatGPT是一款解决ChatGPT畅聊过…

浏览器插件的使用

善于使用浏览器插件,能起到高效上网的作用。 Microsoft Edge 是全球广受欢迎的浏览器,浏览器本身具有快速、简单和轻量级的特点。一流的性能系统和访问速度极大提升您的浏览体验。 对于浏览器的用户来说,安装一些实用的插件,能让…

CHATGPT精选插件

CHATGPT是帮你做事,而不是替你做事 1、联网插件: 使用Webpilot插件联网时还可以同时使用其它两种插件(一次可以同时使用三个插件),而使用Web Browsing插件功能联网时无法使用插件功能(联网功能和插件只能…

这款工具被网友玩疯了!我又玩物丧志了...

羿阁 发自 凹非寺量子位 | 公众号 QbitAI 一款新的聊天AI被网友们玩疯了。 能直接生成代码、会自动修复bug、在线问诊、模仿莎士比亚风格写作……各种话题都能hold住,它就是OpenAI刚刚推出的——ChatGPT。 有脑洞大开的网友甚至用它来设计游戏:先用ChatG…

OpenAI发布ChatGPT!手把手debug代码!

卷友们好,我是rumor。 已经好久没看OpenAI的官网[1]了,但今天冥冥之中感觉受到了什么召唤,心想GPT4什么时候发布,莫名地就打开了,果然有料: 试用:https://chat.openai.com/ 它把魔抓又伸向对话了…

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析

【哪些工作会被ChatGPT取代?】我用ChatGPT全自动化生成代码进行了深度分析 前言 配置好ChatGPT的几个小时之后,我发现了一个宝藏网页https://github.com/f/awesome-chatgpt-prompts,也是我这篇文章的灵感所在,github里面给出让chatgpt扮演…

GPT-3/ChatGPT 复现的经验教训

为什么所有公开的对 GPT-3 的复现都失败了?我们应该在哪些任务上使用 GPT-3.5 或 ChatGPT? 对于那些想要复现一个属于自己的 GPT-3 或 ChatGPT 的人而言,第一个问题是关键的。第二个问题则对那些想要使用它们的人是重要的(下文提…

Day921.chatGPT

chatGPT Hi,我是阿昌,今天学习记录的是关于chatGPT的内容。 一、什么是chatGPT ChatGPT(全名:Chat Generative Pre-trained Transformer),ChatGPT 是一种基于 GPT (Generative Pre-trained Transformer)…

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版

面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版 1. 指南1-1. 提示的指南1-2. 配置1-3. 提示语原则原则 1: 写出清晰而具体的指示技巧 1: 使用分隔符来清楚地表明输入的不同部分技巧 2: 要求提供结构化的输出技巧 3: 要求模型检查条件是否得到满足技巧 4: "少许样本…

ChatGPT支持第三方plugins,并且推出了网络浏览器和代码解释器两个插件

2023年3月23日,OpenAI实现了对ChatGPT插件的初步支持,还推出了两个插件,一个网络浏览器和代码解释器,并且开源了知识库检索插件的代码,任何有信息的开发者都可以自行托管,以增强ChatGPT的功能。 在目前已实…

06-发送短信验证码实现登录功能

1、发送短信验证码实现登录功能的流程 1.1、获取验证码流程 1.2、登录流程 1.3、页面带有图形验证码的流程 2、 注册登录二合一页面的开发 2.1、将src目录下的App.vue页面上通用显示的删掉 2.2、在router目录下的index.js文件中通过懒加载的方式添加login.vue页面 对于rout…

手把手教你使用短信验证码接口

因为闪速码短信平台可以免费赠送200条使用,所以本文档以闪速码为列讲解。 一、账号注册、登录 一、注册、登录闪速码(www.shansuma.com),进行实名认证。实名认证分为个人认证和企业认证,值得注意的是:个人…

最好用的发短信(验证码、语音短信)接口

使用阿里大鱼短信接口 注册 进入大鱼页面,如果没有账号,则自行注册,再此不在过多详述。注册完成或者有账号的则在首页中点击加入“加入阿里大鱼”,如下: 创建引用 点击“管理中心”,然后再点击右上角…

短信接口调用-手机短信,验证码

本文章短信平台接口基于中国网建SMS短信平台API,相关网址为点我打开--->中国网建SMS短信平台。注册后即可立即使用,无信息审核验证延迟。 通过中国网建第三方API发送一条短信,需要知道以下信息:用户注册时的Uid:用户…

Android-短信验证码

效果图 简介 基本上只要需要登录的APP,都会有验证码输入,所以说是比较常用的控件,而且花样也是很多的,这里列出来4种样式,分别是: 表格类型 方块类型 横线类型 圈圈类型 其实还有很多其他的样式&#xff0c…

SmS-Activate一款好用的短信验证码接收工具

前言 有些国外应用在使用应用上的功能时需要注册账号,由于某种不可抗因素,我们的手机号一般不支持注册,接收不到信息验证码,于是我们可以使用sms-activate提供的服务,实惠又稳定,最近sms-activate.org网站…