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

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

SpringBoot多数据源配置完整指南

《SpringBoot多数据源配置完整指南》在复杂的企业应用中,经常需要连接多个数据库,SpringBoot提供了灵活的多数据源配置方式,以下是详细的实现方案,需要的朋友可以参考下... 目录一、基础多数据源配置1. 添加依赖2. 配置多个数据源3. 配置数据源Bean二、JPA多数据源配置1. 配置主数据

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的