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

springboot+vue实现SSE服务器发送事件

news 来源：原创 2025/7/15 14:10:27

思路

一个基于订阅发布机制的SSE事件。客户端可以请求订阅api（携带客户端id），与服务器建立SSE链接；后续服务器需要推送消息到客户端时，再根据客户端id从已建立链接的会话中找到目标客户端，将消息推送出去。

后端

这个控制器类允许客户端订阅、接收消息和断开连接，通过 pool 存储 SseEmitter 并对其进行管理。

package com.example.q11e.controller;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;import java.io.IOException;
import java.util.Map;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;@RestController
public class SseController {// 存储已订阅的客户端的会话列表private final Map<String, SseEmitter> pool = new ConcurrentHashMap<>();// 向特定的 SseEmitter 发送消息public void publisher(String id_sid, int content) {// 根据 id_sid 从映射中获取 SseEmitterSseEmitter sseEmitter = pool.get(id_sid);if (Objects.isNull(sseEmitter)) {return;}try {sseEmitter.send(content); // 发送内容} catch (IOException e) {System.out.println("null " + e);}}// 处理客户端的订阅请求@GetMapping("/subscribe/{id}")public SseEmitter subscribe(@PathVariable("id") String id_sid) {// 根据 id_sid 从映射中获取 SseEmitterSseEmitter sseEmitter = pool.get(id_sid);if (Objects.isNull(sseEmitter)) {// 如果不存在，则创建一个新的 SseEmitter，设置超时时间为 130000 毫秒sseEmitter = new SseEmitter(130000L);// 设置发送完成事件：从映射中移除该 SseEmittersseEmitter.onCompletion(() -> pool.remove(id_sid)); // 设置超时事件：从映射中移除该 SseEmittersseEmitter.onTimeout((() -> pool.remove(id_sid))); // 将新创建的 SseEmitter 放入映射中pool.put(id_sid, sseEmitter);}// System.out.println(pool);// 返回 SseEmitter 给客户端return sseEmitter;}// 处理客户端的断开连接请求public void disconnect(String id_sid) {SseEmitter emitter = pool.remove(id_sid);if (emitter!= null) {emitter.complete();}}
}

发送消息

