实时数据流无忧：用 SpringBoot 和 SSE 打造动态前端更新的终极指南
用 SpringBoot 和 SSE 打造动态前端更新的终极指南
你知道什么是开发者的梦魇吗？慢！慢！慢！在一个需要实时数据更新的应用中，如果数据像乌龟一样慢吞吞地爬行，那用户体验就会像坐过山车一样直线下降。所以今天，我们要化身为数据传输的超级英雄，用 SpringBoot 和 SSE（服务器发送事件）打造一个超酷、超快、而且超实时的数据流！
为什么选择 SSE？
在开始我们的冒险之前，先让我们来谈谈为什么要选择 SSE（服务器发送事件）。简单来说，SSE 就像是那个总是知道你需要什么并且在你还没说之前就把它送到你面前的超级服务员。它允许服务器主动将信息“推送”到客户端，而不是等待客户端来“询问”。想象一下，你正在看一场激动人心的球赛直播，而不是每五秒刷新一次页面，SSE 可以帮你实时看到每一个进球。是不是很酷？
创建控制器
好的，现在让我们开始编写一些代码。首先，我们需要创建一个 SpringBoot 控制器。这个控制器就像是魔法世界的大门，让所有神奇的事情开始发生。
@RestController
@RequestMapping("/user")
public class UserController {
private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();
@Autowired
private UserMapper userMapper;
@GetMapping(value = "/get",produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter getAllUsers(){
SseEmitter emitter = new SseEmitter();
this.emitters.add(emitter);
emitter.onCompletion(() -> this.emitters.remove(emitter));
emitter.onError((e) -> this.emitters.remove(emitter));
emitter.onTimeout(() -> this.emitters.remove(emitter));
return emitter;
}
@GetMapping("/add")
public void addUser(){
User user = new User();
LocalDateTime now = LocalDateTime.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
user.setUsername(formatter.format(now));
user.setPassword(UUID.randomUUID().toString());
userMapper.addUser(user);
sendToClients();
}
我这里做的是从数据库查询数据实时推送到前端，你也可以换成任何你喜欢的方式，在下面的方法中
发送数据
现在，是时候学习一些发送数据的魔法咒语了。每当后端有新的数据更新时，我们就可以调用 sendToClients 方法，让这些数据像小精灵一样飞到每个客户端。
public void sendToClients() {
List<User> users = userMapper.getUsers();
for (SseEmitter emitter : emitters) {
try {
emitter.send(users);
} catch (IOException e) {
emitter.completeWithError(e);
}
}
}
前端实现
接下来，在前端的世界里，我们需要打开一个魔法视窗来接收这些数据。这个魔法视窗就是 JavaScript 的 EventSource。
<!DOCTYPE html>
<html>
<head>
<title>SSE Example</title>
</head>
<body>
<div id="sse-data"></div>
<script>
const sseData = document.getElementById("sse-data");
const eventSource = new EventSource("/user/get");
eventSource.onmessage = (event) => {
sseData.innerHTML = event.data;
};
eventSource.onerror = (error) => {
console.error("SSE Error:", error);
};
</script>
</body>
</html>
整合流程
最后，让我们把这一切魔法整合在一起。启动你的 SpringBoot 应用，打开你的前端页面，你就会看到数据像水一样流畅地在你眼前流淌。不再是冰冷的静态页面，你的应用现在生动、活泼，充满了魔法的力量！
实时数据流无忧：用 SpringBoot 和 SSE 打造动态前端更新的终极指南的更多相关文章
- Storm实战：在云上搭建大规模实时数据流处理系统（Storm+Kafka）
在大数据时代,数据规模变得越来越大.由于数据的增长速度和非结构化的特性,常用的软硬件工具已无法在用户可容忍的时间内对数据进行采集.管理和处理.本文主要介绍如何在阿里云上使用Kafka和Storm搭建大 ...
- 打造高效前端工作环境 - tmux
打造高效前端工作环境 - tmux 前言 现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gulp来做预编译,如果能把这么多个窗口放在一 ...
- 【jQuery Demo】jQuery打造动态下滑菜单
作者:漫凯维奇 来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...
- spring-boot+quartz的CRUD动态任务管理系统
版权声明:作者: 小柒 出处: https://blog.52itstyle.com 分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大 ...
- SpringBoot整合MyBatisPlus配置动态数据源
目录 SpringBoot整合MyBatisPlus配置动态数据源 SpringBoot整合MyBatisPlus配置动态数据源 推文:2018开源中国最受欢迎的中国软件MyBatis-Plus My ...
- SpringBoot集成Shiro 实现动态加载权限
一.前言 本文小编将基于 SpringBoot 集成 Shiro 实现动态uri权限,由前端vue在页面配置uri,Java后端动态刷新权限,不用重启项目,以及在页面分配给用户 角色 . 按钮 .ur ...
- SpringBoot整合log4j2进行日志配置及防坑指南
写在前面 最近项目经理要求将原先项目中的日志配置logBack,修改为log4j2,据说是log4j2性能更优于logback,具体快多少,网上有说快10多倍,看来还是很快的,于是新的一波挑战又开始了 ...
- SpringBoot 整合Shiro实现动态权限加载更新+Session共享+单点登录
作者:Sans_ juejin.im/post/5d087d605188256de9779e64 一.说明 Shiro是一个安全框架,项目中主要用它做认证,授权,加密,以及用户的会话管理,虽然Shir ...
- Springboot+Mybatis+Pagehelper+Aop动态配置Oracle、Mysql数据源
本文链接:https://blog.csdn.net/wjy511295494/article/details/78825890 Springboot+Mybatis+Pagehelper+Aop ...
- SpringBoot系列教程web篇之过滤器Filter使用指南
web三大组件之一Filter,可以说是很多小伙伴学习java web时最早接触的知识点了,然而学得早不代表就用得多.基本上,如果不是让你从0到1写一个web应用(或者说即便从0到1写一个web应用) ...
随机推荐
- linux日常维护(二)
linux启动流程 BIOS自检 启动GRUB 2 加载内核 执行systemd进程 初始化系统环境 执行/bin/login程序 (一)BIOS自检 加电POST自检(对硬件进行检测) 进行本地设备 ...
- Speex详解（2019年09月25日更新）
Speex详解 整理者:赤勇玄心行天道 QQ号:280604597 微信号:qq280604597 QQ群:511046632 博客:www.cnblogs.com/gaoyaguo 大家有什么不明白 ...
- 如何为你的WSL2更换最新的6.5.7kernel
1.如果你像我一样,喜欢折腾你的 WSL2 ,这里是安装内核 6.X 的方法. 2.这是一个坏主意,可能会导致系统不稳定.数据损坏和其他问题.也可能会没事的,但不要怪我. Arch linux的wsl ...
- 手把手教你在项目中引入Excel报表组件
摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 GrapeCity Documents for Excel(以下 ...
- Spring扩展接口（4）：InstantiationAwareBeanPostProcessor
在此系列文章中,我总结了Spring几乎所有的扩展接口,以及各个扩展点的使用场景.并整理出一个bean在spring中从被加载到最终初始化的所有可扩展点的顺序调用图.这样,我们也可以看到bean是如何 ...
- mybatis plus很好，但是我被它坑了！
作者今天在开发一个后台发送消息的功能时,由于需要给多个用户发送消息,于是使用了 mybatis plus 提供的 saveBatch() 方法,在测试环境测试通过上预发布后,测试反应发送消息接口很慢得 ...
- 聊聊如何在Java应用中发送短信
很多业务场景里,我们都需要发送短信,比如登陆验证码.告警.营销通知.节日祝福等等. 这篇文章,我们聊聊 Java 应用中如何优雅的发送短信. 1 客户端/服务端两种模式 Java 应用中发送短信通常需 ...
- Welcome to YARP - 5.压缩、缓存
目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...
- 告别繁琐，ModelArts一键解决车牌号识别难题
本文分享自华为云社区<基于ModelArts实现车辆车牌号的目标识别>,作者:屿山岛 . 前言 车辆车牌是车辆的唯一身份标识,能够提供车辆的类型.颜色.归属地等信息,对于交通管理.安全监控 ...
- 发现AI自我意识：不期而遇的局部技术奇点
Q*的启示 之前的文章里提到过,人工智能思维能力创造的必不可少的条件是状态空间的搜索.今天的大新闻里,我们都看到了Q*的确使用了搜索算法.所以今天我会稍微谈一下这个话题. 主要思想就是人工智能的进一步 ...