用 SpringBoot 和 SSE 打造動態前端更新的終極指南 你知道什麼是開發者的夢魘嗎？慢！慢！慢！在一個需要實時數據更新的應用中，如果數據像烏龜一樣慢吞吞地爬行，那用戶體驗就會像坐過山車一樣直線下降。所以今天，我們要化身為數據傳輸的超級英雄，用 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 應用，打開你的前端頁面，你就會看到數據像水一樣流暢地在你眼前流淌。不再是冰冷的靜態頁面，你的應用現在生動、活潑，充滿了魔法的力量！
