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

前端通信库fetch-event-source实现丰富的SSE

news 来源：原创 2025/9/18 2:28:47

环境：SpringBoot3.4.0 + Vue3

1. 简介

SSE（Server-Sent Events）是一种基于HTTP的服务器向客户端单向推送实时数据的轻量级协议，配合浏览器原生EventSource API，可实现高效实时通信。前端通过创建EventSource对象订阅服务端流，自动处理连接、重试与数据解析；服务端设置Content-Type: text/event-stream响应头，以data:前缀发送JSON/文本数据，双换行符分隔消息。其优势在于：

协议简单，无需WebSocket复杂握手
天然支持断线重连
兼容主流浏览器
适合实时通知、股票行情等单向推送场景。后端实现需注意保持长连接（如循环发送注释保持活跃），前端需监听message事件处理数据，并通过error事件监控连接状态。相比轮询，SSE显著降低延迟与资源消耗，是Web实时应用的优选方案之一。

然而当前端通过EventSource API发起请求时有几个限制：只允许传递的参数是url和withCredentials，因此：

无法传递请求体：你必须在URL内编码执行请求所需的所有信息，而在大多数浏览器中，URL的长度是有限制的（不同浏览器可能还不一样）。
无法传递自定义请求头。
只能发起GET请求——无法指定其他方法。
如果连接中断，你无法控制重试策略：浏览器会默默地为你重试几次然后停止，这对于任何健壮的应用程序来说都远远不够。

本篇文章我们将介绍一个开源组件fetch-event-source，该组件在发起事件源请求时，同时拥有Fetch API所提供的所有功能。

接下来，我们将完整实现一个基于SSE（Server-Sent Events）与Fetch-Event-Source API结合的实时通信示例。

2. 实战案例

2.1 准备环境

