补充日志:（我最开始是使用非流式接口实现的，后续业务改造使用流式接口，重点的代码讲解都在下边哈~~）
关于打印机效果后端同样可以实现的逻辑说明:(2024/4/11)
打印机效果使用前端的框架实现时,其实颇有局限,而且逻辑有点复杂,可以百度的也不是很多,最好是交给后端通同学来做,方案是后端控制接口请求的请求头content-type为text/event-stream;这是SSE热更新方案,相当于建立了一个长连接,前端再对该event事件流返回的数据进行判断和监听处理;简单理解就是可以实现后端一直给前端同学返回数据,我们再进行拼接即可,这样可以直接实现打印机效果啦,
2. 补丁上述使用流式接口实现打印机效果讲解:(2024/5/10)
详见下方代码以及讲解！(2-1)
3. 补充实退出时对会话进行保存(下次进入可以看到之前的对话):(2024/6/7)
详见下方代码以及讲解！(3-1)
1-1：（含）提示词问答对话效果
1-2：停止生成对话效果展示
1-3：打字机延迟效果展示
1-4：整体布局样式效果预览
打印机效果使用了流式接口，其中我遇到的比较糟心的问题是
1.什么是流式？怎么使用，我该选择哪一种？如何实现获取流？
答：
(1)流式就是一次链接 服务器可以一直给你发请求，可以主动中断请求也可等待请求完毕 ，其实就是一个长连接 相当于你打开门后 有人一直在给你递苹果（数量不一定多少）
(2)一般来说 ，使用流式，用的都是厂商的api,开放给我们使用，一般都是post请求，由于原生的eventSource 构造函数 只支持get请求 且不可有请求体，一般对于ai问答需要传参的情况，我们不会使用 eventSource构造函数，那么剩下的就是模拟信息流,有fetch,ajax 等
(3)这里我使用的是fetch ，重要的是获取流数据。并将他二进制解码（对于文本数据），然后进行一些js方法操作后，与项目需要的数据类型匹配后进行自己的业务操作
2-1-1 通用业务情况下的fetch
在这里很有必要给大家看一下流数据返回的样子
因为业务不一 对于流式返回渲染的数据的 格式不一 ,所以每个人处理的思路不同
在这里给大家说几个值得注意的点: 一就是要处理 流式转为 json 串 后面如何处理根据你自己的业务要求,另外一点 对于需要模板渲染的 需要设置 style="white-space: pre-wrap;" white-space: pre-line; （也可改为这个）
给大家看一下我的数据处理 ,我的比较麻烦 还有大家 慎用 JSON.Parse(Json.stringfy()) ,我知道这里有的写的可能不对(不可处理数组),一,但是也没报错 就不改了
总之~~~你要根据自己返回的数据格式和 你自己的业务需要 筛选出你要的数据就中
补充：对于下图中的resultArray 与ajaxArray 的map遍历建议使用try catch 捕获一下异常并打印输出一下，方便调试。
1：实现打印机效果
在开发过程中，ai机器人的回答，是由接口提供的模板数据，那么就涉及到dom渲染；如果要使用打印机效果，就不可以使用v-html！原因是v-htm会将模板中的“<，/>”打印出来！
所以我们就要换一种方式实现了~ Typed.js插件。
那什么是Typed.js？简单说它就是专为实现打字机效果而设计j的js插件。Typed.js可以让你的文字一个字一个字地出现，就像是在使用打字机一样。这为网页增添了一种生动而有趣的交互方式，使用户体验更加丰富。而在这里使用刚刚好！
装包：
使用：
DOM:
tips:
对于动态id的设置，可以以后端大模型接口返回的id作为唯一值哈！
Dom上的操作就这些 ，装包，模板使用设置唯一id,接下来就是js上的编写
javascript（all-see）：
tips:
下面说一下 停止生成的实现 ~上面咱们不是接收了这个实例了吗，还保存起来了，因为要用
停止生成：
机器人回答时，内容超出，实时滚动显示新打印的内容：
1.重新生成回答的内容
2.选择对话dom后，实现分享功能，生成一张特定要求的图片
3-1.退出时的会话保存:
markdown-it | markdown-it 中文文档
上面的是 markdown-it 中文文档链接 ,供参考使用
核心的东西就这些啦，如果有其他想问的，评论区留言即可~
博客写作不易，希望大家多多支持，多多捧场~~~最后给大家分享一下 typed.js 网址，网上比较多，我觉得这个比较好理解一些
以上就是本篇文章【全网最全vue2技术栈实现AI问答机器人功能（流式与非流式两种接口方法）】的全部内容了，欢迎阅览 ！ 文章地址：http://fabua.ksxb.net/news/4632.html 文章 相关文章 动态 同类文章 热门文章 栏目首页 网站地图 返回首页 海之东岸资讯移动站 http://fabua.ksxb.net/mobile/ , 查看更多