放弃Websocket,使用 SSE 仅用几行代码就能搞定这些功能!

SSE与Websocket详解,SSE实现对话框流式输出 WebSocket它允许服务器和客户端之间进行实时的双向通信,即服务器可以主动向客户端发送数据,客户端也可以随时向服务器发送数据。Server-Sent Events(SSE)是一种基于 HTTP 的轻量级协议,允许服务器主动向客户端推送数据。它主要用于实现**单向实时通信**(服务器到客户端),适合需要服务器持续推送数据的场景(如实时通知、股票行情、流式文本输出等)。 阅读详情

👉 这是一个或许对你有用的社群

🐱 一对一交流/面试小册/简历优化/求职解惑,欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料: 

fe46571e8a968824198e9028e6a35ce7.gif

👉这是一个或许对你有用的开源项目

国产 Star 破 10w+ 的开源项目,前端包括管理后台 + 微信小程序,后端支持单体和微服务架构。

功能涵盖 RBAC 权限、SaaS 多租户、数据权限、商城、支付、工作流、大屏报表、微信公众号、ERP、CRM、AI 大模型等等功能:

  • Boot 仓库:https://gitee.com/zhijiantianya/ruoyi-vue-pro

  • Cloud 仓库:https://gitee.com/zhijiantianya/yudao-cloud

  • 视频教程:https://doc.iocoder.cn

【国内首批】支持 JDK 21 + SpringBoot 3.2.2、JDK 8 + Spring Boot 2.7.18 双版本 

来源:juejin.cn/post/
7410798727622311946

3e4c8c6ac068f23a80bc88f78dd529f6.jpeg


一、简介

在实际项目开发中,实时通讯是常见的需求。我们通常使用 WebSocket 来实现这一功能,但在很多场景下,客户端只是需要从服务器接收消息,而非进行双向通讯。这导致 WebSocket 的全双工特性并没有得到充分的利用。那么,是否有更简单的替代方案呢?

本文将介绍 Server-Sent Events (SSE) ,一种轻量级的方式来实现服务器向客户端推送消息的需求,同时对比 SSE、WebSocket 和传统轮询技术的优劣,帮助开发者选择适合的实时通讯方案。

SSE、轮询、WebSocket 详细对比表:
特性SSE (Server-Sent Events)轮询 (Polling)WebSocket
通讯方向单向:服务器向客户端推送数据单向:客户端定时请求服务器获取数据双向:客户端与服务器双向通讯
连接类型长连接:使用 HTTP/1.1 或 HTTP/2 长连接短连接:每次请求都是独立的 HTTP 请求长连接:通过 TCP 建立的持久连接
传输协议HTTP/1.1 或 HTTP/2HTTPTCP(通过 WebSocket 协议升级)
浏览器支持广泛支持(HTML5 原生支持)全面支持,所有浏览器均支持广泛支持(需通过 WebSocket API 实现)
消息发送频率服务器可随时推送数据客户端主动定时请求,频率取决于客户端设置实时、即时双向发送
服务器开销较低:只需保持一个长连接高:每次请求都需要重新建立 HTTP 连接较高:需保持 TCP 连接,管理心跳包
客户端开销低:只需处理服务器推送的数据高:每次请求都会产生额外的资源消耗中等:需保持与服务器的连接
传输数据格式纯文本、JSON 等纯文本、JSON 等任意格式(二进制、文本等)
连接恢复机制自动恢复:连接中断时,客户端会自动重新连接无自动恢复,需客户端重新发起请求需开发者自行实现重连机制
适用场景适合实时数据推送、通知、监控等单向通讯场景适用于低频率、对实时性要求不高的场景适合即时通讯、协作应用等双向通讯场景
复杂度简单:实现轻量且代码量少简单:代码量少,但性能较差复杂:需处理更多逻辑,如握手、心跳等
实时性高:服务器可立即推送消息低:依赖客户端的请求频率高:双向即时通讯
防火墙/代理兼容性高:使用标准 HTTP 协议,通常无额外配置需求高:使用标准 HTTP 协议可能较低:需配置防火墙或代理来允许 TCP 连接
带宽消耗较低:保持长连接,但只在有数据时传输较高:每次轮询都会消耗资源和带宽较低:保持长连接,数据按需传输

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

  • 项目地址:https://github.com/YunaiV/ruoyi-vue-pro

  • 视频教程:https://doc.iocoder.cn/video/

二、聊聊为什么放弃了Websocket,我只需要写一两行代码

