Vue3——如何读取chatgpt的流式数据

一、实现效果图

二、读取数据

下图是gpt返回的流式数据的数据形式,那么我们怎么把这个数据放到页面中,以实现gpt的打字机效果呢?

javascript 复制代码
const response = await fetch(baseURLs + "/api/ut/plan/smartWriteStream", {
      method: "POST",
      body: JSON.stringify(par),
      headers: {
        "Content-Type": "application/json",
        Accept: "text/event-stream",
        tk: localStorage.getItem("token"),
      },
    });
    searchCon.value = "";
    const encode = new TextDecoder("utf-8");
    const reader = response.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      const decodeText = encode.decode(value);
      // console.log(decodeText, "流式数据");

      // 读取结束
      if (done) {
        isShowstopBtn.value = false;
        isShowconfirmBtn.value = true;
        break;
      }


      if (isAddText.value) {
        longText.value += getReaderText(decodeText);
        setTimeout(() => {
          if (scrollbarRef.value) {
            let ele = document.getElementById("innerRef");
            const max = ele.clientHeight;
            scrollbarRef.value[0].setScrollTop(max * 1 + 1000000);
          }
        }, 300);
      } else {
        break;
      }
    }

三、处理流式数据中的特殊字符

javascript 复制代码
const getReaderText = (str) => {
  let matchStr = "";
  try {
    let resultList = str.trim().split("\n");
    resultList.forEach((item) => {
      const firstQuoteIndex = item.indexOf('"');
      const lastQuoteIndex = item.lastIndexOf('"');
      matchStr += item
        .substring(firstQuoteIndex + 1, lastQuoteIndex)
        .replace("\\n\\n", "")
        .replace("\n\n", "")
        .replace("\\n", "")
        .replace("\n", "")
        .replace("\\\\", "")
        .replace("\\", "");
    });
    // console.log(resultList, "4444");
  } catch (e) {
    // console.log(e);
  }
  // console.log(matchStr);
  return matchStr;
};
相关推荐
哆啦A梦158818 分钟前
搜索页面布局
前端·vue.js·node.js
_院长大人_42 分钟前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD43 分钟前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15882 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫2 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo2 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li3 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐3 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊4 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
罚时大师月色5 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript