SSE:用于流式传输的协议
一.什么是SSE
SSE协议是一种基于http协议的单向通信协议,服务端可以向客户端发送数据,但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连,也支持自定义响应事件。比如ChatGpt使用的通信方式就是SSE协议,相比于websocket通信这是一个更为轻量级的通信方式,使用方法简单。但是在浏览器原生的EventSource不支持设置请求头,需要借助第三方包去实现,同时也需要后端设置接口的响应头Content-Type:text/event-stream
二.SSE和WebSocket的区别
WebSocket API
WebSocket是基于TCP协议的一种用于应用层的网络协议,它实现了浏览器与服务器之间的全双工通信,它允许服务器主动发信息给客户端。所以,浏览器和服务器只需要完成一次握手就可以建立持久性的连接,并且能够实现双向数据传输。
特点:
1.传输的数据格式可以是文本也可以是二进制形式
2.不受同源策略的限制,可以与任意服务端进行通信
3.兼容HTTP协议,默认端口同样是80(ws)和443(ws)
4.客户端和服务端通信时开销较少,与HTTP协议不同,不需要每次都携带完整的头部信息
5.若在通信过程中连接中断,需要自己实现断线重连
区别:
1.sse协议仅支持服务端向客户端发送数据,而websocket支持双向通信,服务端和客户端之间可以互相通信
2.sse是一种轻量级的通信协议,而websocket整体的一些方法事件较为复杂
3.sse支持断线重连机制,而websocket需要自己实现断线重连
4.sse是基于HTTP协议的通信协议,而websocket是基于TCP协议的网络层通信协议
三.前端使用SSE
<h1>fetchSSE Demo</h1><button onclick="connectFetch()">建立 fetchSSE 连接</button><button onclick="closeSSE()">断开 fetchSSE 连接</button><br /><br /><div id="message"></div><script>const messageElement = document.getElementById('message')let controller = null// 建立 FETCH-SSE 连接const connectFetch = () => {controller = new AbortController()fetchEventSource('http://127.0.0.1:3001/fetch-sse', {method: 'POST',body: JSON.stringify({content: 'xxx'}),signal: controller.signal,onopen: () => {messageElement.innerHTML += `FETCH 连接成功<br />`},onclose: () => {messageElement.innerHTML += `FETCH 连接关闭<br />`},onmessage: (event) => {const data = JSON.parse(event)messageElement.innerHTML += `${data.id} --- ${data.time} --- body参数:${JSON.stringify(data.body)}` + '<br />'},onerror: (e) => {console.log(e)}})}// 断开 FETCH-SSE 连接const closeSSE = () => {if (controller) {controller.abort()controller = undefinedmessageElement.innerHTML += `FETCH 连接关闭<br />`}}const fetchEventSource = (url, options) => {fetch(url, options).then(response => {if (response.status === 200) {options.onopen && options.onopen()return response.body}}).then(rb => {const reader = rb.getReader()const push = () => {// done 为数据流是否接收完成,boolean// value 为返回数据,Uint8Arrayreturn reader.read().then(({ done, value }) => {if (done) {options.onclose && options.onclose()return}options.onmessage && options.onmessage(new TextDecoder().decode(value))// 持续读取流信息return push()})}// 开始读取流信息return push()}).catch((e) => {options.error && options.error(e)})}
相关文章:
SSE:用于流式传输的协议
一.什么是SSE SSE协议是一种基于http协议的单向通信协议,服务端可以向客户端发送数据,但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连,也支…...
Aseprite详细使用教程(7)——切片工具
1.名词解释 快捷键:ShiftC 切片工具功能(了解即可): (1)优化资源加载: 将较大的图像切成多个较小的切片,可减小单个文件大小,在网页或游戏等场景中,能显著提升加载速度…...
航空公司客户价值分析
目录 1 目的 2 方法 3 源代码 4 结果 5 扩展 1 目的 ①借助航空公司客户数据,对客户进行分类; ②对不同的客户类别进行特征分析,比较不同类别的客户的价值; ③针对不同价值的客户类别制定相应的营销策略,为其提供个性…...
基于开源Odoo、SKF Phoenix API与IMAX-8数采网关的圆织机设备智慧运维实施方案 ——以某纺织集团圆织机设备管理场景为例
一、方案背景与需求分析 1.1 纺织行业设备管理痛点 以某华东地区大型纺织集团为例,其圆织机设备管理面临以下挑战: 非计划停机损失高:圆织机主轴轴承故障频发,2024年单次停机损失达12万元(停机8小时导致订单延误&am…...
LLM 架构
LLM 分类 : 自编码模型 (encoder) : 代表模型 : BERT自回归模型 (decoder) : 代表模型 : GPT序列到序列模型 (encoder-decoder) : 代表模型 : T5 自编码模型 (AutoEncoder model , AE) 代表模型 : BERT (Bidirectional Encoder Representation from Transformers)特点 : Enc…...
Word Embeddings
Count-based Approach Term-document matrix: Document vectors Two ways to extract information from the matrix: Column-wise: a document is represented by a |V|-dim vector (V: vocabulary) Widely used in information retrieval: find similar documents 查找類似…...
相机开发调中广角和焦距有什么不一样
在相机中,调整广角和调整焦距是两个不同的概念,它们的作用和实现方式也不同。以下是两者的详细对比和解释: 1. 调整广角 定义 广角是指相机的视野范围(Field of View, FOV)。调整广角实际上是调整相机的视野范围。更广的视野意味着可以捕捉到更多的场景内容(更宽的画面)…...
krpano学习笔记,端口修改,krpano二次开发文档,krpano三维div信息展示,krpano热点显示文字
一、修改krpano端口 .\tour_testingserver -port8085 ,修改端口,指定启动时的端口 二、给krpano添加div展示信息 和场景一起转动,不是layer,layer是固定的,没啥用。 主要是onloaded里面的1个方法。 <action name…...
Jenkins 给任务分配 节点(Node)、设置工作空间目录
Jenkins 给任务分配 节点(Node)、设置工作空间目录 创建 Freestyle project 类型 任务 任务配置 Node 打开任务-> Configure-> General 勾选 Restrict where this project can be run Label Expression 填写一个 Node 的 Label,输入有效的 Label名字&#x…...
深入解析iOS视频录制(二):自定义UI的实现
深入解析 iOS 视频录制(一):录制管理核心MWRecordingController 类的设计与实现 深入解析iOS视频录制(二):自定义UI的实现 深入解析 iOS 视频录制(三):完…...
跳表的C语言实现
跳表(Skip List)是一种基于链表的动态数据结构,用于实现高效的查找、插入和删除操作。它通过引入多级索引来加速查找过程,类似于多级索引的有序链表。跳表的平均时间复杂度为 O(logn),在某些场景下可以替代平衡树。 以…...
Java Web开发实战与项目——Spring Security与权限管理实现
Web应用中,权限管理是系统安全的核心部分,确保用户只能访问他们被授权的资源。Spring Security是Spring框架中的一个安全框架,它提供了强大的认证和授权功能,用于实现用户认证和权限控制。本章节将详细讲解如何使用Spring Securit…...
单元测试方法的使用
import java.util.Date; import org.junit.Test; /** java中的JUnit单元测试* * 步骤:* 1.选中当前项目工程 --》 右键:build path --》 add libraries --》 JUnit 4 --》 下一步* 2.创建一个Java类进行单元测试。* 此时的Java类要求:①此类是公共的 ②此类提供一个公共的无参…...
VScode内接入deepseek包过程(本地部署版包会)
目录 1. 首先得有vscode软件 2. 在我们的电脑本地已经部署了ollama,我将以qwen作为实验例子 3. 在vscode上的扩展商店下载continue 4. 下载完成后,依次点击添加模型 5. 在这里可以添加,各种各样的模型,选择我们的ollama 6. 选…...
flink写入hdfs数据如何保证幂等的?
在 Flink 中使用 HDFS Connector 将数据写入 HDFS 时,保证幂等性是一个重要的需求,尤其是在数据可靠性要求较高的场景下。以下是详细介绍如何通过 Flink 和 HDFS 的特性以及一些设计上的优化来实现幂等性。 一、Flink 的 Checkpoint 机制 Flink 的 Chec…...
newgrp docker需要每次刷新问题
每次都需要运行 newgrp docker 的原因: 当用户被添加到 docker 组后,当前会话并不会立即更新组信息,因此需要通过 newgrp docker 切换到新的用户组以使权限生效 如果不想每次都手动运行 newgrp docker,可以在终端中配置一个自动刷新的脚本。…...
LM_Funny-2-01 递推算法:从数学基础到跨学科应用
目录 第一章 递推算法的数学本质 1.1 形式化定义与公理化体系 定理1.1 (完备性条件) 1.2 高阶递推的特征分析 案例:Gauss同余递推4 第二章 工程实现优化技术 2.1 内存压缩的革新方法 滚动窗口策略 分块存储技术 2.2 异构计算加速方案 GPU并行递推 量子计…...
WDM_OTN_基础知识_波分站点与组网类型
为了便于理解,我们用高铁来打个比方,这是郑州与武汉的高铁,中间经过了许昌孝感等很多个站点,郑州武汉作为始发站和终点站,所有人员都是上车或下车,而许昌等中间站点,既有人员上下车,…...
机器视觉--索贝尔滤波
引言 在图像处理领域,边缘检测是一项至关重要的任务,它能够帮助我们识别图像中不同区域的边界,为后续的目标识别、图像分割等操作奠定基础。索贝尔滤波(Sobel Filter)作为一种经典的边缘检测算法,因其简单…...
网络分析仪E5071C的回波损耗测量
回波损耗(Return Loss)是评估射频/微波元件(如滤波器、天线、电缆等)信号反射特性的关键参数,反映端口阻抗匹配性能。E5071C矢量网络分析仪(VNA)通过以下步骤实现高精度回波损耗测量:…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站,会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后,网站没有变化的情况。 不熟悉siteground主机的新手,遇到这个问题,就很抓狂,明明是哪都没操作错误&#x…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装;只需暴露 19530(gRPC)与 9091(HTTP/WebUI)两个端口,即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
