用 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>

整合流程