当我们考虑 WebSocket 时,虽然它是双向通信的强大工具,但在某些场景下确实显得过于“重型”,尤其是你只需要服务器单向推送数据,而不是用户发送信息回来。

以下是 WebSocket 在你的身份证识别场景中不太实用的几点原因,顺便还顺带了 SSE 的优势:

  • 权限验证不便 : WebSocket 通常需要手动处理,通过在 WebSocket 握手时传递 token 等

  • 日志记录复杂

  • SSE 集成简单 : SSE 不需要额外引入依赖

  • 连接管理复杂 : Websocket 需要额外编写断线重连等代码

  • 定时任务执行不方便 : Websocket需要额外编写定时发送消息代码

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

  • 项目地址:https://github.com/YunaiV/yudao-cloud

  • 视频教程:https://doc.iocoder.cn/video/

三、编写一个统计在线用户的SSE接口 ,看看前端给我的效果

1. 配置自己的 AsyncTaskExecutor

如果不配置 AsyncTaskExecutor,不建议在生产环境下使用,SpringBoot会给出您警告的

@Configuration
@Slf4j
public class WebMvcConfig implements WebMvcConfigurer {

    // 定义自定义的 AsyncTaskExecutor Bean
    @Bean(name = "customAsyncTaskExecutor")
    public AsyncTaskExecutor customAsyncTaskExecutor() {
        ThreadPoolTaskExecutor executor = new ThreadPoolTaskExecutor();
        int corePoolSize = Runtime.getRuntime().availableProcessors(); // 核心线程数设置为 CPU 核心数
        int maxPoolSize = corePoolSize * 2; // 最大线程数设置为核心数的两倍
        int queueCapacity = 500; // 队列容量

        executor.setCorePoolSize(corePoolSize);
        executor.setMaxPoolSize(maxPoolSize);
        executor.setQueueCapacity(queueCapacity);
        executor.setThreadNamePrefix("AsyncExecutor-");
        executor.setWaitForTasksToCompleteOnShutdown(true); // 关闭时等待任务完成
        executor.setAwaitTerminationSeconds(60); // 关闭时最多等待 60 秒

        executor.initialize(); // 初始化线程池

        return executor;
    }

    @Override
    public void configureAsyncSupport(AsyncSupportConfigurer configurer) {
        configurer.setTaskExecutor(customAsyncTaskExecutor()); // 使用自定义的 AsyncTaskExecutor
        configurer.setDefaultTimeout(5000); // 设置异步请求的默认超时时间(毫秒)
    }
}
2. 编写具体代码
@PreventDuplicateSubmit
@PreAuthorize("@permission.checker('monitor:online-user:list')")
@GetMapping(value = "/user-activity-sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<Integer> streamUserActivitySSE() {
    // 创建一个持续时间为指定秒数的 Flux 流
    return Flux.interval(Duration.ofSeconds(5))
            .flatMap(sequence -> Mono
                    .fromCallable(onlineUserService::getUserActivityNum) // 返回在线用户人数
                    .onErrorReturn(0)
            );
}
3. 看看前端效果
b3fee6271b277e1cf5b4c6853d0359c5.gif

四、聊聊之前开发中应该使用SSE却使用了轮询的事

在两年前,我XX叫我对接一下身份证识别仪器,如图(类似这样,实际不是这样) :

d1a7992ad3617d40ed91a890c2d7f199.png

因为这个机器是 C++ 编写的,我们后端是Java所以需要集成一下,但是这个机器是需要你一直调用接口去扫描的,他不会主动告诉你身份证识别了没有。

当时我们是当用户进入对应需要身份证认证的页面的时候,开始进行身份证检测,但是不知道用户多久会把身份证放到机器上,领导这个功能又催的很急。然后在我对接了这个机器之后,我偷偷和前端说,我们摸摸鱼轮询解决就行,前端也是直接开写,最后我们10分钟就搞定了。

在这里 sorry 领导,如果你那时候不催我的话,我可以告诉你使用SSE解决。

五、源码 & 结束语

Websocket 和 SSE 有各自的应用场景,不存在谁好谁坏,有些问题用轮询也能解决,其他有很多地方都可以使用SSE编写的地方,比如消息通知等

前端文章地址:

https://juejin.cn/post/7410965438044012582

后端源码地址:

https://gitee.com/fateyifei/yf/blob/master/yf-boot-admin/yf-admin/src/main/java/com/yf/controller/monitor/OnlineUserController.java


