vue流式接口的使用解讀(EventSource)

更新時(shí)間：2025年12月16日 15:23:27 作者：qq_50949240

文章主要介紹了如何使用EventSource和WebSocket進(jìn)行流式請求,以及如何主動關(guān)閉流式請求連接,同時(shí),文章還提到了流式接口的要求,包括攜帶請求頭的方法

一、EventSource

1.如果接口地址是http協(xié)議的，使用EventSource。如果是ws的，使用webSocket

2.主動關(guān)閉流式請求連接的方式：source.close（）

3.參考鏈接：Websocket的用法及常見應(yīng)用場景

if (!!window.EventSource) {
          // 建立連接
          let source = new EventSource(window.config.baseURL + '/tsyp/stream?uuid=' + uuid);
          //連接一旦建立，就會觸發(fā)open事件
          source.onopen = function (event) {
          }
          //客戶端收到服務(wù)器發(fā)來的數(shù)據(jù)
          source.onmessage = function (event) {
            let data = event.data
            if (data == "AIQA_EOF") {
              source.close() //關(guān)閉請求的連接
            }
          }
          //如果發(fā)生通信錯(cuò)誤（比如連接中斷），就會觸發(fā)error事件
          source.onerror = function (event) {
            console.error('EventSource failed:', event);
          }
        } else {
          console.warn("你的瀏覽器不支持SSE");
        }

二、流式接口要求攜帶請求頭

1.可以使用封裝的EventSourcePolyfill。（此方法只能用get請求）

但注意：

EventSourcePolyfill發(fā)送的請求可以攜帶請求頭，但是只能是get請求

 async putQuestion(query) {
        let that = this
        // 建立連接
        let source = new EventSourcePolyfill(`/eventSourceFill/chat/conversation/stream`,
          {
            withCredentials: true,
            headers: {
              "Content-Type": "application/json",
              Authorization: 'Bearer ' + getToken(),
              connection: "keep-alive",
            }
          });
        //連接一旦建立，就會觸發(fā)open事件
        source.onopen = function (event) {
          source.send('Authorization: Bearer ' + getToken());
          console.log("連接建立成功")
        }
        //客戶端收到服務(wù)器發(fā)來的數(shù)據(jù)
        source.onmessage = function (event) {
          let data = event.data
          console.log("data：", data)
          if (data == "AIQA_EOF") {
            source.close()
          } else {

          }
        }
        //如果發(fā)生通信錯(cuò)誤（比如連接中斷），就會觸發(fā)error事件
        source.onerror = function (event) {
          console.error('EventSource failed:', event);
        }
      },

2.請求要求攜帶請求頭（post、get請求均可）

async sendRequest(query) {
        let controller = new AbortController();
        let {signal} = controller;
        //controller.abort() 用于取消fetch接口請求
        this.cancel_QA = controller
        //使用fetch發(fā)送請求
        const response = await fetch('http://****/chat/conversation/stream', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + getToken()
          },
          body: JSON.stringify(query),
          signal
        });
        // 檢查響應(yīng)是否成功
        if (!response.ok) {
          console.error('網(wǎng)絡(luò)響應(yīng)失敗:', response.statusText);
          return;
        }
        // 獲取響應(yīng)體的可讀流
        const reader = response.body.getReader();
        const decoder = new TextDecoder('utf-8');
        // 逐塊讀取數(shù)據(jù)
        while (true) {
          const {done, value} = await reader.read();
          if (done) break; // 流結(jié)束
          let msg = decoder.decode(value, {stream: true})
          if (msg.includes("LLM-EOF")) {
            console.warn("回答結(jié)束")
            this.cancel_QA = null
          } else {
          }
        }
      },