流式接口解析及数据展示

前言

此处为一个流式接口的对话,前端需要以流式的方式进行输出。前端框架使用Vue3

  • HTML

说明:此处将展示对话内容的多于元素已删除,只保留了消息体的HTML。

<div v-for="item in data" class="chat-item"><div :class="'message ' + item.type"><div class="response-info"><span class="message-text">{{ item.content }}</span></div></div>
</div>
  • JavaScript

定义streamChatData为获取流式数据的方法。在data不断变化的过程中,HTML中的消息就会以流式的方式打印出来。

const streamChatData = async (params) => {// data为存储对话的数组data.value.push({type: 'response',content: '正在获取答案中...'})// 流式接口地址const url = `${base_chat}/xxxx/chat`try {const access_token = Cookies.get('access_token')// 发送请求const response = await fetch(url, {method: 'post',headers: {'Content-Type': 'application/json','Authorization': `Bearer ${access_token}`},mode: 'cors',body: JSON.stringify(params)})if(!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`)}// console.log(`获取的数据大小${response.headers.get('content-length')/1000/1000}M`)data.value[data.value.length - 1].content = ''const reader = response.body?.getReader()const dispatchRaw = async (raw: string) => {raw = raw.trim();const matches = raw.split("data:").map((item: string) => item.trim()).filter((item: string) => item)for (let va of matches) {va = !!va && JSON.parse(va) || {}await onMessagData(va)}}while(true) {const { value, done } = await reader?.read()if(done) {console.log('stream done')isResponsed.value = truebreak}const utf8Decoder = new TextDecoder("utf-8");let raw: any = value ? utf8Decoder.decode(value, { stream: true }) : ''console.log('stream raw:', raw)dispatchRaw(raw)// isResponsed.value = true}} catch(err) {console.log(err)}
}const onMessagData = (va) => {data.value[data.value.length - 1].content += va?.message || ''
}

扩展

实现将一个字符串以打字机的效果输出,每次只打印一个字。

  • HTML
<span>{{ text }}</span>
  • JavaScript
// 定义一个完整的字符串
let fullText = ref('Hello Typewriter Effect!')// HTML中展示的字符串
let text = ref()// 定义打字机打印的方法
const typeWriter = (index) => {if(index < fullText.value.length) {text.value = fullText.value.slice(0, index)}setTimeout(() => {typeWriter(index + 1)}, 100);
}

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

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

相关文章

反射复习(java)

文章目录 反射机制的作用反射机制的原理加载机制详细解释 获取 Class 对象反射获取构造方法&#xff1a;获取 Class 对象里面 Constructor 对象反射获取成员变量&#xff1a;获取Class 对象里面的 Field 对象反射获取成员方法&#xff1a;获取 Class 对象里的 Method 对象其他常…

15.编写自动化测试(下)

标题 三、控制测试流程3.1 添加测试参数3.2 并行或连续运行测试3.3 显示函数输出3.4 指定/过滤测试用例名称3.5 忽略某些测试用例3.6 只运行被忽略的测试 四、测试的组织结构4.1 概念引入4.2 测试私有函数4.2 单元测试4.3 集成测试4.4 集成测试中的子模块4.5 二进制crate的集成…

Python脚本中使用 if 语句导致的错误代码

在 Python 脚本中使用 if 语句是一种常见的控制流程结构&#xff0c;用于根据条件决定程序的执行路径。当使用 Python 中的 if 语句时&#xff0c;可能会导致一些常见的错误。下面就是我经常遇到的错误代码示例及其可能的原因和解决方法&#xff0c;希望对大家有些帮助&#xf…

深入解析Spring Cloud:微服务架构的利器(下)

在上一篇文章中&#xff0c;我们介绍了Spring Cloud的基本概念、核心组件以及如何在Java项目中使用Spring Cloud进行服务注册与发现。本文将继续探讨Spring Cloud的负载均衡、配置管理、服务熔断和API网关等高级特性。 4. 负载均衡 4.1 使用Ribbon Spring Cloud Ribbon是一个…

死锁预防之银行家算法

死锁预防之银行家算法 第一章 概述 Dijkstra提出了一种能够避免死锁的调度算法,称为银行家算法。 它的模型基于一个小城镇的银行家,他向一群客户分别承诺了一定的贷款额度,每个客户都有一个贷款额度,银行家知道不可能所有客户同时都需要最大贷款额,所以他只保留一定单位…

韩国职场新趋势:员工拒绝晋升,追求工作与生活的平衡

在当前职场环境中&#xff0c;晋升通常被视为职业生涯发展的重要里程碑。然而&#xff0c;据韩国《今日财经》报道&#xff0c;现代重工工会在今年的劳资谈判中提出了一个令人关注的要求——“拒绝晋升权”。这一要求反映了韩国职场的新趋势&#xff0c;即越来越多的员工对高薪…

长期保存红酒的挑战与应对策略

