用 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 打造动态前端更新的终极指南的更多相关文章

  1. Storm实战：在云上搭建大规模实时数据流处理系统（Storm+Kafka）

    在大数据时代,数据规模变得越来越大.由于数据的增长速度和非结构化的特性,常用的软硬件工具已无法在用户可容忍的时间内对数据进行采集.管理和处理.本文主要介绍如何在阿里云上使用Kafka和Storm搭建大 ...

  2. 打造高效前端工作环境 - tmux

    打造高效前端工作环境 - tmux 前言  现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gulp来做预编译,如果能把这么多个窗口放在一 ...

  3. 【jQuery Demo】jQuery打造动态下滑菜单

    作者:漫凯维奇      来源:[教程]jQuery打造动态下滑菜单 Tip:这只是一个转载,源代码可以在上面的来源博文中下载 此教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单.效果如 ...

  4. spring-boot+quartz的CRUD动态任务管理系统

    版权声明:作者: 小柒 出处: https://blog.52itstyle.com 分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大 ...

  5. SpringBoot整合MyBatisPlus配置动态数据源

    目录 SpringBoot整合MyBatisPlus配置动态数据源 SpringBoot整合MyBatisPlus配置动态数据源 推文:2018开源中国最受欢迎的中国软件MyBatis-Plus My ...

  6. SpringBoot集成Shiro 实现动态加载权限

    一.前言 本文小编将基于 SpringBoot 集成 Shiro 实现动态uri权限,由前端vue在页面配置uri,Java后端动态刷新权限,不用重启项目,以及在页面分配给用户 角色 . 按钮 .ur ...

  7. SpringBoot整合log4j2进行日志配置及防坑指南

    写在前面 最近项目经理要求将原先项目中的日志配置logBack,修改为log4j2,据说是log4j2性能更优于logback,具体快多少,网上有说快10多倍,看来还是很快的,于是新的一波挑战又开始了 ...

  8. SpringBoot 整合Shiro实现动态权限加载更新+Session共享+单点登录

    作者:Sans_ juejin.im/post/5d087d605188256de9779e64 一.说明 Shiro是一个安全框架,项目中主要用它做认证,授权,加密,以及用户的会话管理,虽然Shir ...

  9. Springboot+Mybatis+Pagehelper+Aop动态配置Oracle、Mysql数据源

      本文链接:https://blog.csdn.net/wjy511295494/article/details/78825890 Springboot+Mybatis+Pagehelper+Aop ...

  10. SpringBoot系列教程web篇之过滤器Filter使用指南

    web三大组件之一Filter,可以说是很多小伙伴学习java web时最早接触的知识点了,然而学得早不代表就用得多.基本上,如果不是让你从0到1写一个web应用(或者说即便从0到1写一个web应用) ...

随机推荐

  1. 带宽优化新思路：RoCE网卡聚合实现X2增长

    本文分享自华为云社区<2个RoCE网卡Bond聚合,实现带宽X2>,作者: tsjsdbd . 我们知道操作系统里面,可以将2个实际的物理网卡,合体形成一个"逻辑网卡" ...

  2. PostgreSQL主备库搭建

    pg主备库的搭建,首先需在2个节点安装pg软件,然后依次在2个节点配置主备. 本文采用os为CentOS7.6,pg版本使用14.2,以下为详细部署步骤. 本文两个节点的ip地址如下: [root@n ...

  3. log4j2同步日志引发的性能问题

    1 问题回顾 1.1 问题描述 在项目的性能测试中,相关的接口的随着并发数增加,接口的响应时间变长,接口吞吐不再增长,应用的CPU使用率较高. 1.2 分析思路 谁导致的CPU较高,阻塞接口TPS的增 ...

  4. 使用Postman快速复现浏览器的请求(包括生成调用代码)

    前言 大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教. 好久没有写开发类的工具使用文了,这次我来讲下 ...

  5. Mysql面试大全

    说说MySQL索引的底层数据结构 MySQL索引的底层数据结构是B+树数据结构 详细介绍一下B+树的数据结构是什么样子的 B+树有三个特性 B+树是一个平衡多叉树,与平衡二叉树的每一个节点下面最多有两 ...

  6. 一文读懂强化学习：RL全面解析与Pytorch实战

    在本篇文章中,我们全面而深入地探讨了强化学习(Reinforcement Learning)的基础概念.主流算法和实战步骤.从马尔可夫决策过程(MDP)到高级算法如PPO,文章旨在为读者提供一套全面的 ...

  7. JavaScript 语法：运算符号

    作者:WangMin 格言:努力做好自己喜欢的每一件事 JavaScript要进行各种各样的运算,就要使用不同的运算符号. JavaScript 算数运算符 算数运算符用于对数字执行算数运算,分别有以 ...

  8. Altium Designer中'=SheetNumber'和'=SheetTotal'参数无效的解决方法

    出现的问题 图纸没有被自动编号 在Altium中该显示区域被称为Title Block.[这里使用了图纸模板]. 当使用层次化的设计方式时,往往一个工程中若干幅原理图.这时我们需要为原理图进行编号. ...

  9. require()、import、import()有哪些区别？

    require().import.import()是我们常用的引入模块的三种方式,代码中几乎处处用到.如果对它们存在模糊,就会在工作过程中不断产生困惑,更无法做到对它们的使用挥洒自如.今天我们来一起捋 ...

  10. 本地MQTT协议消息服务远程连接教程介绍

    Mosquitto是一个开源的消息代理,它实现了MQTT协议版本3.1和3.1.1.它可以在不同的平台上运行,包括Windows.Linux.macOS等.mosquitto可以用于物联网.传感器.移 ...