用 SpringBoot 和 SSE 打造動態(tài)前端更新的終極指南
你知道什么是開發(fā)者的夢魘嗎？慢！慢！慢！在一個需要實時數據更新的應用中，如果數據像烏龜一樣慢吞吞地爬行，那用戶體驗就會像坐過山車一樣直線下降。所以今天，我們要化身為數據傳輸的超級英雄，用 SpringBoot 和 SSE（服務器發(fā)送事件）打造一個超酷、超快、而且超實時的數據流！為什么選擇 SSE？
在開始我們的冒險之前，先讓我們來談談為什么要選擇 SSE（服務器發(fā)送事件）。簡單來說，SSE 就像是那個總是知道你需要什么并且在你還沒說之前就把它送到你面前的超級服務員。它允許服務器主動將信息“推送”到客戶端，而不是等待客戶端來“詢問”。想象一下，你正在看一場激動人心的球賽直播，而不是每五秒刷新一次頁面，SSE 可以幫你實時看到每一個進球。是不是很酷？創(chuàng)建控制器
好的，現在讓我們開始編寫一些代碼。首先，我們需要創(chuàng)建一個 SpringBoot 控制器。這個控制器就像是魔法世界的大門，讓所有神奇的事情開始發(fā)生。@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();
}
我這里做的是從數據庫查詢數據實時推送到前端，你也可以換成任何你喜歡的方式，在下面的方法中
發(fā)送數據
現在，是時候學習一些發(fā)送數據的魔法咒語了。每當后端有新的數據更新時，我們就可以調用 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。文章來源：http://www.zghlxwxcb.cn/news/detail-783920.html
<!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 應用，打開你的前端頁面，你就會看到數據像水一樣流暢地在你眼前流淌。不再是冰冷的靜態(tài)頁面，你的應用現在生動、活潑，充滿了魔法的力量！文章來源地址http://www.zghlxwxcb.cn/news/detail-783920.html
到了這里，關于實時數據流無憂：用 SpringBoot 和 SSE 打造動態(tài)前端更新的終極指南的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
