SpringBoot+Vue3整合SSE實(shí)現(xiàn)實(shí)時(shí)消息推送
更新時(shí)間：2026年03月12日 15:17:43 作者：每日技術(shù)
這篇文章主要為大家詳細(xì)介紹了SpringBoot+Vue3整合SSE實(shí)現(xiàn)實(shí)時(shí)消息推送的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
我把 SpringBoot + Vue3 整合 SSE? 的文章寫得更加詳細(xì)，包括依賴引入、配置說明、完整代碼、測(cè)試方法和注意事項(xiàng)，讓你真正可以“一分鐘開箱即用”。
一、技術(shù)原理簡(jiǎn)介
SSE（Server-Sent Events） ? 是一種基于 HTTP 的服務(wù)器向客戶端單向?qū)崟r(shí)通信技術(shù)。
特點(diǎn)：
- 基于標(biāo)準(zhǔn) HTTP 協(xié)議，無需 WebSocket 復(fù)雜握手。
- 服務(wù)端保持長連接，隨時(shí)推送數(shù)據(jù)。
- 瀏覽器原生支持
EventSourceAPI。 - 適合 通知推送、實(shí)時(shí)日志、股票行情、聊天消息（單向） ? 等場(chǎng)景。
二、后端：SpringBoot 實(shí)現(xiàn) SSE
1. 引入依賴
使用 Maven 的 pom.xml引入 Spring Boot Web 依賴（Spring Boot 自帶 SSE 支持，無需額外 jar）：
<dependencies>
<!-- Spring Boot Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 測(cè)試用：方便發(fā) POST 請(qǐng)求 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>說明：spring-boot-starter-web已經(jīng)包含了 javax.servlet-api和 Spring MVC，SseEmitter類位于 org.springframework.web.servlet.mvc.method.annotation.SseEmitter，無需額外引入 jar。
2. 配置文件
application.yml（或 application.properties）保持默認(rèn)即可，無需特殊配置。
如果需要跨域，可以加：
spring:
web:
cors:
allowed-origins: "*"3. SSE 控制器代碼
package com.example.sse.controller;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@RestController
@RequestMapping("/sse")
public class SseController {
// 保存每個(gè)用戶的 SSE 連接，生產(chǎn)環(huán)境可用 Redis 等分布式緩存
private final Map<String, SseEmitter> emitters = new ConcurrentHashMap<>();
/**
* 客戶端訂閱接口
* GET /sse/subscribe/{userId}
*/
@GetMapping(value = "/subscribe/{userId}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter subscribe(@PathVariable String userId) {
// 0 表示永不超時(shí)，如需超時(shí)可用 60_000 毫秒
SseEmitter emitter = new SseEmitter(0L);
emitters.put(userId, emitter);
// 完成時(shí)移除
emitter.onCompletion(() -> emitters.remove(userId));
// 超時(shí)移除
emitter.onTimeout(() -> emitters.remove(userId));
// 出錯(cuò)移除
emitter.onError((e) -> emitters.remove(userId));
return emitter;
}
/**
* 服務(wù)端推送消息接口
* POST /sse/push/{userId}
*/
@PostMapping("/push/{userId}")
public void push(@PathVariable String userId, @RequestBody String message) {
SseEmitter emitter = emitters.get(userId);
if (emitter != null) {
try {
// name("message") 對(duì)應(yīng)前端的 event type
emitter.send(SseEmitter.event().name("message").data(message));
} catch (IOException e) {
emitters.remove(userId);
}
}
}
}
4. 啟動(dòng)類
package com.example.sse;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SseApplication {
public static void main(String[] args) {
SpringApplication.run(SseApplication.class, args);
}
}
三、前端：Vue3 連接 SSE
1. 創(chuàng)建 Vue3 項(xiàng)目
npm create vite@latest sse-demo -- --template vue cd sse-demo npm install
2. 組件代碼
src/components/SseDemo.vue：
<template>
<div>
<h3>SSE 實(shí)時(shí)消息推送</h3>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const messages = ref([])
let eventSource = null
onMounted(() => {
// 替換為你的后端地址和 userId
eventSource = new EventSource('http://localhost:8080/sse/subscribe/user123')
// 接收消息
eventSource.onmessage = (event) => {
messages.value.push(event.data)
}
// 錯(cuò)誤處理
eventSource.onerror = (err) => {
console.error('SSE connection error:', err)
eventSource.close()
}
})
onBeforeUnmount(() => {
if (eventSource) {
eventSource.close()
}
})
</script>3. 在 App.vue 中使用
<template> <SseDemo /> </template> <script setup> import SseDemo from './components/SseDemo.vue' </script>
四、測(cè)試方法
1.啟動(dòng) SpringBoot 后端?：默認(rèn)端口 8080。
2.啟動(dòng) Vue3 前端?
npm run dev
打開瀏覽器訪問 http://localhost:5173。
3.發(fā)送測(cè)試消息?
用 Postman 或 curl 發(fā) POST 請(qǐng)求：
curl -X POST http://localhost:8080/sse/push/user123 \ -H "Content-Type: application/json" \ -d '"Hello SSE 實(shí)時(shí)消息！"'
前端頁面會(huì)立刻收到并顯示消息。
五、注意事項(xiàng)與優(yōu)化
跨域問題?：前后端分離時(shí)，后端需配置 CORS，否則瀏覽器會(huì)攔截 EventSource 連接。
心跳?；?/strong>?：長時(shí)間無消息時(shí)，連接可能被代理或?yàn)g覽器斷開。可在服務(wù)端定時(shí)推送注釋行保持活躍：
emitter.send(SseEmitter.event().comment("heartbeat"));
多用戶廣播?：當(dāng)前示例是點(diǎn)對(duì)點(diǎn)（一個(gè)用戶一個(gè)連接），如需群發(fā)，可維護(hù)一個(gè) List<SseEmitter>或按頻道分組。
生產(chǎn)環(huán)境?
- 使用 Redis 或消息隊(duì)列管理連接，支持集群。
- 設(shè)置合理的超時(shí)時(shí)間與重連機(jī)制。
- 對(duì)敏感消息加密傳輸（HTTPS）。
總結(jié)?
- 后端：
SseEmitter+@GetMapping(produces=TEXT_EVENT_STREAM_VALUE) - 前端：
new EventSource(url)+onmessage接收 - 引入 jar：僅需
spring-boot-starter-web，零額外依賴。
到此這篇關(guān)于SpringBoot+Vue3整合SSE實(shí)現(xiàn)實(shí)時(shí)消息推送的文章就介紹到這了,更多相關(guān)SpringBoot SSE實(shí)時(shí)消息推送內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
MyBatis-Plus詳解(環(huán)境搭建、關(guān)聯(lián)操作)
MyBatis-Plus 是一個(gè) MyBatis 的增強(qiáng)工具，在 MyBatis 的基礎(chǔ)上只做增強(qiáng)不做改變，為簡(jiǎn)化開發(fā)、提高效率而生，今天通過本文給大家介紹MyBatis-Plus環(huán)境搭建及關(guān)聯(lián)操作，需要的朋友參考下吧2022-09-09
Netty 是一個(gè)高性能、異步事件驅(qū)動(dòng)的網(wǎng)絡(luò)應(yīng)用框架,廣泛應(yīng)用于各種網(wǎng)絡(luò)通信場(chǎng)景,這篇文章,我們將詳細(xì)分析 Netty 是如何解決半包和粘包問題,文中通過代碼示介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
Servlet指在服務(wù)器端執(zhí)行的一段Java代碼,可以接收用戶的請(qǐng)求和返回給用戶響應(yīng)結(jié)果,下面這篇文章主要給大家介紹了關(guān)于Java.servlet生命周期的相關(guān)資料,需要的朋友可以參考下2023-02-02
項(xiàng)目開發(fā)中對(duì)于一些數(shù)據(jù)的處理需要用到多線程，比如文件的批量上傳，數(shù)據(jù)庫的分批寫入，大文件的分段下載等，主要涉及到多線程的一些知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下2021-11-11
這篇文章主要為大家詳細(xì)介紹了Java Spring Boot的一些高級(jí)用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-09-09
淺析Java數(shù)據(jù)庫操作工具包jOOQ的使用
jOOQ?是一個(gè)輕量級(jí)的?Java?ORM（對(duì)象關(guān)系映射）框架,可用來構(gòu)建復(fù)雜的?SQL?查詢,這篇文章主要來和大家介紹一下jOOQ的使用,需要的可以參考下2024-04-04
Springboot如何通過路徑映射獲取本機(jī)圖片資源
項(xiàng)目中對(duì)圖片的處理與查看是必不可少的，本文將講解如何通過項(xiàng)目路徑來獲取到本機(jī)電腦的圖片資源，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-08-08
在日常編碼過程中常常涉及到事務(wù),在前兩天看到一篇文章提到了Spring事務(wù),那么在此總結(jié)下在Spring環(huán)境下事務(wù)失效的幾種原因.2020-09-09
springMVC中HttpMessageConverter的具體使用
HttpMessageConverter,報(bào)文信息轉(zhuǎn)換器,將請(qǐng)求報(bào)文轉(zhuǎn)換為Java對(duì)象,本文主要介紹了springMVC中HttpMessageConverter的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
在Java的Struts中判斷是否調(diào)用AJAX及用攔截器對(duì)其優(yōu)化
這篇文章主要介紹了在Java的Struts中判斷是否調(diào)用AJAX及用攔截器對(duì)其優(yōu)化的方法,Struts框架是Java的SSH三大web開發(fā)框架之一,需要的朋友可以參考下2016-01-01