欢迎加入我的知识星球,全面提升技术能力。

👉 加入方式,“长按”或“扫描”下方二维码噢:

7a2f3dd23432d75c57d0d0a61bc99884.png

星球的内容包括:项目实战、面试招聘、源码解析、学习路线。

caebe52a1b79c71fd26c2bf50b587c92.png

e0f543659407b8257325249d5e874c5d.pngf92c6243d64cf14e3cba1587bab2c86e.png342c0d37810aa626f4c9db66ea6b8bdd.png231bca4f1eb19aebd5cd58e9249623e2.png

文章有帮助的话,在看,转发吧。
谢谢支持哟 (*^__^*)
SSE 和 Websocket 的比较 本文详细解析了SSE和WebSocket这两种实现实时通信的技术。SSE是一种基于HTTP的单向通信机制,适用于实时更新数据的应用场景。WebSocket是一种全双工通信协议,支持双向通信,适用于实时互动的应用场景。它们在通信模型、连接性、实时性、浏览器支持和API复杂性等方面存在一些区别。选择SSE还是WebSocket取决于您的应用需求。如果您只需要服务器向客户端推送数据,并且实时性要求不高,SSE是一个简单可行的选择。 阅读详情

相关推荐

【Nginx】【SSE】【WebSocket】Nginx配置SSE,WebSocket的转发请求

【Nginx】将普通 HTTP 请求、SSE 请求和 WebSocket 请求分别转发到对应的后端服务。为 SSE 和 WebSocket 提供必要的配置,确保连接的稳定性和实时性。在实际部署中,可以根据服务需求进一步调整参数,例如路径规则、超时时间和认证机制。

qq_59344127的博客 2771

分布式场景下springboot使用sse + redission实现站内信实时广播 + 前端请求头携带token思路

分布式场景下springboot使用sse + redission实现站内信实时广播

weixin_44123956的博客 2666

SpringBoot使用SSE推送消息

序言   服务器推送技术在一些需要实时数据的开发场景会被广泛使用,要获得实时数据,前端轮询的方式明显是被摒弃的,大部分人第一时间想到的就是websocket。之前的一个项目也是用的websocket,但是后期造成了会话缓存不断变大的问题,花了很多时间来解决。因此我就想着找一个替代websocket,简单好用的技术,因此便发现了SSE。以下记录学习SSE踩的坑,尤其看了很多博客和教学视频,带来的SSE就是一直轮询的疑惑。 如果对websocket有兴趣,参考博客:SpringBoot2.0集成WebSocke

南风知我意,吹梦到西洲 5688

RuoYi-Vue-Plus SSE推送:实时消息通知机制

在现代Web应用中,实时消息推送已成为提升用户体验的关键技术。RuoYi-Vue-Plus基于Server-Sent Events(SSE)技术构建了一套完整的实时消息通知机制,为多租户后台管理系统提供了高效、可靠的实时通信能力。 SSE(Server-Sent Events)是一种基于HTTP的服务器推送技术,允许服务器主动向客户端发送事件流数据。相比WebSocket,SSE具有以下优势: ...

gitblog_00169的博客 1711

交流伺服电机绝对式位置控制实战指南

伺服电机控制是工业自动化的核心技术之一,其核心原理是通过闭环反馈实现精确位置控制。绝对值编码器作为关键传感器,能提供单圈内的绝对位置信息,避免了增量式编码器的累计误差问题。在工程实践中,电子齿轮比配置、位置环PID调节等技术直接影响系统动态性能。本文以包装机械为典型场景,详细解析了从硬件选型到参数整定的全流程实现方案,特别是针对单圈绝对值编码器初始化和限位保护等易错环节,给出了经过验证的解决方案。通过合理设置17位编码器的电子齿轮比和优化运动控制算法,最终实现了±0.05°的高精度定位。

weixin_42531588的博客 282

uni踩坑笔记 - 离线打包调起微信分享后从微信返回APP时黑屏

apk能成功调起微信并进行分享操作,但分享完成后点击回到应用后应用出现黑屏的情况,并在约3-5秒后自动重启。

weixin_46737742的博客 5215

RuoYi-Cloud-Plus SSE推送:实时消息方案

在现代企业级应用中,实时消息推送已成为提升用户体验的关键技术。传统的轮询(Polling)方式不仅浪费服务器资源,还会造成消息延迟。RuoYi-Cloud-Plus 基于 Server-Sent Events(SSE)技术,构建了一套高效、可靠的实时消息推送方案,为微服务架构下的实时通信提供了完美解决方案。 通过本文,您将深入了解: - SSE 技术原理与优势对比 - RuoYi-Cloud-...