@RestController@RequestMapping("/api")public class SseController {  private final Map<String, SseEmitter> emitters = new ConcurrentHashMap<>() ;    @GetMapping(path = "/sse/{username}", produces=MediaType.TEXT_EVENT_STREAM_VALUE)  public SseEmitter handler(@PathVariable String username) throws Exception {    SseEmitter sse = new SseEmitter() ;    emitters.put(username, sse) ;    sse.send(new R(0, "欢迎," + username), MediaType.APPLICATION_JSON) ;    return sse ;  }    @PostMapping(path = "/sse", produces=MediaType.TEXT_EVENT_STREAM_VALUE)  public SseEmitter handler(@RequestBody Map<String, Object> data) throws Exception {    System.err.printf("收到请求数据: %s%n", data) ;    SseEmitter sse = new SseEmitter() ;    String username = data.get("u

前端通信库fetch-event-source实现丰富的SSE

环境：SpringBoot3.4.0 + Vue3 1. 简介 SSE（Server-Sent Events）是一种基于HTTP的服务器向客户端单向推送实时数据的轻量级协议，配合浏览器原生EventSource API，可实现高效实时通信。前端通过创建EventSource对象订阅服务端流，自动处理连接、重试与数据解析；服务端设置C…...

编程日记 2025/9/18 2:28:47

JVM 中Minor GC、Major GC、Full GC 的区别？

Minor GC、Major GC 和 Full GC 是 Java 虚拟机 (JVM) 垃圾回收 (Garbage Collection) 中的不同类型的 GC 事件，它们在范围、触发条件、停顿时间等方面有所不同。 1. Minor GC (Young GC): 范围： 只针对新生代 (Young Generation) 进行垃圾回收。触发条…...

编程日记 2025/9/18 2:28:01

2747. 统计没有收到请求的服务器数目

文章目录题意思路代码题意题目链接思路代码 class Solution { public:vector<int> countServers(int n, vector<vector<int>>& logs, int x, vector<int>& queries) {sort(logs.begin(), logs.end(), [](vector<int> &a, v…...

编程日记 2025/9/18 2:22:28

设计模式：抽象工厂 - 掌控多产品族的创建之道

一、什么是抽象工厂模式？ 抽象工厂模式是一种创建型设计模式，提供一个接口，用于创建一系列相关或相互依赖的对象，而无需指定它们的具体类。核心思想 1.定义多个产品的抽象接口，统一管理具体产品和工厂的创建逻辑。…...

编程日记 2025/9/18 2:25:58

图神经网络+多模态：视频动作分割的轻量高效新解法

一、引言在智能监控、自动驾驶、人机交互等领域，准确理解视频中的动作序列至关重要。然而，传统方法依赖复杂的视觉模型，计算成本高且难以捕捉长时依赖。近期，一项名为 Semantic2Graph 的研究通过图神经网络（GNN&am…...

编程日记 2025/9/18 2:20:16

技术与情感交织的一生（五）

目录初入“江湖” 分工陌生 CraneOffice 内功宝典枪手回到大二通关小聚唱一首歌初入“江湖” 分工软件工作室是坐落在和平区宜昌道的一间民房，和我想象中的公司形象多少有些偏差。天津的道路有点凌乱，初次的时候不太好找&#xf…...

编程日记 2025/9/18 2:21:56

简单-快速-高效——模块化解析Pulid（实现不同风格下的人脸一致）

资源论文：https://arxiv.org/abs/2404.16022 github：https://github.com/ToTheBeginning/PuLID?tabreadme-ov-file comfyui插件：https://github.com/sipie800/ComfyUI-PuLID-Flux-Enhanced 讲解参考 https://zhuanlan.zhihu.com/p/69684…...

编程日记 2025/9/18 2:25:39

XYZ to xyY 求解

免责声明：本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下，作者不对因使用本文内容而导致的任何直接或间接损失承担责任，包括但不限于数据丢失、业务中断或其他经济…...

编程日记 2025/9/18 2:21:54

科技自然的协奏曲-深圳

故事背景故事发生在中国广东深圳的现代城市环境，这里呈现出未来科技与自然生态共生的独特图景。没有具体的角色，却通过多样的场景描绘，展现出未来生活的活力与创新，反映出社会创新与人类情感的紧密结合。故事内容在未来的深…...

编程日记 2025/9/18 2:25:59

idea 创建 maven-scala项目

文章目录 idea 创建 maven-scala项目1、创建普通maven项目并且配置pom.xml文件2、修改项目结构1）创建scala目录并标记成【源目录】2）导入scala环境3）测试环境 idea 创建 maven-scala项目 1、创建普通maven项目并且配置pom.xml文件 maven依赖…...

编程日记 2025/9/18 2:25:40

C++项目：高并发内存池_下

目录 8. thread cache回收内存 9. central cache回收内存 10. page cache回收内存 11. 大于256KB的内存申请和释放 11.1 申请 11.2 释放 12. 使用定长内存池脱离使用new 13. 释放对象时优化成不传对象大小 14. 多线程环境下对比malloc测试 15. 调试和复杂问题的调试技…...

编程日记 2025/9/18 2:25:59

【UE5】RTS游戏的框选功能+行军线效果实现

目录效果步骤一、项目准备二、框选NPC并移动到指定地点三、框选效果四、行军线效果效果步骤一、项目准备 1. 新建一个俯视角游戏工程 2. 新建一个pawn、玩家控制器和游戏模式，这里分别命名为“MyPawn”、“MyController”和“MyGameMode” 3. 打开“MyGam…...

编程日记 2025/9/18 2:25:39

多图超详细：Docker安装知识库AI客服RAGFlow的详细步骤、使用教程及注意事项：

RAGFlow 介绍 RAGFlow 是一款基于深度文档理解的开源检索增强生成（RAG）引擎，通过结合信息检索与生成式 AI 技术，解决复杂场景下的数据处理和可信问答问题。其核心设计目标是提供透明化、可控化的文档处理流程，并通过多…...

编程日记 2025/9/18 2:24:33

docker compose安装智能体平台N8N

使用 docker volume create n8n_data 创建了一个名为 n8n_data 的数据卷。你通过 docker run 启动容器，映射了端口 5678，并挂载了 n8n_data 数据卷。以下是对应的 docker-compose.yml 配置文件： version: "3.7"services:n8n:ima…...

编程日记 2025/9/8 20:32:25

FRP调用本地摄像头完成远程拍照

from flask import Flask, Response import cv2app Flask(__name__)# 基础文字回复 app.route(/) def hello_world():return <h1>你好啊世界</h1><img src"/camera" width"640" /># 摄像头拍照并返回图像 app.route(/camera) def captu…...

编程日记 2025/9/18 2:20:21

【Linux】39.一个基础的HTTP Web服务器

文章目录 1. 实现一个基础的HTTP Web服务器1.1 功能实现：1.2 Log.hpp-日志记录器1.3 HttpServer.hpp-网页服务器1.4 Socket.hpp-网络通信器1.5 HttpServer.cc-服务器启动器 1. 实现一个基础的HTTP Web服务器 1.1 功能实现： 总体功能： 提供We…...

编程日记 2025/9/18 2:28:47

蓝桥杯-小明的背包(动态规划-Java)

0/1背包问题介绍 0/1背包问题是经典的动态规划问题，具体描述如下： 解题思路： 输入数据首先，程序通过 Scanner 从输入中读取数据： n 表示物品的数量。 v 表示背包的最大容量。接着读取每个物品的重量和价值&#xff…...

编程日记 2025/9/16 7:15:11

（四十一）Dart 中的空安全与 `late` 关键字教程

Dart 中的空安全与 late 关键字教程空安全简介空安全（Null Safety）是 Dart 语言的一项重要特性，旨在帮助开发者避免空指针异常（NullPointerException）。空安全通过在编译时检查变量是否可能为 null，从而…...

编程日记 2025/9/15 17:33:06

GaussDB使用指南

目录 1. GaussDB 概述 1.1 GaussDB 简介 1.2 核心技术架构 1.3 适用场景与行业案例 2. GaussDB 安装与部署 2.1 环境准备与依赖检查 2.2 单机版安装（Linux） 2.3 分布式集群部署 3. GaussDB 基础操作与语法 3.1 数据库连接与用户管理 3.2 DDL …...

编程日记 2025/9/13 6:59:29

算法训练之动态规划（一）

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…...

编程日记 2025/9/18 2:25:59

dubbo配置中心

配置中心简介配置中心（config-center）在dubbo中可承担两类职责： 外部化配置：启动配置的集中式存储。流量治理规则存储。 Dubbo动态配置中心定义了两个不同层次的隔离选项，分别是namespace和group。 namespace&a…...

编程日记 2025/9/9 10:50:50

移动端六大语言速记：第11部分 - 内存管理

移动端六大语言速记：第11部分 - 内存管理本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言在内存管理方面的特性，帮助开发者理解和掌握各语言的内存管理机制。 11. 内存管理 11.1 垃圾回收机制对比各语言垃圾回收…...

编程日记 2025/9/10 18:16:39

对象的创建方式有哪些?在虚拟机中具体的创建过程是怎样的？

在Java中，对象的创建方式及其在虚拟机中的具体过程如下： 一、对象的创建方式使用 new 关键字最常见的对象创建方式，直接调用类的构造方法。 MyClass obj new MyClass();反射（Reflection） 通过 Class 或 Constructor…...

编程日记 2025/9/14 3:17:02

openwrt软路由配置3

1.启用sftp文件连接使用ssh连接openwrt时，我发现无法打开sftp windows进行上传和下载文件，提示 sftp channel closed by server: stderr:ash /usr/libexec/sftp-server:not found 原因是系统刚刚装好后，没有安装openssh-sftp-server包 opk…...

编程日记 2025/9/5 15:51:35

C语言for循环嵌套if相关题目

一、题目引入以下代码程序运行结果是多少? 二、思路解析进入一个for循环 a<100 进入第一个if b1不大于20为假进入第二个if b4 a这时a自增为2 当b4时,满足第二个if条件 1.b4,a2 当b7时,满足第二个if条件 2.bb37,a3 当b10时,满足第二个if条件 …...

编程日记 2025/9/16 5:50:39

Redis与Mysql双写一致性如何保证？

我们在面试的时候redis与mysql双写一致性是一个常考的问题，今天我们就一起探讨一下吧所谓的一致性就是数据的一致性，在分布式系统中，可以理解为多个节点中数据的值是一致的。强一致性： 这种一致性级别是最符合用户直觉的&…...

编程日记 2025/9/15 7:28:23

STM32 CRC校验与芯片ID应用全解析：从原理到实践 | 零基础入门STM32第九十七步

主题内容教学目的/扩展视频CRC与芯片ID原理实现CRC校验和读取芯片ID为单片机应用提供数据验证和身份识别的功能。师从洋桃电子，杜洋老师 📑文章目录一、CRC校验功能解析1.1 CRC基本原理1.2 核心功能对比二、CRC校验应用实战2.1 典型应用场景2.2 程序实…...

编程日记 2025/9/12 1:15:02

《微服务与事件驱动架构》读书分享

《微服务与事件驱动架构》读书分享 Building Event-Driver Microservices 英文原版由 OReilly Media, Inc. 出版，2020 作者：[加] 亚当 • 贝勒马尔译者：温正东作者简介： 这本书由亚当贝勒马尔（Adam Bellemare…...

编程日记 2025/8/17 21:45:46

⼤模型（LLMs）基础

⼤模型（LLMs）基础⽬前主流的开源模型体系有哪些？prefix Decoder 和 causal Decoder 和 Encoder-Decoder 区别是什么？⼤模型LLM的训练⽬标是什么？涌现能⼒是啥原因？为何现在的⼤模型⼤部分是Decoder o…...

编程日记 2025/9/16 22:31:13

IDEA ：物联网ThingsBoard-gateway配置，运行Python版本，连接thingsboard，接入 MQTT 设备

准备阶段（教程只针对本地操作，未涉及虚拟机环境） Thingsboard源码编译并运行没有操作过的小伙伴，可以看我上一篇文章物联网ThingsBoard源码本地编译篇，超详细教程，小白看过来！_thingsboard…...

编程日记 2025/9/16 8:09:28

面向大模型的开发框架LangChain

这篇文章会带给你如何使用 LangChain：一套在大模型能力上封装的工具框架如何用几行代码实现一个复杂的 AI 应用面向大模型的流程开发的过程抽象文章目录这篇文章会带给你写在前面LangChain 的核心组件文档（以 Python 版为例）模型 I/O 封装…...

编程日记 2025/9/12 0:48:35

每日算法：洛谷U535992 J-C 小梦的宝石收集（双指针、二分）

题目描述小梦有 n 颗能量宝石，其中第 i 颗的能量为 ai，但这些能量宝石十分不稳定，随时有可能发生崩坏，导致他们全部消失！ 小梦想要留住宝石们，不希望他们发生崩坏，同时他发现：如…...

编程日记 2025/9/16 15:52:57

写给新人的深度学习扫盲贴：ReLu和梯度

一、ReLU（Rectified Linear Unit，修正线性单元） 梯度是深度学习中最常用的激活函数之一，因其简单、高效且能有效缓解梯度消失问题而被广泛使用。 1. 数学定义函数表达式： $$ \text{ReLU}(x) \max(0, x) \begin{…...

编程日记 2025/9/10 22:56:11

Spring 框架的核心基础：IoC 和 AOP

一、IoC（Inversion of Control，控制反转） 定义： IoC（Inversion of Control，控制反转），就是把对象创建和依赖关系的管理交给 Spring 容器，而不是由程序员手动去创建对象…...

编程日记 2025/9/9 3:40:07

JavaScript逆向工程实战：如何精准定位加密参数生成位置

前言：一个令人困惑的调试案例最近在进行某网站的JavaScript逆向分析时，我遇到了一个有趣的现象：当我尝试定位一个名为m的加密参数（值为MTIwMTE3NDQxODk1NTY1NjkA这样的Base64字符串）时，调试器却带我来到了…...

编程日记 2025/9/9 4:12:02

SSM智能停车场管理系统

🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅 项目视频 SS…...

编程日记 2025/8/30 6:58:06

[定位器]晶艺LA1823,4.5V~100V, 3.5A,替换MP9487,MP9486A,启烨科技

Features  4.5V to 100V Wide Input Range  3.5A Typical Peak Current Limit  Integrated 500mΩ low resistance high side power MOS.  Constant On Time Control with Constant Switching Frequency.  180μA Low Quiescent Current  150kHz/240kHz/420kHz Swi…...

编程日记 2025/9/8 0:09:50

相关文章：