用vue2+chatGPT如何实现流式输出？

  • Z时代
  • 2024-03-16
  • 分类：IT

我是使用EventSource去实现的，可显示的话和访问普通接口一样是全部一次性显示出来，以下是我的代码

<div v-for="(item,index) in items" :key="index" :class="item.user==='bot'? 'chat-reply':'chat-question'">
            <div v-html="item.html? item.html : item.message || ''"></div>
</div>
let sse = new EventSource(`http://localhost:8080/api/openai/completions/stream?user=${this.user}&prompt=${this.message}`)
let this_ = this
this_.items.push({user: 'user', messageType: 'TEXT', message: this_.message})
this_.message = ''
sse.addEventListener('open', (function () {
  this_.generating = true
  this_.items.push({user: 'bot', messageType: 'TEXT', message: ''})
                        }))
sse.addEventListener('message', function (res) {
      let resJson = JSON.parse(res.data)
      if (resJson.code !== 0) {
          this_.generating = false
          alert("处理失败:" + resJson.msg)
          sse.close()
          return
      }
      resJson = resJson.data
      if (resJson.messageType === 'TEXT') {
          if (resJson.end === true) {
              sse.close()
              this_.generating = false
          } else {
            let index = this_.items.length - 1
            let obj = {
              user: 'bot',
              messageType: 'TEXT',
              message: this_.items[index].message + resJson.message,
              html: ''
            };
            this_.$set(this_.items, index, obj)
          }
          //图片
      } else {
      }
  }
)
  sse.addEventListener('error', function () {
      alert('服务器错误，请查看日志')
  })

请问要如何才可以实现和chatGPT一样效果的流式输出
tips：我自己用网页访问接口数据是一条一条输出的，可是在控制台看的话也是一瞬全部出来，虽然是分很多条

回答：

可以使用event-source-polyfill这个插件，这个需要后端来配合，可以实现流式输出

以上是 用vue2+chatGPT如何实现流式输出？ 的全部内容， 来源链接： utcz.com/p/935274.html

回到顶部