前端怎么用 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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath?3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则