sse fetch-event-source插件的使用

news2024/9/27 7:26:34

sse简单介绍icon-default.png?t=N7T8https://blog.csdn.net/weixin_42400404/article/details/141895877?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22141895877%22%2C%22source%22%3A%22weixin_42400404%22%7D

fetch-event-source gitHub地址

通信流程

fetch-event-source server 通信流程
fetch-event-source server 通信流程

1.安装

pnpm install @microsoft/fetch-event-source

该软件包支持Fetch-api中的所有功能

2.vue单文件使用

import { fetchEventSource } from '@microsoft/fetch-event-source';
​
await fetchEventSource('/api/sse', {
    onmessage(ev) {
        console.log(ev.data);
        // 把接口返回的json文件转换一下
    }
});

3.参数

你可以传入默认fetch API公开的所有其他参数

const ctrl = new AbortController();
fetchEventSource('/api/sse', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        foo: 'bar'
    }),
    signal: ctrl.signal,
});

4.兼容性

这个库是用 typescript 编写的,针对所有常用浏览器(Chrome、Firefox、Safari、Edge)支持的 ES2017 功能。不过,您可能需要为旧版 Edge(版本 <79)填充 TextDecoder :

require('fast-text-encoding');

仅供参考

参考文件:

  • 阮一峰:Server-Sent Events 教程

  • fetch-event-source gitHub地址

  • window:fetch()方法

  • EventSource() api

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

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

相关文章

快速构建 AI 应用的利器:Python 库 Mesop

在当今这个 AI 技术飞速发展的时代&#xff0c;开发者们总是希望能够更快、更便捷地构建 AI 应用程序。今天&#xff0c;我要给大家介绍一个由 Google 推出的 Python 库——Mesop。它的出现&#xff0c;让我们能够轻松地搭建高效的 AI 应用。 Mesop 是什么&#xff1f; Mesop …

C#如何使用外部别名Extern alias

说到 extern 关键字&#xff0c;只是很简单告诉大家用来做区分两个不同 dll 有相同的命名空间和类&#xff0c;可以使用这个关键字。 在遇到了存在两个 dll 都有相同的命名空间&#xff0c;而且有相同的类的时候&#xff0c;如何同时使用这两个 dll 的类。 这里有两个库 Jall…

4.4SQL注入之布尔盲注

SQL注入之布尔盲注1.什么是布尔盲注&#xff1f; Web的页面的仅仅会返回True和False。那么布尔盲注就是进行SQL注入之后然后根据页面返回的True或者是False来得到数据库中的相关信息。 返回False时&#xff1a; 返回True时&#xff1a; 2.如何进行布尔盲注&#xff1f; 注入…

把空格对应的表头拼接起来

某Excel表格有表头&#xff0c;部分数据格为空。 ABCDEF1stat Astat Bstat Cstat Dstat Estat F2113XX4XXXX56XXX7XXXX8XX 要求处理每行&#xff0c;把空数据格对应的表头用斜线拼起来。 H1Summary2stat B/stat C/stat E/stat F/3stat C/stat D/stat F/4stat B/stat E/5stat…

冒泡排序及qsort函数

文章目录 前言一、冒泡排序二、qsort函数 前言 冒泡排序是一种简单的排序算法&#xff0c;它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。遍历数列的工作是重复进行的&#xff0c;直到没有再需要交换的元素&#xff…

软考证书补贴动不动就好几万,真的能领到吗?

取得软考证书在许多地区都有补贴政策&#xff0c;从几千至二十几万元不等。有些考生会好奇这些补贴是真的能领到吗&#xff0c;为此&#xff0c;小希搜集了一些例子证明是可以领到的&#xff0c;供大家参考。 1、奖励名单里的软考证书 在一些地区公示的奖励名单里&#xff0c;…

SpringBoot使用入门

springboot基础 1. 项目创建(1) idea自动创建(2) 手动创建①创建普通maven项目② 引入springboot依赖 2. 配置文件使用(1) 配置文件格式(2) 配置文件书写(3) 值的获取 3. bean的管理(1) bean的扫描(2) bean的注册Bean注解Import注解 自定义组合注解减少配置类注解(3) 条件注册b…

vue3-scroll-seamless 大屏无缝滚动

npm install vue3-scroll-seamless --save //或者 yarn add vue3-scroll-seamless页面中引入 <template><div class"safety_item"><SoftwareHead title"高危及以上组件漏洞TOP10"></SoftwareHead><div class"table"…

python学习12:对txt/text类型的文件进行读写

1.对txt类型的文件进行读写 1&#xff09;对text文件的操作 打开文件-读/写文件-关闭文件 1.1)打开文件 open() 1.2)读/写文件 读: read(),readline(),rendlines() 写:write() 1.3)关闭文件 close() # 案例1:(读):moder # filename test004.txt # 同一个文件夹 filename rD:…

