当前位置: 首页 > news >正文

GPT打字机效果—— fetchEventSouce进行sse流式请求

EventStream基本用法
与 WebSocket 不同的是,服务器发送事件是单向的。数据消息只能从服务端到发送到客户端(如用户的浏览器)。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。

const evtSource = new EventSource(“/api/v1/sse”)
// 每次连接开启时调用
evtSource.onopen = function () {
console.log(“连接开始启动”);
};
// 每次接受数据时调用
evtSource.onmessage = (e) => {
console.log(‘输入每次接受的数据’,e)
};
// 每次连接发生错误时调用
evtSource.onerror = function () {
console.log(“连接发生错误”);
};

需要注意的是,EventSource是以get方式发送请求,对于post请求原生的EventSource是无法实现的

如何用post的方式进行eventSource请求
常见的是通过@microsoft/fetch-event-source 这个库里的fetchEventSource来实现
import { fetchEventSource } from ‘@microsoft/fetch-event-source’;
这个库封装了一个方法,使得我们可以便捷的通过这个方法直接进行调用
以下是具体的代码

const [controller, setController] = useState(new AbortController());
const url = ‘http:xxx’;
fetchEventSource(url, {
method: ‘POST’,
headers: {
// SYSTEM_PORTAL_TYPE: ‘LINGXI_RUNNING’,
‘Content-Type’: ‘text/event-stream’,
‘X-CSRF-TOKEN’: ‘1232123’,
// Cookies: 'ZSMART_LOCALE=zh; ',
},
mode: ‘cors’,
openWhenHidden: true,
credentials: ‘include’,
signal: controller?.signal,
onmessage: async (event: any) => {
console.log(‘eventeventeventeventeventevent’);
console.log(event);
},
onerror(err: any) {
console.log(‘err’, err);
},
async onopen(response: any) {
if (response.ok) {
console.log(‘开始建立连接’);
}
},
onclose() {
console.log(‘关闭’);
controller?.abort();
setController(new AbortController());
throw new Error();
},
}).catch((err: any) => {
controller?.abort();
setController(new AbortController());
console.log({ err });
throw new Error(err);
});

相关文章:

GPT打字机效果—— fetchEventSouce进行sse流式请求