云仓酒庄雷盛红酒&#xff0c;以其卓着的品质和口感&#xff0c;赢得了无数葡萄酒爱好者的喜爱。然而&#xff0c;对于那些希望长期保存这些珍贵佳酿的人来说&#xff0c;如何确保红酒的品质和风味不受时间的影响&#xff0c;却是一项充满挑战的任务。 长期保存红酒的大挑战来自…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 火星字符串(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

电影《加菲猫家族》观后感

上周看了电影《加菲猫家族》&#xff0c;本片其中有很多明亮的画面&#xff0c;相关艳丽的色彩&#xff0c;充满温馨的场景&#xff0c;很符合加菲猫的一贯画风&#xff0c;即使反派出场时&#xff0c;带有阴暗的感觉&#xff0c;看起也不是特别吓人&#xff0c;比较欢乐气氛&a…

定时器介绍之8253芯片

目录 定时器简介 8253功能介绍 组成 工作原理 相关引脚 启动方法 计数方式 实现 读取计数值 定时器简介 8253功能介绍 内部结构 相关引脚 计数器组成 工作原理 启动方法 计数方式 初始化&#xff1a;写入控制字——>写入计数初值 实现 计数长度选择&#xff1a…

jingxiang制作

文章目录 jingxiang制作为什么需要jingxiang制作如何进行jingxiang制作 快照方式制作jingxiang制作命令do cker commit 快照制作jingxiang创建临时工作目录编写一个实例代码启动一个容器替换国内软件源安装编译软件源代码拷贝到容器中编译运行提交为一个jingxiang测试是否可以正…

金额工具类:数字转字符串(每三位以逗号分隔)

问题背景 要求实现一个金额转换的工具类,输入一个数字金额,返回新的字符串,每三位以逗号分隔。 例如: 输入:1000 输出:1,000输入:5689104 输出:5,689,104输入:12345678 输出:12,345,678代码实现 /*** @description 数组格式化, 每三位以逗号分隔* @date 2024-6-1…

虚拟机Ping不通主机

1.问题描述 虚拟机IP&#xff1a; 192.168.3.133 主机ip&#xff1a;192.168.3.137 虚拟机Ping不通主机 主机可以ping通虚拟机 2.解决方案 设置桥接模式 控制面板找到网络和Internet设置 3.问题解决

数据库基础——数字、字符串、日期时间、二进制

数据库的分类 定义&#xff1a;主要是数据表的创建、删除、修改 操纵&#xff1a;对数据进行增删添改 控制&#xff1a;对数据库的权限进行管理 数据库不区分大小写&#xff0c;一条语句的结尾以英文分号结尾 命名不能是关键字&#xff0c;只能使用英文、数字和下划线 注释可以…

实施细则!2024年四川省科学技术奖励办法申报条件、要求、对象及材料整理

2024年四川省科学技术奖励办法申报条件、要求、对象及材料整理如下&#xff0c;四川省的企业单位可以了解一下 第一章  总 则 第一条 为做好四川省科学技术奖励工作&#xff0c;规范评审程序&#xff0c;保障四川省科学技术奖(以下简称“省科学技术奖”)的评审质量&#xf…

geoserver 如何设置数据目录

在GeoServer中&#xff0c;数据目录是存储配置文件、数据存储、图层、样式等的重要目录。默认情况下&#xff0c;GeoServer的数据目录位于GeoServer安装目录下的data_dir文件夹。但在很多情况下&#xff0c;用户可能希望将数据目录设置在一个自定义位置&#xff0c;以便更好地管…

手持气象仪:科技与自然交汇的奇妙工具

TH-SQ5在广袤无垠的大自然中&#xff0c;天气总是瞬息万变&#xff0c;让人难以捉摸。然而&#xff0c;随着科技的进步&#xff0c;人类已经能够借助各种先进的仪器来预测和监测天气变化&#xff0c;其中&#xff0c;手持气象仪便是其中的佼佼者。 手持气象仪&#xff0c;顾名…

Java获取本机IP地址的方法(内网、公网)

起因是公司一个springboot项目启动类打印了本机IP地址加端口号&#xff0c;方便访问项目页面&#xff0c;但是发现打印出来的不是“无线局域网”的ip而是“以太网适配器”ip&#xff0c;如下图所示 这样就导致后续本地起项目连接xxl-job注册节点的时候因为不在同个局域网下ping…

打假-代码都让AI写,CS还有前途吗?加州大学伯克利分校:CDSS申请人数飙升48%!

一、背景 现在 CSDN 上发现了一篇文章 点进去文档的内容在说CDSS专业 还有一篇文章 文章基本上都是同一个意思&#xff0c;CDSS专业申请人数飙升 48%&#xff0c;但却有人刻意的把计算机专业突出出来。我不确定有人刻意把 CDSS 专业 和 CS 专业混淆的目的是什么&#xff1f;…

【数据结构】红黑树实现详解

在本篇博客中&#xff0c;作者将会带领你使用C来实现一棵红黑树&#xff0c;此红黑树的实现是基于二叉搜索树和AVLTree一块来讲的&#xff0c;所以在看本篇博客之前&#xff0c;你可以先看看下面这两篇博客 【C】二叉搜索树-CSDN博客 【数据结构】AVLTree实现详解-CSDN博客 在这…