Unity之获取Avpro视频画面并在本地创建缩略图

一、效果 功能需求&#xff1a;获取StreamingAssets文件夹下的所有视频&#xff08;包含其子文件夹&#xff09;&#xff0c;获取指定时间的视频画面&#xff0c;然后将图片保存到本地磁盘中。 二、关于Avpro的事件监听 当指定视频时间进度时会触发FinishedSeeking&#xff0c…

[论文笔记]RAFT: Adapting Language Model to Domain Specific RAG

引言 今天带来一篇结合RAG和微调的论文&#xff1a;RAFT: Adapting Language Model to Domain Specific RAG。 为了简单&#xff0c;下文中以翻译的口吻记录&#xff0c;比如替换"作者"为"我们"。 本文介绍了检索增强微调(Retrieval Augmented Fine Tunin…

CNN-LSTM用于时间序列预测,发二区5分+没问题!

为了进一步提高时序预测的性能&#xff0c;研究者们组合了CNN和LSTM的特点&#xff0c;提出了CNN-LSTM混合架构。 这种架构因为独特的结构设计&#xff0c;能同时处理时空数据、提取丰富的特征、并有效解决过拟合问题&#xff0c;实现对时间序列数据的高效、准确预测&#xff…

跨平台RTSP播放器之VLC Media Player还是SmartPlayer?

好多开发者纠结&#xff0c;RTSP流播放&#xff0c;到底是用开源的VLC Media Player还是大牛直播SDK的SmartPlayer&#xff1f;针对此&#xff0c;本文做个简单的技术探讨&#xff0c;方便开发者根据实际需要&#xff0c;做适合自己场景的选择&#xff1a; VLC Media Player …

oracle 数据库 day0823

ok了家人们&#xff0c;今天学习了orcle的基本用法&#xff0c;一日不见&#xff0c;如隔三秋啊&#xff0c; 一.多表联合查询 和之前学习的MySQL数据库一样的用法&#xff0c; 1.1 笛卡尔积查询 SELECT * FROM A表,B表 查询员工表和部门表 select * from emp e, dept d; e…

虚拟系统VS

定义 虚拟系统VS&#xff08;Virtual System&#xff09;是指将一台物理设备PS&#xff08;Physical System&#xff09;虚拟成多个相互隔离的逻辑系统。每个VS独立工作&#xff0c;在业务功能上等同于一台独立的传统物理设备&#xff0c;如图2-1所示。 目的 随着网络规模的不…

PNAS亮点文章!浙江大学/东北林业大学/深圳华大生命科学研究院等联合揭示大熊猫种群演化历史,提出物种保护新见解!

本文首发于“生态学者”微信公众号&#xff01;作者投稿系列 全新世以来&#xff0c;尤其是工业革命以来&#xff0c;资源的过度开发利用和环境污染等人类活动&#xff0c;导致野生动物栖息地严重破碎化&#xff0c;甚至丧失&#xff0c;形成了大量隔离小种群&#xff0c;致使…

TESSY导入导出测试用例

TESSY支持测试用例的导入和导出&#xff0c;下面我们以tessy5.1为例&#xff0c;给大家展示。 1、导入测试用例 因为导入测试用例&#xff0c;需要先创建测试集&#xff0c;这部分不熟悉的&#xff0c;可以参考一下&#xff1a; https://blog.csdn.net/u012568663/article/det…

网络编程(学习)2024.8.30

目录 IO多路复用 select、poll、epoll IO多路复用机制 一.select 1.函数 2.流程 3.案例使用select创建全双工客户端 4.并发服务器 5.案例使用select创建全双工服务端 二.poll 1.函数 2.流程 3.案例使用poll创建全双工客户端 4.案例使用poll创建全双工服务端 三、…

国产统信UOS桌面操作系统安装网络打印机

国产统信UOS桌面操作系统安装网络打印机比较麻烦&#xff0c;本文件记录了一些打印机的安装方法。 厂商机型驱动方式打印情况柯尼卡美能达KONICA MINOLTA bizhub c360i加装驱动正常惠普HP Color LaserJet Pro MFP M479fdw默认驱动正常东芝TOSHIBA e-STUDIO2020AC CSHM14177加装…

九、制作卡牌预制体

文章目录 制作预制体Physic 2D Raycaster 射线检测 Physic 2D Raycaster 一、制作预制体 使用两个空物体作为父子级&#xff0c;分别挂UI 设置图层front、从上到下为1-6 父物体挂在一个Sorting组件&#xff0c;因为卡牌可以制作成为一个整体&#xff0c; 所以在父物体上挂载…