• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端发送Fetch请求实现流式请求、模拟打字机效果等

武飞扬头像
DanceDonkey
帮助3

  • 前端需要接收后端的流式返回数据,并实时渲染。
    普通的xhr请求都是等http协议数据包一次性返回之后才渲染,类似于ChatGPT的Http接口内容类型为text/event-stream。这种内容类型需要与浏览器建立持久连接并持续监听服务器返回的数据。

  • npm 方式安装类库

npm install @microsoft/fetch-event-source
  • 使用
let controller = new AbortController()
        const eventSource = fetchEventSource(fetchUrl, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(
              params
          ),
          signal: controller.signal,
          onopen() {
            console.log('open')
          },
          onmessage(event) {
            console.log('onMessage',event.data)
            let data = event.data
            let jsonData = JSON.parse(data);
          },
          onclose() {
            controller.abort();//出错后不要重试
            eventSource.close();
          },
          onerror(error) {
            console.log('close',error)
            controller.abort();//出错后不要重试
            eventSource.close();
          }

        })
      }
学新通

调用 fetchEventSource API可以返回一个对象,这个对象可以控制在连接失败时不要重试,直接关闭本次连接。

  1. onopen:建立连接的回调
  2. onmessage:接收一次数据段时回调,因为是流式返回,所以这个回调会被调用多次。
  3. onclose:正常结束的回调
  4. onerror:连接出现异常回调

onmessage的主要逻辑就是累加所有流式数据返回的内容,然后渲染到页面上,这里需要注意的是接口返回的为markdown格式的数据,所以还需要用到一个markdown转html的依赖库。

  • 光标闪烁效果模拟

这里其实是用了一个span来模拟实现的

 const cursorFlaskStr = "<span id='cursorFlask' style='opacity:1;font-weight: bold'>|</span>"
      setInterval(() => {
        let cursorFlask = document.getElementById("cursorFlask");
        if (cursorFlask) {
          let opacity = cursorFlask.style.opacity;
          if (opacity && opacity.trim() == '0') {
            cursorFlask.style.opacity = '1'
          } else {
            cursorFlask.style.opacity = '0'
          }
        }
      }, 245)

这里的逻辑是每次监听到后端的流式数据以后,动态拼接上已有的字符串,然后将markdown转为html格式,然后继续拼接上这个span标签一起渲染到页面上,这个时候再开启个定时器,定时器获取到这个标签,动态的调整这个标签的opcatity透明度就可以实现光标闪烁的效果了。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhhbcffb
系列文章
更多 icon
同类精品
更多 icon
继续加载