流式接口解析及数据展示

前言

此处为一个流式接口的对话，前端需要以流式的方式进行输出。前端框架使用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);
}