gitblog_00875的博客 610

《揭秘 BME688人工智能压力湿度温度气体传感器:气体检测的多面能手》:此文为AI自动生成

BME688 是博世推出的一款具有人工智能和集成高线性度高精度压力、湿度、温度传感器的气体传感器,专为移动和联网应用开发,尺寸紧凑且低功耗。BME688 作为一款先进的传感器,在多个领域展现出卓越的性能。它采用了坚固而紧凑的 3.0 x 3.0 x 0.9 mm³ 封装,这种小巧的尺寸使其能够轻松应用于对空间要求严格的移动设备和联网应用中。同时,低功耗的特性也使得它在能源有限的环境下能够长时间稳定运行。

zheng_ruiguo的专栏 1939

Java的Spring Cloud生态中实现SSE(Server-Sent Events)服务端实践

本文介绍了在Spring Boot中实现服务器发送事件(SSE)的三种方法:1)使用@RestController返回SseEmitter对象;2)原生Servlet异步处理;3)集中式管理多个客户端连接。核心要点包括遵循SSE数据格式规范(以data:开头,\n\n结尾)、异步处理机制、超时与重连控制。文章对比了SSE与WebSocket的特性差异,建议SSE适用于服务端单向推送场景,并提供了客户端监听示例、跨域配置方案以及性能优化建议。最后针对常见问题给出排查方向,如数据格式验证、连接稳定性处理和高并发

jakeswang的博客 1593

QGIS基于快鸟(QuickBird)影像统计小麦种植面积

​01数据情况 本次选用某地4月份快鸟(QuickBird)影像为例,使用QGIS演示提取小麦播种情况,并按照200米*200米分区计算种植面积的过程。 注:本文对应的操作视频作为今天第二篇推送同时发布,习惯看视频的朋友可以点击观看。 附数据压缩包: 链接:https://pan.baidu.com/s/1JVUS8uAOR61RxC1n9Or9_w 提取码:qgis 含快鸟影像QB_subset.tif和200*200米分区矢量图层200Mgrid.shp。 ...

QGISClass的博客 1981

【FPGA】Robei EDA 的使用(7)—— Robei文件上板试验

#沐朝露兮以自华,觅大道兮以求成 我又滚过来了,研究了20多天RISCV,结果最后因为硬件问题导致无法在比赛中使用RISCV CPU,虽然已经临近比赛后期了,非常的崩溃,但是也没有什么办法。唉,一切不过是从头再来罢了。(写写博客舒缓我心中苦闷) ————————————————进入正文的分割线———————————————— 今天介绍一下如何利用 Robei EDA 生成文件,导入vivado中,综合下载到开发板里。拿我一个PWM控制舵机的代码为例。 Robei EDA设置 假设代码模块(model文件)经

Ninquelote的博客 2565

RuoYi开发框架与第三方认证系统集成起来的简单方法

若依框架现在很火,很多团队与个人都使用它。不过很多时候,我们的组织或公司都已经构建了自己的认证系统,这个时候如何把我们的若依开发的系统和我们的认证系统集成在一起呢。这篇文章就给出全过程保姆式的方法演示.

dongluyang2007的博客 5483

【GlobalMapper精品教程】001:GlobalMapper23+24+25 Pro-x64中文汉化版安装教程(附软件包下载)

Global Mapper 23+V24+V25中文汉化版安装教程及免费下载地址,是一款非常专业的地图绘制软件,功能非常的丰富,内置距离和面积计算,包括光栅混合、对比度调节、海拔高度查询、视线计算以及一些高级功能,通过地表数据观察分水岭、对3Dpoint数据转换为三角多边形和网格化等设置。本文讲解GlobalMapper23.1 Pro-x64安装过程。

智慧空间实验室 3万+

放弃 WebSocket,使用 SSE 仅用几行代码就能搞定这些功能!

Java精选面试题(微信小程序):5000+道面试题和选择题,真实面经,简历模版,包含Java基础、并发、JVM、线程、MQ系列、Redis、Spring系列、Elasticsearch、Docker、K8s、Flink、Spark、架构设计、真题等,在线刷题!一. 简介在实际项目开发中,实时通讯是常见的需求。我们通常使用 WebSocket 来实现这一功能,但在很多场景下,客户端只是需要从服务器...

Java精选 132

