前端怎么用 EventSource并配置请求头及加参数(流式数据)

本文主要是介绍前端怎么用 EventSource并配置请求头及加参数(流式数据),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这里写目录标题

  • 一、EventSourcePolyfill
  • 二、直接上代码

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

一、EventSourcePolyfill

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

// 安装npm install event-source-polyfill --save//引用
import { EventSourcePolyfill } from "event-source-polyfill";

二、直接上代码

 sendRequest(messageId, content, questionId, questionType) {const innerIndex = this.messageList.length - 1;const aiToken = JSON.parse(localStorage.getItem('token'));let that = this;let eventSource;if (questionId) {eventSource = new EventSourcePolyfill(`${process.env.VUE_APP_WEB_API}/url...........?f_rnd=${new Date().getTime()}&message_id=${messageId}&question_id=${questionId}&stream=true`,{headers: {'Content-Type': 'text/event-stream',aiToken: aiToken,accept: '*/*','Cache-Control': 'no-cache',Connection: 'keep-alive',// 'cache-control': 'max-age=0',},});} else {eventSource = new EventSourcePolyfill(`${process.env.VUE_APP_WEB_API}/ai_assistant_chatdoc/receive_message?f_rnd=${new Date().getTime()}&message_id=${messageId}&stream=true`,{headers: {'Content-Type': 'text/event-stream',aiToken: aiToken,accept: '*/*','Cache-Control': 'no-cache',Connection: 'keep-alive',},});}//open:订阅成功(和后端连接成功)eventSource.onopen = function (e) {console.log(e, '连接刚打开时触发');};//message:后端返回信息,格式可以和后端协商that.messageQueue = []; //整个流式数据this.processing = false; //判断是否返回数据中let resultWord = '';let rowData = {};eventSource.onmessage = function (e) {const data = JSON.parse(e.data) || {}; //这里后端返回的是字符串所以目前我这边有转换console.log(data, data.data.content, Date.now());if (data.code === 200) {that.loading = false;that.scrollFlag = false;if (data.data.content === '[DONE]') { //流式结束了rowData = data.data;}that.messageQueue.push(data.data.content);if (that.processing) return;that.processing = true; (async function processMessages() {while (that.processing) {// 改为无限循环let message;if (that.messageQueue.length > 0) {message = that.messageQueue.shift();if (message === '[DONE]') {that.receiveMsg.source = rowData.source;that.receiveMsg.sourceEdit = rowData.is_edit;that.$set(that.messageList[innerIndex], 'message_id', rowData.message_id);that.requestRecomme(messageId, innerIndex);} else {resultWord += message;console.log(resultWord, 'resultWord');that.$set(that.messageList, innerIndex, {type: 'right',session_id: data.data.session_id,message_id: data.data.message_id,reply_id: data.data.reply_id,message: resultWord,source: [],sourceEdit: [],question: [],});that.receiveMsg = that.messageList[innerIndex];that.chcekScroll();that.executeScroll(!that.scrollFlag);}await new Promise(resolve => setTimeout(resolve, 30)); //30毫秒读取一下message} else {that.processing = false;await new Promise(resolve => setTimeout(resolve, 800)); //如果读取速度大于流式返回速度就等一下}if (that.messageQueue.length === 0 && message === '[DONE]') {break;}}that.processing = false;})();}};//  error:错误(可能是断开,可能是后端返回的信息)eventSource.onerror = function (e) {console.log(e, '连接无法打开时触发');eventSource.close(); // 关闭连接setTimeout(() => {}, 5000);};},

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

这篇关于前端怎么用 EventSource并配置请求头及加参数(流式数据)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1091008

相关文章

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》:本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置(如汉化包、远程SSH连接)、语言包安装(如C/C++插件)等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh,用于远程连接2.1安装2

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,:本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内

将sqlserver数据迁移到mysql的详细步骤记录

《将sqlserver数据迁移到mysql的详细步骤记录》:本文主要介绍将SQLServer数据迁移到MySQL的步骤,包括导出数据、转换数据格式和导入数据,通过示例和工具说明,帮助大家顺利完成... 目录前言一、导出SQL Server 数据二、转换数据格式为mysql兼容格式三、导入数据到MySQL数据

C++中使用vector存储并遍历数据的基本步骤

《C++中使用vector存储并遍历数据的基本步骤》C++标准模板库(STL)提供了多种容器类型,包括顺序容器、关联容器、无序关联容器和容器适配器,每种容器都有其特定的用途和特性,:本文主要介绍C... 目录(1)容器及简要描述‌php顺序容器‌‌关联容器‌‌无序关联容器‌(基于哈希表):‌容器适配器‌:(

C#提取PDF表单数据的实现流程

《C#提取PDF表单数据的实现流程》PDF表单是一种常见的数据收集工具,广泛应用于调查问卷、业务合同等场景,凭借出色的跨平台兼容性和标准化特点,PDF表单在各行各业中得到了广泛应用,本文将探讨如何使用... 目录引言使用工具C# 提取多个PDF表单域的数据C# 提取特定PDF表单域的数据引言PDF表单是一

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法:数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高;分治法高效但实现复杂;位图法可读性差,但存储空间受限... 目录三种方法:方法概要数据库排序(http://www.chinasem.cn对数据库设备要求较高)分治法(常

Redis多种内存淘汰策略及配置技巧分享

《Redis多种内存淘汰策略及配置技巧分享》本文介绍了Redis内存满时的淘汰机制,包括内存淘汰机制的概念,Redis提供的8种淘汰策略(如noeviction、volatile-lru等)及其适用场... 目录前言一、什么是 Redis 的内存淘汰机制?二、Redis 内存淘汰策略1. pythonnoe

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代