模仿chatgpt文字的流式输出, eventStream

用过chatgpt的同学都知道,chatgpt的文本是流式输出的,也就是有打字机的那种一个字一个字蹦出来的效果,这里不是前端控制的那种效果(前端拿到所有的文本,然后一个字一个字的渲染),而是我们真的一个字一个字的从服务端拿到然后立刻渲染后页面上,这里主要涉及到eventStream

那么如何实现呢?

let eventSource: EventSource

const send = () => {
  eventSource = new EventSource('url')
  eventSource.onmessage = function (event) {
    if (event.data === '[DONE]') {
      return stop()
    }
    const data = JSON.parse(event.data)
    console.log(data.message)
  }
}

const stop = () => {
eventSource.close()
}

send函数展示了如何建立连接,并接受由服务端推送过来的消息,stop函数展示了如何结束这个连接。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EventStream(事件流)是一种数据传输机制,用于实时地从服务器端向客户端发送事件或通知。它基于HTTP协议,采用长轮询(long polling)方式,即客户端向服务器发送一个请求后,服务器一直保持连接,并等待事件发生,一旦事件发生,服务器将立即将数据推送给客户端。 EventStream的优点之一是实时性高,可以保持服务器与客户端之间的持久连接,实时传递数据。这样可以减少客户端不断轮询服务器的次数,节省带宽和服务器资源。另外,它允许双向通信,即客户端可以向服务器发送请求和数据,实现更灵活的交互。 EventStream的使用场景广泛。例如,在实时通信应用程序中,可以利用EventStream推送新消息,使用户实时收到通知。在股票或天气预报等领域,EventStream可以用于向用户提供实时更新。同时,它也适用于监控和日志记录系统,可以将重要事件实时推送给管理员。 但是,EventStream也存在一些挑战和限制。首先,由于长轮询方式需要保持持久连接,会占用一定的服务器资源。其次,如果网络连接不稳定,事件可能会延迟传输或遗失。此外,EventStream仅适用于支持HTML5的现代浏览器,不同浏览器对其实现方式可能存在差异。 总之,EventStream作为一种实时数据传输机制,提供了高效率、低延迟和双向通信的特点,适用于各种实时通知、监控和推送场景。但在使用时需要考虑到服务器资源和网络稳定性的因素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值