EventStream基本用法 与 WebSocket 不同的是,服务器发送事件是单向的。数据消息只能从服务端到发送到客户端(如用户的浏览器)。这使其成为不需要从客户端往服务器发送消息的情况下的最佳选择。 const evtSource new EventSource(“/api/v1/…...

SpringBoot 在线家具商城:设计考量与实现细节聚焦

第4章 系统设计 市面上设计比较好的系统都有一个共同特征,就是主题鲜明突出。通过对页面简洁清晰的布局,让页面的内容,包括文字语言,或者视频图片等元素可以清晰表达出系统的主题。让来访用户无需花费过多精力和时间找寻需要的内容…...

每日速记10道java面试题07

其他资料: 每日速记10道java面试题01-CSDN博客 每日速记10道java面试题02-CSDN博客 每日速记10道java面试题03-CSDN博客 每日速记10道java面试题04-CSDN博客 每日速记10道java面试题05-CSDN博客 每日速记10道java面试题06-CSDN博客 目录 1.线程的生命周期在j…...

前端面试热门题(二)[html\css\js\node\vue)

Vue 性能优化的方法 Vue 性能优化的方法多种多样,以下是一些常用的策略: 使用v-show替换v-if:v-show是通过CSS控制元素的显示与隐藏,而v-if是通过操作DOM来控制元素的显示与隐藏,频繁操作DOM会导致性能下降。因此&am…...

mvc基础及搭建一个静态网站

mvc asp.net core mvc环境 .net8vscode * Asp.Net Core 基础* .net8* 前辈* .net 4.9 非跨平台版本 VC* 跨平台版本* 1.0* 2.0* 2.1* 3.1* 5* 语言* C#* F# * Visual Basic* 框架* web应用* asp应用* WebFrom* mvc应用* 桌面应用* Winform* WPF* Web Api api应用或者叫服务* …...

AOSP的同步问题

repo sync同步时提示出错: error: .repo/manifests/: contains uncommitted changesRepo command failed due to the following UpdateManifestError errors: contains uncommitted changes解决方法: 1、cd 进入.repo/manifests cd .repo/manifests2、执行如下三…...

HarmonyOS4+NEXT星河版入门与项目实战(23)------实现手机游戏摇杆功能

文章目录 1、案例效果2、案例实现1、代码实现2、代码解释4、总结1、案例效果 2、案例实现 1、代码实现 代码如下(示例): import router from @ohos.router import {ResizeDirection } from @ohos.UiTest import curves...

Logistic Regression(逻辑回归)、Maximum Likelihood Estimatio(最大似然估计)

Logistic Regression(逻辑回归)、Maximum Likelihood Estimatio(最大似然估计) 逻辑回归(Logistic Regression,LR)逻辑回归的基本思想逻辑回归模型逻辑回归的目标最大似然估计优化方法 逻辑回归…...

Vue文字转语音实现

在开发流程中,面对语音支持的需求,小规模语音内容或许可以通过预处理后播放来轻松应对,但当涉及大量语音时,这一方法就显得繁琐低效了。为此,智慧的开发者们总能找到便捷的解决方案——利用Web技术实现语音播放&#x…...

Docker快速部署RabbitMq

在外网服务器拉取镜像 docker pull arm64v8/rabbitmq:3.8.9-management或者拉去我的服务器的 docker pull registry.cn-hangzhou.aliyuncs.com/qiluo-images/linux_arm64_rabbitmq:3.8.9-management重新命名 docker tag registry.cn-hangzhou.aliyuncs.com/qiluo-images/lin…...

glog在vs2022 hello world中使用

准备工作 设置dns为阿里云dns 223.5.5.5,下载cmake,vs2022,git git clone https://github.com/google/glog.git cd glog mkdir build cd build cmake .. 拷贝文件 新建hello world并设置 设置预处理器增加GLOG_USE_GLOG_EXPORT;GLOG_NO_AB…...

[241129] Docker Desktop 4.36 发布:企业级管理功能、WSL 2 增强 | Smile v4.0.0 发布

目录 Docker Desktop 4.36 发布:企业级管理功能、WSL 2 和 ECI 增强Smile v4.0.0 发布!Java 机器学习库迎来重大升级 Docker Desktop 4.36 发布:企业级管理功能、WSL 2 和 ECI 增强 Docker Desktop 4.36 带来了强大的更新,简化了…...

CentOS使用chrony服务进行时间同步源设置脚本

CentOS使用chrony服务进行时间同步源设置脚本 #!/bin/bash# Created: 2024-11-26 # Function: Check and Set OS time sync source to 10.0.11.100 # FileName: centos_set_time_source_to_ad.sh # Creator: Anster # Usage: # curl http://webserver-ip/scripts/centos_set…...

Git仓库迁移到远程仓库(源码、分支、提交)

单个迁移仓库 一、迁移仓库 1.准备工作 > 手动在电脑创建一个临时文件夹,CMD进入该目录 > 远程仓库上创建一个同名的空仓库 2.CMD命令:拉取旧Git仓库(包含提交、分支、源码) $ git clone --bare http://git.domain.cn/…...

【算法刷题指南】优先级队列

🌈个人主页: 南桥几晴秋 🌈C专栏: 南桥谈C 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据…...

使用pymupdf提取PDF文档中的文字和其颜色

最近我在捣鼓一个PDF文件,想把它里面的文字和文字颜色给提取出来。后来发现有个叫pymupdf的库能搞定这事儿。操作起来挺简单的,pymupdf的示例文档里就有现成的代码可以参考。 how-to-extract-text-with-color 我本地的测试代码如下: impor…...

贪心算法题

0简介 0.1什么是贪心算法 贪心算法是用贪婪(鼠目寸光)的角度,找到解决问题的最优解 贪心策略:(从局部最优 --> 整体最优) 1把解决问题的过程分为若干步; 2解决每一个问题时,都选择当前“看上去”最优的解法; 3“…...

Python 3 教程第33篇(MySQL - mysql-connector 驱动)

Python MySQL - mysql-connector 驱动 MySQL 是最流行的关系型数据库管理系统,如果你不熟悉 MySQL,可以阅读我们的 MySQL 教程。 本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL, mysql-connector 是 MySQL 官方提供的驱动器。…...

23种设计模式之外观模式

目录 1. 简介2. 代码2.1 SelectFoodService (选择食品)2.2 PayService (支付服务)2.3 TakeService (制作服务)2.4 OrderService (下单服务)2.5 Food (食品)2.6 TackingSystem (外观类)2.7 Test (测试类) 3. 优缺点3. 总结 1. 简介…...

GateWay使用手册

好的&#xff0c;下面是优化后的版本。为了提高可读性和规范性&#xff0c;我对内容进行了结构化、简化了部分代码&#xff0c;同时增加了注释说明&#xff0c;便于理解。 1. 引入依赖 在 pom.xml 中添加以下依赖&#xff1a; <dependencies><!-- Spring Cloud Gate…...

车载Java OTA升级崩溃率从18.7%降至0.3%:基于Delta Patch + 类隔离热修复的4步标准化流程

第一章&#xff1a;车载Java OTA升级崩溃率从18.7%降至0.3%&#xff1a;基于Delta Patch 类隔离热修复的4步标准化流程在车载嵌入式Java环境&#xff08;JVM 11&#xff0c;ART兼容层&#xff09;中&#xff0c;OTA升级引发的ClassCastException与NoClassDefFoundError曾导致高…...

【数据结构】树的定义、核心术语与关键性质全解析

在数据结构的世界里&#xff0c;树&#xff08;Tree&#xff09; 是一种极其重要的非线性结构&#xff0c;它完美模拟了自然界中树的层次关系&#xff0c;从文件系统、组织结构&#xff0c;到算法中的二叉搜索树、堆&#xff0c;再到 AI 中的决策树&#xff0c;树的身影无处不在…...

Docker 容器技术 第一节---定义、概念、安装CentOS 7 Linux系统、MobaXterm中安装docker-ce

一、Docker的定义Docker是一款开源的容器化平台&#xff0c;它能将应用及其依赖的环境、配置、库等打包成轻量可移植的容器&#xff0c;既保证了不同环境下应用运行的一致性&#xff0c;又以共享宿主机内核的方式实现了比传统虚拟机更高效的资源利用和秒级启动速度&#xff0c;…...

探索AI辅助开发新范式:让快马平台成为你的专属前端智囊

最近在做一个需要收集用户反馈的小项目&#xff0c;发现用传统的表单方式实在太死板了。正好看到InsCode(快马)平台的AI辅助开发功能&#xff0c;决定试试用AI生成一个交互式反馈墙。没想到整个过程出奇地顺利&#xff0c;这里分享一下我的实践心得。 需求分析阶段 我首先在平…...

从Solid模块到轨迹规划:一个完整机械臂SimMechanics仿真项目的保姆级拆解

从Solid模块到轨迹规划&#xff1a;一个完整机械臂SimMechanics仿真项目的保姆级拆解 机械臂仿真一直是工业自动化和机器人研究中的核心课题。不同于传统Adams等专业仿真软件&#xff0c;SimMechanics凭借其与Matlab/Simulink的无缝集成&#xff0c;为工程师提供了从建模到控制…...

MelonLoader终极指南:Unity游戏Mod加载器从入门到精通

MelonLoader终极指南&#xff1a;Unity游戏Mod加载器从入门到精通 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 还在为Unity游…...

使用seo站点管理系统需要注意哪些事项

SEO站点管理系统的核心注意事项 在当今数字化时代&#xff0c;SEO站点管理系统&#xff08;Site Management System for SEO&#xff09;是网站运营和推广的关键工具。它不仅能帮助提升网站在搜索引擎中的排名&#xff0c;还能带来更多的流量和转化。要真正利用这一工具&#x…...

MemMA:多智能体驱动的记忆自进化框架

&#x1f4cc; 一句话总结&#xff1a; 本工作提出 MemMA&#xff0c;一个通过多智能体协同与自进化机制统一优化“记忆构建-检索-利用”循环的框架&#xff0c;显著提升长程记忆推理能力。 &#x1f50d; 背景问题&#xff1a; 当前 memory-augmented LLM agent 存在两个核…...

这面镜子,照出了什么?——一次“自找麻烦“的差距分析实录

在多篇推文的评论区&#xff0c;关于实战案例的呼声一直很高。今天&#xff0c;我们就聊一聊发生在义翘神州实验室日常检测和质量管理中的案例&#xff0c;来一场“自我找茬”&#xff1a;差距分析。 在质量管理领域&#xff0c;“差距分析”这四个字耳熟能详。它就像一面镜子&…...

AI数字人开源方案:Duix.Avatar本地化部署与应用指南

AI数字人开源方案&#xff1a;Duix.Avatar本地化部署与应用指南 【免费下载链接】Duix-Avatar &#x1f680; Truly open-source AI avatar(digital human) toolkit for offline video generation and digital human cloning. 项目地址: https://gitcode.com/GitHub_Trending…...