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);
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/62893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《嵌入式硬件设计》

一、引言 嵌入式系统在现代科技中占据着至关重要的地位,广泛应用于消费电子、工业控制、汽车电子、医疗设备等众多领域。嵌入式硬件设计作为嵌入式系统开发的基础,直接决定了系统的性能、可靠性和成本。本文将深入探讨嵌入式硬件设计的各个方面&#xff…

FreeSWITCH mod_conference 的按键会控

又是一篇命题作文 mod_conference 官方文档: https://developer.signalwire.com/freeswitch/FreeSWITCH-Explained/Modules/mod_conference_3965534/ 英文不好的可以看中文: http://www.freeswitch.org.cn/books/references/1.7-mod_conference.html…

Linux67 绑定网卡【bonding和team】

Linux 网卡绑定在RHEL 7 之前,网卡绑定常用的是bonding模块,在RHEL7开始,支持使用team作网卡绑定,但在RHEL7中,bonding依然可用。以下主要介绍bonding模块配置双网卡绑定。Linux网卡绑定模式介绍模式简介0 for balance…

服务器与普通电脑有什么区别?

服务器和普通电脑(通常指的是个人计算机,即PC)有众多相似之处,主要构成包含:CPU,内存,芯片,I/O总线设备,电源,机箱及操作系统软件等,鉴于使用要求…

hhdb数据库介绍(10-33)

管理 数据归档 归档记录查询 功能入口:“管理->数据归档->归档记录查询” 需要确保配置的归档用户对数据归档规则所在的逻辑库具备CREATE权限,以及对原数据表具有所有权限。 清理归档数据 (一)功能入口:“…

重学设计模式-工厂模式(简单工厂模式,工厂方法模式,抽象工厂模式)

在平常的学习和工作中,我们创建对象一般会直接用new,但是很多时候直接new会存在一些问题,而且直接new会让我们的代码变得非常繁杂,这时候就会巧妙的用到设计模式,平常我们通过力扣学习的算法可能并不会在我们工作中用到…

微服务springboot详细解析(一)

目录 1.Spring概述 2.什么是SpringBoot? 3.第一个SpringBoot程序 4.配置参数优先级 5.springboot自动装配原理 6.SpringBootApplication&SpringApplication.run 7.ConfigurationProperties(prefix "") 8.Validated数据校验 29、聊聊该如何写一…

华为HarmonyOS 让应用快速拥有账号能力 -- 2 获取用户头像昵称

场景介绍 如应用需要完善用户头像昵称信息,可使用Account Kit提供的头像昵称授权能力,用户允许应用获取头像昵称后,可快速完成个人信息填写。以下只针对Account kit提供的头像昵称授权能力进行介绍,若要获取头像还可通过场景化控…

供应链系统设计-何为“前”“中”“后”台系统

概述 大家看文章或交流的时候,经常听到听到XX前台系统、XX中台系统、XX后台系统。而且经常容易混淆并且系统边界定义模糊不清,今天就和大家讨论一下什么是前台、中台和后台系统。 不知道大家对于“康威定律”是否熟悉。在这里简单的给大家介绍一下&…

vue中使用socket.io统计在线用户

目录 一、引入相关模块 二、store/modules 中封装socketio 三、后端代码(nodejs) 一、引入相关模块 main.js 中参考以下代码 ,另外socketio的使用在查阅其它相关文章时有出入,还是尽量以官方文档为准 import VueSocketIO from vue-socket.io import SocketIO from socket.io-…

「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

本篇将带你实现一个简易日历应用,显示当前月份的日期,并支持选择特定日期的功能。用户可以通过点击日期高亮选中,还可以切换上下月份,体验动态界面的交互效果。 关键词 UI互动应用简易日历动态界面状态管理用户交互 一、功能说明…

【AI系统】推理系统介绍

推理系统介绍 推理系统是一个专门用于部署神经网络模型,执行推理预测任务的 AI 系统。它类似于传统的 Web 服务或移动端应用系统,但专注于 AI 模型的部署与运行。通过推理系统,可以将神经网络模型部署到云端或者边缘端,并服务和处…

Docker 之 bootfs 和 rootfs概述

概述 在 Docker 技术中,理解 bootfs(boot file system)和 rootfs(root file system)的概念对于深入掌握容器技术至关重要。这两个文件系统是 Docker 镜像和容器运行的基础。 bootfs(Boot File System&am…

困扰解决:mfc140u.dll丢失的解决方法,多种有效解决方法全解析

当电脑提示“mfc140u.dll丢失”时,这可能会导致某些程序无法正常运行,给用户带来不便。不过,有多种方法可以尝试解决这个问题。这篇文章将以“mfc140u.dll丢失的解决方法”为主题,教大家有效解决mfc140u.dll丢失。 判断是否是“mf…

M4V 视频是一种什么格式?如何把 M4V 转为 MP4 格式?

M4V 是一种视频文件格式,主要由苹果公司用于其产品和服务中,如 iTunes Store 上的电影和电视节目。这种格式可以包含受版权保护的内容,并且通常与苹果的 DRM(数字版权管理)技术结合使用,以限制内容的复制和…

VS打开UI文件失败

选择一个UI文件,右键打开方式,要自己添加路径 然后选择自己的QT Creator路径 可以参考我的去找一下:"C:\Qt\Qt5.14.2\Tools\QtCreator\bin\qtcreator.exe"

docker 运行my-redis命令

CREATE TABLE orders ( order_id bigint NOT NULL COMMENT "订单ID", dt date NOT NULL COMMENT "日期", merchant_id int NOT NULL COMMENT "商家ID", user_id int NOT NULL COMMENT "用户ID", good_id int NOT NULL COMMENT "商…

网络编程(UDP\TCP回显服务器)

目录 套接字socket TCP和UDP特点比较 特点 比较 UDP回显服务器/客户端的编写 UDP的socket api 回显服务器 客户端 TCP回显服务器/客户端的编写 TCP的socket api 回显服务器 客户端 优化服务器 1.关闭服务器创建的socket对象 2.引入线程池,为多个客户…

leetcode 之 二分查找(java)(3)

文章目录 5. 81. 搜索旋转排序数组 II6. 378、有序矩阵中第k个小的元素 5. 81. 搜索旋转排序数组 II 题目描述: 已知存在一个按非降序排列的整数数组 nums ,数组中的值不必互不相同。 在传递给函数之前,nums 在预先未知的某个下标 k&#…

(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验三----学校选址与路径规划(超超超详细!!!)

目录 实验三 学校选址与道路规划 3.1 实验内容及目的 3.1.1 实验内容 3.1.2 实验目的 3.2 实验方案 3.3 操作流程 3.3.1 环境设置 3.3.2 地势分析 (1)提取坡度: (2)重分类: 3.3.3 学校点分析 (1)欧氏距离: (2)重分类: 3.3.4 娱乐场所点分析 (1)欧氏距离…