YOLOv9原创自研:卷积魔改 | 一种新颖的风车形卷积(PConv)融合注意力机制,加强微弱小目标检测能力

为了进一步提升小目标检测能力,风车形卷积(PConv)融合注意力机制进一步提升小目标检测能力

①答疑群聊服务;②YOLO大模型知识问答系统;③计算机视觉论文生成智能体; 365

ThingsBoard教程(十九):规则节点概览介绍

在ThingsBoard的CE V2.5.6版本中,一共有这几种类型在每一种类都有包含了多个节点,每一种类型的节点都有不同的颜色表示本篇文章做一个简单的概括,后续的文章会详细讲解每一个种类的节点如何使用,每一个节点的使用。一共有10个,使用黄色表示 过滤器节点用于消息过滤和路由。一共有9个,使用绿色 属性节点用于更新传入消息的元数据。一共三个,使用蓝色 转换节点用于更改传入消息字段,如发起者、消息类型、有效负载和元数据。一共21个,使用红色标识 动作节点根据传入的消息执行各种动作。一共9个,使用黄色表示,

知无涯 1万+

放弃Websocket,使用 SSE 仅用几行代码就能搞定这些功能

当时我们是当用户进入对应需要身份证认证的页面的时候,开始进行身份证检测,但是不知道用户多久会把身份证放到机器上,领导这个功能又催的很急。Websocket 和 SSE 有各自的应用场景,不存在谁好谁坏,有些问题用轮询也能解决,其他有很多地方都可以使用SSE编写的地方,比如消息通知等。因为这个机器是 C++ 编写的,我们后端是Java所以需要集成一下,但是这个机器是需要你一直调用接口去扫描的,他不会主动告诉你身份证识别了没有。在这里 sorry 领导,如果你那时候不催我的话,我可以告诉你使用SSE解决。

lingqu+wx bjmsb06 846

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

放弃 Websocket 使用 SSE 才发现这些功能两三行代码就搞定了

在实际项目开发中,实时通讯是常见的需求。我们通常使用 WebSocket 来实现这一功能,但在很多场景下,客户端只是需要从服务器接收消息,而非进行双向通讯。这导致 WebSocket 的全双工特性并没有得到充分的利用。那么,是否有更简单的替代方案呢?本文将介绍,一种轻量级的方式来实现服务器向客户端推送消息的需求,同时对比 SSE、WebSocket 和传统轮询技术的优劣,帮助开发者选择适合的实时通讯方案。

qq_66627105的博客 1456

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

Web 开发 —— 高阶 WebSocket 和 SSE

随着大语言模型的流行,因为使用了 SSE 或者 Websocket的技术进行流式的交换,使得 SSE 和 Websocket也火了起来,今天我们来讲解,如何在 Solon 中实现 Websocket 服务端和 SSE 服务端。与 Websocket 不同的是,SSE 是单向连接,请求的过程是不带会话连接的,所以需要自己管理好会话。此处只是做简单的鉴权,和消息的回复,如果要实现完整的 IM 服务,还需要做会话的管理的逻辑。我们这里通过一个简易的 im 的服务做为例子。在主类开启 Websocket。

发强-CrazyAirhead的专栏 2227

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

实现实时Web应用,使用AJAX轮询、WebSocket、还是SSE呢??

文章目录短轮询(Short Polling)长轮询(Long Polling)Comet “服务器推” (这玩意现在用的很少了,了解一下即可)WebSocket原理:方法:事件:SSE原理事件总结 在日常的开发中,我们经常能碰见服务端需要主动推送给客户端数据的业务场景,比如数据大屏的实时数据、新闻数据、消息中心的未读消息,聊天功能、股票走势、天气情况等等。 我们的方案大概就是轮询、WebSocket、SSE 短轮询(Short Polling) 客户端定期(例如每几秒)发送AJAX请求到服务器。服务器立

Hassan的小博客! 1851

为什么大模型网站使用 SSE 而不是 WebSocket?

在大模型网站(如 ChatGPT、Claude、Gemini 等)中,前端通常使用来与后端对接,而不是。这是因为 SSE 更适合类似流式文本生成的场景。下面我们详细对比。

写完这行代码打球去的博客 3185
上一篇: 告别空指针,Optional的最佳使用姿势!
下一篇: 用了 6 年的Spring Boot 项目部署方案!打包 + Shell 脚本部署详解,稳的一批!
公众号-芋道源码
博客等级 码龄10年 1636粉丝 377原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值