当前位置:首页 » 《关注互联网》 » 正文

前端如何接收SSE流式数据传输(大模型网站常用)

11 人参与  2024年09月11日 18:01  分类 : 《关注互联网》  评论

点击全文阅读


使用fetchEventSource
参考:https://blog.csdn.net/qq_43750656/article/details/131591198
https://zhuanlan.zhihu.com/p/686618062

首先安装:

npm install --save @microsoft/fetch-event-source

我参考各个资料写的函数:

// 流式传输处理函数export function sseRequest(url: string, data: object, successCallback: Function, closeCallback?: Function, errCallback?: Function) {  const abortController = new AbortController()  fetchEventSource(import.meta.env.VITE_APP_BASE_API + url, {    method: 'POST',    headers: {      'Content-Type': 'application/json;charset=utf-8',      'Accept': '*/*',      'token': localStorage.getItem('token')!    },    body: JSON.stringify(data),    openWhenHidden: true, // 取消visibilityChange事件    signal: abortController.signal, // AbortSignal    // 按需添加此函数,不用就不添加    async onopen(response) {        if (response.ok && response.headers.get('content-type') === EventStreamContentType) {            return; // everything's good        } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {            // client-side errors are usually non-retriable:            throw new FatalError();        } else {            throw new RetriableError();        }    },    onmessage(ev) {      // 每当消息推送过来时,就调用处理函数处理消息      successCallback(ev)    },    onerror(err) {      abortController.abort()      if (errCallback) { errCallback(err) }      throw err    },    onclose() {      abortController.abort()      if (closeCallback) { closeCallback() }    }  })}// 调用sseRequest示例:export const beginWrite = (topic: string, styleId: string, style: string) => {  const writeStore = useWriteStore()  function successCallback(ev: { data: string, event: string, id: string, retry: number }) {    if (ev.event === 'message') {      const newStr = ev.data.replace(/_::_/g, '\n\n').replace(/_:_/g, '\n').replace(/_._/g, ' ')      writeStore.sseInput += newStr    }    if (ev.event === 'message_end') {      writeStore.sseInput = ''    }  }  sseRequest('/knowledge/know_write', { topic, styleId, style }, successCallback)}

点击全文阅读


本文链接:http://zhangshiyu.com/post/158414.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1