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

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协议的单向通信协议&#xff0c;服务端可以向客户端发送数据&#xff0c;但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连&#xff0c;也支…...

Aseprite详细使用教程(7)——切片工具

1.名词解释 快捷键&#xff1a;ShiftC 切片工具功能&#xff08;了解即可&#xff09;&#xff1a; &#xff08;1&#xff09;优化资源加载: 将较大的图像切成多个较小的切片&#xff0c;可减小单个文件大小&#xff0c;在网页或游戏等场景中&#xff0c;能显著提升加载速度…...

航空公司客户价值分析

目录 1 目的 2 方法 3 源代码 4 结果 5 扩展 1 目的 ①借助航空公司客户数据&#xff0c;对客户进行分类&#xff1b; ②对不同的客户类别进行特征分析&#xff0c;比较不同类别的客户的价值&#xff1b; ③针对不同价值的客户类别制定相应的营销策略&#xff0c;为其提供个性…...

基于开源Odoo、SKF Phoenix API与IMAX-8数采网关的圆织机设备智慧运维实施方案 ——以某纺织集团圆织机设备管理场景为例

一、方案背景与需求分析 1.1 纺织行业设备管理痛点 以某华东地区大型纺织集团为例&#xff0c;其圆织机设备管理面临以下挑战&#xff1a; 非计划停机损失高&#xff1a;圆织机主轴轴承故障频发&#xff0c;2024年单次停机损失达12万元&#xff08;停机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 &#xff0c;修改端口&#xff0c;指定启动时的端口 二、给krpano添加div展示信息 和场景一起转动&#xff0c;不是layer&#xff0c;layer是固定的&#xff0c;没啥用。 主要是onloaded里面的1个方法。 <action name…...

Jenkins 给任务分配 节点(Node)、设置工作空间目录

Jenkins 给任务分配 节点(Node)、设置工作空间目录 创建 Freestyle project 类型 任务 任务配置 Node 打开任务-> Configure-> General 勾选 Restrict where this project can be run Label Expression 填写一个 Node 的 Label&#xff0c;输入有效的 Label名字&#x…...

深入解析iOS视频录制(二):自定义UI的实现

深入解析 iOS 视频录制&#xff08;一&#xff09;&#xff1a;录制管理核心MWRecordingController 类的设计与实现 深入解析iOS视频录制&#xff08;二&#xff09;&#xff1a;自定义UI的实现​​​​​​​ 深入解析 iOS 视频录制&#xff08;三&#xff09;&#xff1a;完…...

跳表的C语言实现

跳表&#xff08;Skip List&#xff09;是一种基于链表的动态数据结构&#xff0c;用于实现高效的查找、插入和删除操作。它通过引入多级索引来加速查找过程&#xff0c;类似于多级索引的有序链表。跳表的平均时间复杂度为 O(logn)&#xff0c;在某些场景下可以替代平衡树。 以…...

Java Web开发实战与项目——Spring Security与权限管理实现

Web应用中&#xff0c;权限管理是系统安全的核心部分&#xff0c;确保用户只能访问他们被授权的资源。Spring Security是Spring框架中的一个安全框架&#xff0c;它提供了强大的认证和授权功能&#xff0c;用于实现用户认证和权限控制。本章节将详细讲解如何使用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&#xff0c;我将以qwen作为实验例子 3. 在vscode上的扩展商店下载continue 4. 下载完成后&#xff0c;依次点击添加模型 5. 在这里可以添加&#xff0c;各种各样的模型&#xff0c;选择我们的ollama 6. 选…...

flink写入hdfs数据如何保证幂等的?

在 Flink 中使用 HDFS Connector 将数据写入 HDFS 时&#xff0c;保证幂等性是一个重要的需求&#xff0c;尤其是在数据可靠性要求较高的场景下。以下是详细介绍如何通过 Flink 和 HDFS 的特性以及一些设计上的优化来实现幂等性。 一、Flink 的 Checkpoint 机制 Flink 的 Chec…...

newgrp docker需要每次刷新问题

每次都需要运行 newgrp docker 的原因: 当用户被添加到 docker 组后&#xff0c;当前会话并不会立即更新组信息&#xff0c;因此需要通过 newgrp docker 切换到新的用户组以使权限生效 如果不想每次都手动运行 newgrp docker&#xff0c;可以在终端中配置一个自动刷新的脚本。…...

LM_Funny-2-01 递推算法:从数学基础到跨学科应用

目录 第一章 递推算法的数学本质 1.1 形式化定义与公理化体系 定理1.1 (完备性条件) 1.2 高阶递推的特征分析 案例&#xff1a;Gauss同余递推4 第二章 工程实现优化技术 2.1 内存压缩的革新方法 滚动窗口策略 分块存储技术 2.2 异构计算加速方案 GPU并行递推 量子计…...

WDM_OTN_基础知识_波分站点与组网类型

为了便于理解&#xff0c;我们用高铁来打个比方&#xff0c;这是郑州与武汉的高铁&#xff0c;中间经过了许昌孝感等很多个站点&#xff0c;郑州武汉作为始发站和终点站&#xff0c;所有人员都是上车或下车&#xff0c;而许昌等中间站点&#xff0c;既有人员上下车&#xff0c;…...

机器视觉--索贝尔滤波

引言 在图像处理领域&#xff0c;边缘检测是一项至关重要的任务&#xff0c;它能够帮助我们识别图像中不同区域的边界&#xff0c;为后续的目标识别、图像分割等操作奠定基础。索贝尔滤波&#xff08;Sobel Filter&#xff09;作为一种经典的边缘检测算法&#xff0c;因其简单…...

网络分析仪E5071C的回波损耗测量

回波损耗&#xff08;Return Loss&#xff09;是评估射频/微波元件&#xff08;如滤波器、天线、电缆等&#xff09;信号反射特性的关键参数&#xff0c;反映端口阻抗匹配性能。E5071C矢量网络分析仪&#xff08;VNA&#xff09;通过以下步骤实现高精度回波损耗测量&#xff1a…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...