package com.example.q11e.service;import com.example.q11e.controller.SseController;@Service
public class BatchService {@Autowiredpublic BatchService(SseController sseController) {this.sseController = sseController;}private final SseController sseController;@Asyncpublic void batchRequests(){// uid+"_"+sid 客户端标识符，sucCount为需要发送的信息sseController.publisher(uid + "_" + sid, sucCount);sseController.disconnect(uid + "_" + sid);}
}

前端

SSE状态管理 store.ts

// sse前端
import { defineStore } from 'pinia';
import { getUserBalance } from '@/request/api.ts'export const useESStore = defineStore('EventSource', {state: () => ({uid: localStorage.getItem('uid'),balance: 1,eventSourceInstance: null as EventSource | null, // 新增状态属性currentSid: null as string | null,currentCount: 0,currentTotal: 0,connect: false}),actions: {setUid(uid:string) {this.uid = uid;},setConnect(connect: boolean) {this.connect = connect},initEventSource(sid:string) {if (this.uid) {const sseURL = import.meta.env.VITE_SSE_URLconst evtSrcInstance = new EventSource(sseURL + "/" + this.uid + "_" + sid);evtSrcInstance.onmessage = (e) => {this.setCurrentCount(e.data) //普通函数时: this-->evtSrcInstance};evtSrcInstance.onopen = () => {this.setCurrentCount(0)this.setConnect(true)};evtSrcInstance.onerror = () => {this.setConnect(false)this.setCurrentTotal(0)};this.eventSourceInstance = evtSrcInstance; // 存储实例到状态}},closeEventSource() {if (this.eventSourceInstance) {this.eventSourceInstance.close();this.eventSourceInstance = null;}}}
});

<template><span v-show="connect"><span class="sid">{{ sid }}</span><span v-for="(char, index) in ['.', '.', '.']" :key="index" class="blink-effect sid":style="{ animationDelay: `${index * 0.1}s` }">{{ char }}</span><!----count是服务器推送的内容-----><span class="process">{{ count }}/{{ total }}</span></span>
</template><script lang="ts" setup>
import { computed } from 'vue'
import { useESStore } from '@/store/store.ts'
const SSE = useESStore()
let count = computed(() => SSE.currentCount)
let total = computed(() => SSE.currentTotal)
let sid = computed(() => SSE.currentSid)
let connect = computed(() => SSE.connect)
</script><style scoped>
.process {background: red;color: white;padding: 2px 4px;
}
.sid { color: #333; }
@keyframes blink {0%, 100% {transform: translateY(0); /* 开始和结束状态位置无变化 */}50% {transform: translateY(-5px); /* 中间状态位置向上移动5px */}
}
.blink-effect {display: inline-block;animation: blink 1s infinite;
}
</style>

效果

后端执行某耗时任务时，需要实时推送进度到客户端，每完成一个阶段，就向客户端推送一个单位进度，做到客户端实时显示进度的效果。

springboot+vue实现SSE服务器发送事件

思路一个基于订阅发布机制的SSE事件。客户端可以请求订阅api（携带客户端id），与服务器建立SSE链接；后续服务器需要推送消息到客户端时，再根据客户端id从已建立链接的会话中找到目标客户端，将消息推送出去。…...

编程日记 2025/7/15 14:10:27

IDEA | SpringBoot 项目中使用 Apifox 上传接口

目录 1 安装 Apifox Helper 插件2 获取 Apifox 的 API 访问令牌3 IDEA 中设置 API 访问令牌4 IDEA 中上传接口5 常见问题5.1 如何自动设置目录名5.2 如何自动设置接口名5.3 如何更改上传位置 Apifox 官方指南： https://apifox.com/help/applications-and-p…...

编程日记 2025/7/15 13:23:42

SpringBoot基础二

扩展SpringBoot 扩展SpringBoot中的SpringMVC的默认配置 SpringBoot默认已经给我们做了很多SpringMVC的配置，哪些配置？ 1、视图解析器ViewResolver 2、静态资料的目录 3、默认首页index.html 4、图标名字和图标所在目录，favicon.ico 5、类型转…...

编程日记 2025/7/15 13:37:54

力扣第129题：求根到叶子节点数字之和 - C语言解法

力扣第129题：求根到叶子节点数字之和 - C语言解法题目描述给定一个二叉树，求根到叶子节点的数字之和。每条从根到叶子的路径都代表一个数字。例如，根到叶子路径 1->2->3 代表数字 123。返回所有路径数字之和。示例 1&#xff1…...

编程日记 2025/7/15 13:53:54

图像处理-Ch7-小波函数

个人博客！无广告观看，因为这节内容太多了，有点放不下，分了三节文章目录多分辨率展开(Multi-resolution Expansions)序列展开(Series Expansions)尺度函数(Scaling Function)例：哈尔尺度函数(Haar scaling func)多分…...

编程日记 2025/7/15 13:38:42

Unity中实现转盘抽奖效果（一）

实现思路： 旋转转盘的z轴，开始以角加速度加速到角速度最大值，结束的时候，以角加速度减速使角速度减少到0，然后转盘z轴旋转的角度就是加上每秒以角速度数值大小，为了使角度不能一直增大，对360度…...

编程日记 2025/7/15 13:51:22

小程序基础 —— 07 创建小程序项目

创建小程序项目打开微信开发者工具，左侧选择小程序，点击号即可新建项目： 在弹出的新页面，填写项目信息（后端服务选择不使用云服务，开发模式为小程序，模板选择为不使用模板）&…...

编程日记 2025/7/15 13:52:17

Apache Commons Pool ：介绍与使用

Apache Commons Pool ：介绍与使用什么是 commons-pool2？ commons-pool2 是 Apache Commons 提供的一个开源对象池实现框架。它旨在为应用程序提供通用的对象池支持，方便开发者管理资源（如数据库连接、网络连接等）复…...

编程日记 2025/7/11 19:27:17

（二）编译原生SDK以及配置交叉编译链

文章目录编译原生SDKLinuxSDK的安装第一步解压LinuxSDK第二步安装依赖软件第三步解压Buildroot的dl文件 Linux系统镜像编译、生成第一步配置编译环境第二步编译 LinuxSDK编译上面配置好的环境配置编译 LinuxSDK配置内核选项配置 Buildroot编译 Qt 库编译生成 Linux 系统镜…...

编程日记 2025/6/30 10:42:48

YK人工智能（三）——万字长文学会torch深度学习

2.1 张量本节主要内容： 张量的简介PyTorch如何创建张量PyTorch中张量的操作PyTorch中张量的广播机制 2.1.1 简介几何代数中定义的张量是基于向量和矩阵的推广，比如我们可以将标量视为零阶张量，矢量可以视为一阶张量，矩阵就是…...

编程日记 2025/7/15 13:42:08

【游戏设计原理】41 - 游戏的核心

1. 如何理解？ 这条原理主要在讲述“游戏核心”这一概念的重要性及其在游戏开发中的作用。游戏的核心是指决定游戏整体玩法和体验的核心元素，它通常是游戏的主要机制、目标或动作方式。理解这一原理时，我们可以从以下几个层面来考虑&#xff…...

编程日记 2025/7/15 13:55:57

GraalVM：云原生时代的Java虚拟机

1. 概述 GraalVM是由Oracle公司开发的一款高性能、多语言的虚拟机平台。它不仅兼容传统的JVM字节码执行，还引入了即时编译（JIT）技术的革新，以及对多种编程语言的支持。GraalVM旨在通过提供更高效的执行环境来满足云计算环境中日益…...

编程日记 2025/7/15 14:01:59

goView二开低代码平台1.0

官网文档地址：GoView 说明文档 | 低代码数据可视化开发平台简介：GoView 是一个拖拽式低代码数据可视化开发平台，通过拖拽创建数据大屏，使用Vue3框架，Ts语言和NaiveUI组件库创建的开源项目。安装步骤和地址文档里都有…...

编程日记 2025/7/15 13:14:21

【golang】go errors 处理错误追踪打印堆栈信息

目录背景使用参考背景使用原生go语言编程时，常常需要处理错误，然而golang中没有像java/python等其他语言的try-catch方式一样的方式来处理异常事件，只能通过函数返回值接收并处理错误。在实践中，由于牛马的不熟练或随意处理错…...

编程日记 2025/7/15 13:33:31

【brew安装失败】DNS 查询 raw.githubusercontent.com 返回的是 0.0.0.0

从你提供的 nslookup 输出看，DNS 查询 raw.githubusercontent.com 返回的是 0.0.0.0，这通常意味着无法解析该域名或该域名被某些 DNS 屏蔽了。这种情况通常有几个可能的原因： 可能的原因和解决方法本地 DNS 问题： 有可能是你的本…...

编程日记 2025/7/15 13:17:46

【Python系列】Python 连接 PostgreSQL 数据库并查询数据

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/2 16:44:15

深度学习利用Kaggle和Colab免费GPU资源训练

这两个平台，我先用的Colab，在修改完无数bug，成功训练完一个epoch后，超时了，查阅了官网资料，之后应该还可以用，但这个限制是动态的，你可能第二天就可以用，也没准下个月。遂…...

编程日记 2025/7/12 4:35:04

WebAssembly 学习笔记

WASM 概述 wasm最初是为了在浏览器获得接近原生的性能体验。支持将其他语言实现的程序编译到wasm字节码，引入到浏览器由JS交互调用。后又有了脱离JS的wasm运行时，可以直接运行wasm。从而促成了wasm跨平台分发的能力。但由于运行时的安全沙箱限制&a…...

编程日记 2025/7/12 18:44:55

二、github基础

Github基础备用github.com网站一、用户界面-Overview（概览）1用户信息2 导航栏3 热门仓库4 贡献设置5贡献活动6搜索和筛选7自定义收藏8贡献统计9最近活动10其他链接二、用户界面-Repositories（仓库）1 libusb_stm322 savedata3 Fi…...

编程日记 2025/7/13 21:18:24

「下载」智慧文旅运营综合平台解决方案：整体架构，核心功能设计

智慧文旅运营综合平台，旨在通过集成大数据、云计算、物联网、人工智能等先进技术，为景区、旅游企业及相关管理机构提供一站式的智慧化运营服务。智慧文旅运营综合平台不仅能够提升游客的游览体验，还能帮助景区管理者实现资源的优化配置和业务…...

编程日记 2025/6/28 15:04:37

《探寻真正开源的大模型：开启AI创新新纪元》

《探寻真正开源的大模型：开启AI创新新纪元》一、开源大模型崛起：AI 发展的新曙光二、开源大模型的 “庐山真面目”三、明星开源大模型闪耀登场（一）LLaMA 3：实力强劲的开源先锋（二）Phi-3&#x…...

编程日记 2025/6/27 18:37:09

麒麟信安云在长沙某银行的应用入选“云建设与应用领航计划（2024）”，打造湖湘金融云化升级优质范本

12月26日，2024云计算产业和标准应用大会在北京成功召开。大会汇集政产学研用各方专家学者，共同探讨云计算产业发展方向和未来机遇，展示云计算标准化工作重要成果。会上，云建设与应用领航计划（2024）建云用…...

编程日记 2025/7/9 10:53:34

C#如何操作数据库

C#如何操作数据库前言1、查询操作2、增删改操作3、需要返回id主键的sql语句执行前言本文主要交代如何通过引用 using MySql.Data.MySqlClient;来操作数据库需要导入.dll文件例如：在本地Mysql下载目录下->Connecter NET 8.0->Assemblies->net5.0->…...

编程日记 2025/7/8 16:48:14

c++领域展开第八幕——类和对象（下篇初始化列表、类型转换、static成员）超详细！！！！

文章目录前言一、初始化列表二、类型转换三、static成员总结前言上篇博客我们实现了一个简单的日期类，基本的类和对象是清楚了今天我们再来学习后面的一些类和对象的语法，慢慢的完善所学的东西 fellow me 一、初始化列表 • 之前我们实现构造函数时…...

编程日记 2025/7/13 5:50:46

termux-boot安卓开机自动启动应用

termux安装 github 蓝奏云 v119.1 termux-boot安装 github 蓝奏云 v0.8.1 安装给权限运行加锁后台 am启动应用命令 am start -n 包名/启动项获取包名和启动入口（图中app为爱玩机工具箱） 例简黑时钟蓝奏云包名com.hm.jhclock 桌面启动项com.hm.jh…...

编程日记 2025/7/11 5:17:42

Echart实现3D饼图示例

在可视化项目中，很多地方会遇见图表；echart是最常见的；这个示例就是用Echart， echart-gl实现3D饼图效果，复制即可用 //需要安装，再引用依赖import * as echarts from "echarts"; import echar…...

编程日记 2025/7/14 9:11:18

【JAVA】神经网络的基本结构和前向传播算法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默， 忍不住分享一下给大家。点击跳转到网站学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……） 2、学会Oracle数据库入门到入土用法(创作中……） 3、手把…...

编程日记 2025/7/14 23:30:12

设计模式-抽象工厂模式

在设计模式中，抽象工厂模式（Abstract Factory Pattern）是一个非常常见且重要的模式，它属于创建型模式，用于提供创建一组相关或相互依赖对象的接口，而无需指定具体类。它的核心思想是将“创建对象”这一功能…...

编程日记 2025/7/8 1:28:22

webpack

前言在现代前端开发的浪潮中，Webpack 已经成为一个不可或缺的构建工具。它不仅能够帮助我们打包 JavaScript 代码，还能够处理各种资源（如 CSS、图片、字体等），并提供一系列优化手段，极大地提升开发效率和…...

编程日记 2025/7/14 17:16:11

BLIP论文笔记

论文地址 BLIP: Bootstrapping Language-Image Pre-training for Unified Vision-Language Understanding and Generation 论文思想其实Clip就相当于只用了ITC...

编程日记 2025/7/2 21:50:53

Java List 集合详解：基础用法、常见实现类与高频面试题解析

正文在 Java 集合框架中，List 是一个非常重要的接口，广泛用于存储有序的元素集合。本文将带你深入了解 List 接口的基本用法、常见实现类及其扩展，同时通过实际代码示例帮助你快速掌握这些知识。 👉点击获取2024Java学习资料 1…...

编程日记 2025/7/14 4:24:26

HTML5 SSE

HTML5 SSE（Server-Sent Events，服务器发送事件）是一种允许服务器实时向浏览器推送数据的技术。它是HTML5规范的一部分，主要通过HTTP协议实现。SSE的主要特点包括： 单向通信：与WebSocket不同，SSE…...

编程日记 2025/7/10 1:37:11

SpringBoot篇（监控）

目录学习前言一、什么是监控？ 二、监控的意义 1. 简介 2. 总结 3. 思考三、可视化监控平台 1. 简介 2. 实操 2.1. 服务端开发 2.2. 客户端开发配置多个客户端 2.3. 总结 2.4. 思考四、监控原理 1. 简介 2. 总结五、自定义监控指标 1. 简介…...

编程日记 2025/7/14 11:24:04

python23-常用的第三方库01：request模块-爬虫

requests 模块是 Python 中的一个第三方库，用于发送 HTTP 请求。它提供了一个简单且直观的 API，使得发送网络请求和解析响应变得非常容易。requests 模块支持各种 HTTP 方法，如 GET、POST、PUT、DELETE 等，并且具有处理 cookies…...

编程日记 2025/7/15 1:36:35

【pytorch】现代卷积神经网络

文章目录 1 AlexNet2 VGG3 NiN4 GoogLeNet5 批量规范化batch normalization6 ResNet6.1 残差块6.2 resnet 7 DenseNet7.1 稠密块体7.2 过渡层7.3 DenseNet模型 1 AlexNet AlexNet由八层组成：五个卷积层、两个全连接隐藏层和一个全连接输出层。 AlexNet使用ReLU而不…...

编程日记 2025/7/14 23:06:54

Excel 身份证号计算年龄

1. 设置身份证号列格式复制身份证列值到记事本或其他地方重新设置身份证号列单元格格式为“文本”将复制出去的身份证号重新复制粘贴回来 2. 年龄列单元格中添加公式 DATEDIF(DATE(LEFT(MID(A2, 7, 8), 4), MID(MID(A2, 7, 8), 5, 2), RIGHT(MID(A2, 7, 8), 2)), TODAY(), …...

编程日记 2025/7/14 7:28:19

【ArcGIS Pro】完整的nc文件整理表格模型构建流程及工具练习数据分享

学术科研啥的要用到很多数据，nc文件融合了时间空间数据是科研重要文件。之前分享过怎样将nc文件处理成栅格后整理成表格。小编的读者还是有跑不通整个流程的，再来做一篇总结篇，也分享下练习数据跟工具，如果还是弄不了的&#xff0…...

编程日记 2025/7/14 9:34:07

WebRTC的线程模型

WebRTC中的线程类： Thread类： （1）Thread类中的数据： class Thread {// 消息队列：MessageList messages_; // 消息队列，所有需要线程处理的消息，都要先入队PriorityQueue delayed_m…...

编程日记 2025/7/14 6:32:28

活动预告 | Microsoft Power Platform 在线技术公开课：实现业务流程自动化

课程介绍参加“Microsoft Power Platform 在线技术公开课：实现业务流程自动化”活动，了解如何更高效地开展业务。参加我们举办的本次免费培训活动，了解如何借助 Microsoft AI Builder 和 Power Automate 优化工作流。结合使用这些工具可以帮…...

编程日记 2025/7/14 1:19:51

Docker安装（Docker Engine安装）

一、Docker Engine和Desktop区别 Docker Engine 核心组件：Docker Engine是Docker的核心运行时引擎，负责构建、运行和管理容器。它包括守护进程（dockerd）、API和命令行工具客户端（docker）。适用环境&#…...

编程日记 2025/7/15 11:43:33

Spring自动化创建脚本-解放繁琐的初始化配置！！！（自动化SSM整合）

一、实现功能(原创，转载请告知) 1.自动配置pom配置文件 2.自动识别数据库及数据表，创建Entity、Dao、Service、Controller等 3.自动创建database.properties、mybatis-config.xml等数据库文件 4.自动创建spring-dao.xml spring-mvc.xml …...

编程日记 2025/7/15 13:18:48

Llama系列关键知识总结

系列文章目录第一章：LoRA微调系列笔记第二章：Llama系列关键知识总结第三章：LLaVA模型讲解与总结文章目录系列文章目录Llama: Open and Efficient Foundation Language Models关键要点LLaMa模型架构：Llama2分组查询注意力 (G…...

编程日记 2025/7/13 4:55:45

分布式系统架构6：链路追踪

这是小卷对分布式系统架构学习的第6篇文章，关于链路追踪，之前写过traceId的相关内容：https://juejin.cn/post/7135611432808218661，不过之前写的太浅了，且不成系统，只是简单的理解，今天来捋一下…...

编程日记 2025/7/12 21:01:26

flink cdc使用flink sql方式运行一直报Make sure a planner module is on the classpath

flink cdc使用flink sql方式运行一直报Make sure a planner module is on the classpath 引入jar包信息： flink-connector-oracle-cdc:3.2.1 flink:1.20.0 flink-table-runtime:1.20.0 flink-streaming-java:1.20.0 flink-clients:1.20.0 Exception in thread &q…...

编程日记 2025/7/8 21:06:06

Vue.js组件开发-怎样将style私有化

Vue.js组件开发中，将style私有可以通过使用<style scoped>来实现的。scoped属性会告诉Vue为这个组件的CSS样式添加一个数据属性，从而确保这些样式只应用于该组件的元素，而不会影响到其他组件或全局样式。示例： 展示如何使…...

编程日记 2025/7/9 20:42:30

第十届“挑战杯”大学生课外学术科技作品竞赛解析及资料

“挑战杯”被誉为大学生科技创新创业的“奥林匹克”盛会，它汇聚了来自各个学科、各个年级的精英人才。在这里，同学们带着对未知的好奇和对知识的渴望，组成一个个团队，向难题发起挑战。现在，第十届“挑战杯”大学生课外…...

编程日记 2025/7/14 10:04:40

从0入门自主空中机器人-2-1【无人机硬件框架】

关于本课程： 本次课程是一套面向对自主空中机器人感兴趣的学生、爱好者、相关从业人员的免费课程，包含了从硬件组装、机载电脑环境设置、代码部署、实机实验等全套详细流程，带你从0开始，组装属于自己的自主无人机，并让…...

编程日记 2025/7/13 11:19:39

跟着逻辑先生学习FPGA-实战篇第一课 6-1 LED灯闪烁实验

硬件平台：征战Pro开发板软件平台：Vivado2018.3 仿真软件：Modelsim10.6d 文本编译器：Notepad 征战Pro开发板资料链接:https://pan.baidu.com/s/1AIcnaGBpNLgFT8GG1yC-cA?pwdx3u8 提取码:x3u8 1 知识背景 LED，又名…...

编程日记 2025/7/15 11:27:24

【文献精读笔记】Explainability for Large Language Models: A Survey （大语言模型的可解释性综述）（四）

****非斜体正文为原文献内容（也包含笔者的补充），灰色块中是对文章细节的进一步详细解释！ 四、提示范式（Explanation for Prompting Paradigm） 随着语言模型规模的扩大，基于提示（prom…...

编程日记 2025/7/13 9:09:17

分布式算法（五）：初识ZAB协议

文章目录一、什么是Zookeeper二、ZAB与Zookeeper的关系为什么Zookeeper不直接使用Paxos 三、ZAB简介1.名词解释提案（Proposal）事务（Transaction）原子广播（Atomic Broadcast） 2.集群角色领导者（…...

编程日记 2025/7/10 21:08:13

思路

后端

前端

效果

相关文章：