前端怎么用 EventSource并配置请求头及加参数（流式数据） ...

EventSource 接口是 web 内容与服务器发送事件通讯的接口。
一个 EventSource 实例会对 HTTP 服务器开启一个持久化的连接，以 text/event-stream 格式发送事件，此连接会不停保持开启直到通过调用 EventSource.close() 关闭。
EventSource 服务器发送事件是单向的。数据消息只能从服务端发送到客户端。
  一、EventSourcePolyfill

   EventSourcePolyfill 是EventSource封装的一个方法，EventSourcePolyfill 可以配置请求头

1. // 安装
2. npm install event-source-polyfill --save
4. //引用
5. import { EventSourcePolyfill } from "event-source-polyfill";

复制代码

二、直接上代码

1. sendRequest(messageId, content, questionId, questionType) {
2.       const innerIndex = this.messageList.length - 1;
3.       const aiToken = JSON.parse(localStorage.getItem('token'));
5.       let that = this;
6.       let eventSource;
7.       if (questionId) {
8.         eventSource = new EventSourcePolyfill(
9.           `${
10.             process.env.VUE_APP_WEB_API
11.           }/url...........?f_rnd=${new Date().getTime()}&message_id=${messageId}&question_id=${questionId}&stream=true`,
12.           {
13.             headers: {
14.               'Content-Type': 'text/event-stream',
15.               aiToken: aiToken,
16.               accept: '*/*',
17.               'Cache-Control': 'no-cache',
18.               Connection: 'keep-alive',
19.               // 'cache-control': 'max-age=0',
20.             },
21.           }
22.         );
23.       } else {
24.         eventSource = new EventSourcePolyfill(
25.           `${
26.             process.env.VUE_APP_WEB_API
27.           }/ai_assistant_chatdoc/receive_message?f_rnd=${new Date().getTime()}&message_id=${messageId}&stream=true`,
29.           {
30.             headers: {
31.               'Content-Type': 'text/event-stream',
32.               aiToken: aiToken,
33.               accept: '*/*',
34.               'Cache-Control': 'no-cache',
35.               Connection: 'keep-alive',
36.             },
37.           }
38.         );
39.       }
40.       //open：订阅成功（和后端连接成功）
41.       eventSource.onopen = function (e) {
42.         console.log(e, '连接刚打开时触发');
43.       };
44.       //message：后端返回信息，格式可以和后端协商
45.       that.messageQueue = []; //整个流式数据
46.       this.processing = false; //判断是否返回数据中
48.       let resultWord = '';
49.       let rowData = {};
51.       eventSource.onmessage = function (e) {
52.         const data = JSON.parse(e.data) || {}; //这里后端返回的是字符串所以目前我这边有转换
53.         console.log(data, data.data.content, Date.now());
55.         if (data.code === 200) {
56.           that.loading = false;
57.           that.scrollFlag = false;
58.           if (data.data.content === '[DONE]') { //流式结束了
59.             rowData = data.data;
60.           }
61.           that.messageQueue.push(data.data.content);
63.           if (that.processing) return;
64.           that.processing = true;
65.           (async function processMessages() {
66.             while (that.processing) {
67.               // 改为无限循环
68.               let message;
69.               if (that.messageQueue.length > 0) {
70.                 message = that.messageQueue.shift();
72.                 if (message === '[DONE]') {
73.                   that.receiveMsg.source = rowData.source;
74.                   that.receiveMsg.sourceEdit = rowData.is_edit;
75.                   that.$set(that.messageList[innerIndex], 'message_id', rowData.message_id);
76.                   that.requestRecomme(messageId, innerIndex);
77.                 } else {
78.                   resultWord += message;
79.                   console.log(resultWord, 'resultWord');
80.                   that.$set(that.messageList, innerIndex, {
81.                     type: 'right',
82.                     session_id: data.data.session_id,
83.                     message_id: data.data.message_id,
84.                     reply_id: data.data.reply_id,
85.                     message: resultWord,
86.                     source: [],
87.                     sourceEdit: [],
88.                     question: [],
89.                   });
90.                   that.receiveMsg = that.messageList[innerIndex];
91.                   that.chcekScroll();
92.                   that.executeScroll(!that.scrollFlag);
93.                 }
94.                 await new Promise(resolve => setTimeout(resolve, 30)); //30毫秒读取一下message
95.               } else {
96.                 that.processing = false;
97.                 await new Promise(resolve => setTimeout(resolve, 800)); //如果读取速度大于流式返回速度就等一下
98.               }
99.               if (that.messageQueue.length === 0 && message === '[DONE]') {
100.                 break;
101.               }
102.             }
103.             that.processing = false;
104.           })();
105.         }
106.       };
107.       //  error：错误（可能是断开，可能是后端返回的信息）
108.       eventSource.onerror = function (e) {
109.         console.log(e, '连接无法打开时触发');
110.         eventSource.close(); // 关闭连接
111.         setTimeout(() => {}, 5000);
112.       };
113.     },

复制代码

链接: https://blog.csdn.net/weixin_49066399/article/details/138713416

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。