10分鐘搞定！SpringBoot+Vue3 整合 SSE 實現即時消息推送

前言

在日常開發中，我們經常需要實現即時消息推送的功能。比如新聞應用、聊天系統、監控告警等場景。這篇文章基於SpringBoot和Vue3來簡單實現一個入門級的例子。

實現場景：在一個瀏覽器發送通知，其他所有打開的瀏覽器都能即時收到！

先大概介紹下SSE

SSE（伺服器推送事件）是一種允許伺服器向客戶端推送數據的技術。與 WebSocket 相比，SSE 更簡單易用，特別適合只需要伺服器向客戶端單向通信的場景。

就像你訂閱了某公眾號，有新的文章就會主動推送給你一樣。

下面來看下實際代碼，完整代碼都在這裡。

後端實現（SpringBoot）

控制器類 - 核心邏輯都在這裡

package com.im.controller;

import lombok.extern.slf4j.Slf4j;
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.ArrayList;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

@Slf4j
@RestController
@RequestMapping("/api/sse")
public class SseController {

    // 存儲所有連接的客戶端 - 關鍵：這個列表保存了所有瀏覽器的連接
    private final List<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    /**
     * 訂閱SSE事件 - 前端通過這個接口建立連接
     * 當瀏覽器打開頁面時，就會調用這個接口
     */
    @GetMapping(path = "/subscribe", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter subscribe() {
        // 創建SSE發射器，3600000毫秒=1小時超時
        SseEmitter emitter = new SseEmitter(3600_000L);
        log.info("新的SSE客戶端連接成功");

        // 將新連接加入到客戶端列表
        emitters.add(emitter);

        // 設置連接完成時的回調（用戶關閉頁面時會觸發）
        emitter.onCompletion(() -> {
            log.info("SSE客戶端斷開連接（正常完成）");
            emitters.remove(emitter);
        });

        // 設置超時的回調
        emitter.onTimeout(() -> {
            log.info("SSE客戶端斷開連接（超時）");
            emitters.remove(emitter);
        });

        // 設置錯誤時的回調
        emitter.onError(e -> {
            log.error("SSE客戶端連接錯誤", e);
            emitters.remove(emitter);
        });

        // 發送初始測試消息 - 告訴前端連接成功了
        try {
            News testNews = new News();
            testNews.setTitle("連接成功");
            testNews.setContent("您已成功連接到SSE服務");
            emitter.send(SseEmitter.event()
                    .name("news")        // 事件名稱，前端根據這個來區分不同消息
                    .data(testNews));    // 實際發送的數據
        } catch (IOException e) {
            log.error("發送初始消息失敗", e);
        }

        return emitter;
    }

    /**
     * 發送新聞通知 - 前端調用這個接口來發布新聞
     * 這個方法會把新聞推送給所有連接的瀏覽器
     */
    @PostMapping("/send-news")
    public void sendNews(@RequestBody News news) {
        List<SseEmitter> deadEmitters = new ArrayList<>();

        log.info("開始向 {} 個客戶端發送新聞: {}", emitters.size(), news.getTitle());

        // 向所有客戶端發送消息 - 關鍵：遍歷所有連接
        emitters.forEach(emitter -> {
            try {
                // 向每個客戶端發送新聞數據
                emitter.send(SseEmitter.event()
                        .name("news") // 事件名稱，前端監聽這個事件
                        .data(news)); // 新聞數據
                log.info("新聞發送成功到客戶端");
            } catch (IOException e) {
                // 發送失敗，說明這個連接可能已經斷開
                log.error("發送新聞到客戶端失敗", e);
                deadEmitters.add(emitter);
            }
        });

        // 移除已經斷開的連接，避免內存泄漏
        emitters.removeAll(deadEmitters);
        log.info("清理了 {} 個無效連接", deadEmitters.size());
    }

    // 新聞數據模型 - 簡單的Java類，用來存儲新聞數據
    public static class News {
        private String title;    // 新聞標題
        private String content;  // 新聞內容

        // getters and setters
        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getContent() {
            return content;
        }

        public void setContent(String content) {
            this.content = content;
        }
    }
}

後端代碼就這麼多，代碼非常的簡單。

後端核心思路：

1. 用一個列表 emitters 保存所有瀏覽器的連接
2. 當有新聞發布時，遍歷這個列表，向每個連接發送消息
3. 及時清理斷開的連接，保持列表的清潔

前端實現（Vue3）

1. 數據類型定義

// src/types/news.ts

// 定義新聞數據的類型
export interface News {
  title: string;     // 新聞標題
  content: string;   // 新聞內容
}

// 定義錯誤信息的類型
export interface SseError {
  message: string;
}

2. SSE服務類 - 封裝連接邏輯

// src/utils/sseService.ts
import type { News } from '@/types/news'

// 定義回調函數的類型
type MessageCallback = (data: News) => void  // 收到消息時的回調
type ErrorCallback = (error: Event) => void  // 發生錯誤時的回調

class SseService {
  private eventSource: EventSource | null = null  // SSE連接對象
  private retryCount = 0                          // 重試次數
  private maxRetries = 3                          // 最大重試次數
  private retryDelay = 3000                       // 重試延遲(3秒)
  private onMessageCallback: MessageCallback | null = null  // 消息回調
  private onErrorCallback: ErrorCallback | null = null      // 錯誤回調

  /**
   * 訂閱SSE服務 - 建立連接並設置回調函數
   * @param onMessage 收到消息時的處理函數
   * @param onError 產生錯誤時的處理函數
   */
  public subscribe(onMessage: MessageCallback, onError: ErrorCallback): void {
    this.onMessageCallback = onMessage
    this.onErrorCallback = onError
    this.connect()  // 開始連接
  }

  /**
   * 建立SSE連接
   */
  private connect(): void {
    // 如果已有連接，先斷開
    if (this.eventSource) {
      this.disconnect()
    }

    // 創建新的SSE連接，連接到後端的/subscribe接口
    this.eventSource = new EventSource('/api/sse/subscribe')

    // 連接成功時的處理
    this.eventSource.addEventListener('open', () => {
      console.log('SSE連接建立成功')
      this.retryCount = 0 // 連接成功後重置重試計數
    })

    // 監聽新聞事件 - 當後端發送name為"news"的消息時會觸發
    this.eventSource.addEventListener('news', (event: MessageEvent) => {
      try {
        // 解析後端發送的JSON數據
        const data: News = JSON.parse(event.data)
        console.log('收到新聞消息:', data)
        // 調用消息回調函數，把新聞數據傳遞給組件
        this.onMessageCallback?.(data)
      } catch (error) {
        console.error('解析SSE消息失敗:', error)
      }
    })

    // 錯誤處理
    this.eventSource.onerror = (error: Event) => {
      console.error('SSE連接錯誤:', error)
      this.onErrorCallback?.(error)  // 調用錯誤回調
      this.disconnect()              // 斷開連接

      // 自動重連邏輯 - 網路不穩定時的自我恢復
      if (this.retryCount < this.maxRetries) {
        this.retryCount++
        console.log(`嘗試重新連接 (${this.retryCount}/${this.maxRetries})...`)
        setTimeout(() => this.connect(), this.retryDelay)
      } else {
        console.error('已達到最大重連次數，停止重連')
      }
    }
  }

  /**
   * 取消訂閱 - 組件銷毀時調用
   */
  public unsubscribe(): void {
    this.disconnect()
    this.onMessageCallback = null
    this.onErrorCallback = null
  }

  /**
   * 斷開連接
   */
  private disconnect(): void {
    if (this.eventSource) {
      this.eventSource.close()  // 關閉連接
      this.eventSource = null
    }
  }
}

// 導出單例實例，整個應用共用同一個SSE服務
export default new SseService()

3. 新聞通知組件 - 顯示即時新聞

<!-- src/components/NewsNotification.vue -->
<template>
  <div class="news-container">
    <h2>新聞通知</h2>

    <!-- 連接狀態 -->
    <div v-if="loading" class="status loading">連接伺服器中...</div>
    <div v-if="error" class="status error">連接錯誤: {{ error }}</div>

    <!-- 新聞列表 -->
    <div class="news-list">
      <div v-for="(news, index) in newsList" :key="index" class="news-item">
        <h3>{{ news.title }}</h3>
        <p>{{ news.content }}</p>
        <div class="time">{{ getCurrentTime() }}</div>
      </div>
    </div>

    <!-- 空狀態 -->
    <div v-if="newsList.length === 0 && !loading" class="no-news">暫無新聞通知</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import sseService from '@/utils/sseService'
import type { News } from '@/types/news'

export default defineComponent({
  name: 'NewsNotification',
  setup() {
    const newsList = ref<News[]>([]) // 新聞列表
    const loading = ref<boolean>(true) // 加載狀態
    const error = ref<string | null>(null) // 錯誤信息

    // 處理新消息
    const handleNewMessage = (news: News): void => {
      newsList.value.unshift(news) // 新消息放在最前面
    }

    // 處理錯誤
    const handleError = (err: Event): void => {
      error.value = (err as ErrorEvent)?.message || '連接伺服器失敗'
      loading.value = false
    }

    // 獲取當前時間
    const getCurrentTime = (): string => {
      return new Date().toLocaleTimeString()
    }

    // 組件掛載時建立連接
    onMounted(() => {
      sseService.subscribe(handleNewMessage, handleError)
      loading.value = false
    })

    // 組件銷毀時斷開連接
    onUnmounted(() => {
      sseService.unsubscribe()
    })

    return {
      newsList,
      loading,
      error,
      getCurrentTime,
    }
  },
})
</script>

<style scoped>
.news-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.status {
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
  text-align: center;
}

.loading {
  background-color: #e3f2fd;
  color: #1976d2;
}

.error {
  background-color: #ffebee;
  color: #d32f2f;
}

.news-list {
  margin-top: 20px;
}

.news-item {
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fafafa;
}

.news-item h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.news-item p {
  margin: 0 0 8px 0;
  color: #666;
  line-height: 1.4;
}

.time {
  font-size: 12px;
  color: #999;
  text-align: right;
}

.no-news {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-style: italic;
}
</style>

4. 新聞發送組件 - 管理員發送新聞

<!-- src/components/SendNewsForm.vue -->
<template>
  <div class="send-news-form">
    <h2>發送新聞通知</h2>
    <form @submit.prevent="sendNews">
      <div class="form-group">
        <label for="title">標題</label>
        <input id="title" v-model="news.title" type="text" required placeholder="輸入新聞標題" />
      </div>

      <div class="form-group">
        <label for="content">內容</label>
        <textarea
          id="content"
          v-model="news.content"
          required
          placeholder="輸入新聞內容"
          rows="4"
        ></textarea>
      </div>

      <button type="submit" :disabled="isSending">
        {{ isSending ? '發送中...' : '發送新聞' }}
      </button>

      <!-- 操作反饋 -->
      <div v-if="message" class="message" :class="messageType">
        {{ message }}
      </div>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
import type { News } from '@/types/news'

export default defineComponent({
  name: 'SendNewsForm',
  setup() {
    // 表單數據
    const news = ref<News>({
      title: '',
      content: '',
    })

    // 界面狀態
    const isSending = ref<boolean>(false)
    const message = ref<string>('')
    const isSuccess = ref<boolean>(false)

    // 消息類型樣式
    const messageType = computed(() => {
      return isSuccess.value ? 'success' : 'error'
    })

    // 發送新聞
    const sendNews = async (): Promise<void> => {
      isSending.value = true
      message.value = ''

      try {
        const response = await fetch('/api/sse/send-news', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(news.value),
        })

        if (response.ok) {
          message.value = '新聞發送成功！'
          isSuccess.value = true
          // 清空表單
          news.value = { title: '', content: '' }
        } else {
          throw new Error('發送失敗')
        }
      } catch (err) {
        message.value = '發送新聞失敗'
        isSuccess.value = false
        console.error(err)
      } finally {
        isSending.value = false
      }
    }

    return {
      news,
      isSending,
      message,
      messageType,
      sendNews,
    }
  },
})
</script>

<style scoped>
.send-news-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #1976d2;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

button {
  width: 100%;
  background-color: #1976d2;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background-color: #1565c0;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.success {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.error {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
}
</style>

5. 主頁面引用組件

<!-- src/Home.vue -->
<template>
  <div class="welcome">
    <SendNewsForm />
    <NewsNotification />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import SendNewsForm from './components/SendNewsForm.vue'
import NewsNotification from './components/NewsNotification.vue'

export default defineComponent({
  components: {
    SendNewsForm,
    NewsNotification,
  },
})
</script>

全部代碼和註釋都在這裡，可以直接啟動專案測試了。

測試

1. 測試多瀏覽器接收

1. 打開第一個瀏覽器（比如 Chrome）訪問應用
2. 打開第二個瀏覽器（比如 Firefox）訪問應用
3. 在任意瀏覽器中使用發送表單發布新聞
4. 觀察兩個瀏覽器是否都即時收到了新聞通知

2. 預期效果

• 第一个瀏覽器打開：顯示"連接成功"
• 第二個瀏覽器打開：顯示"連接成功"
• 在任意瀏覽器發送新聞：兩個瀏覽器都立刻顯示新新聞
• 關閉一個瀏覽器：不影響另一個瀏覽器的正常使用

總結

通過這個小案例的源碼，我們學會了SSE的簡單使用：

• SSE 的基本原理和使用方法
• SpringBoot 如何維護多個客戶端連接
• Vue3 組合式 API 的使用
• 前後端分離架構的即時通信實現

這個方案非常適合新聞推送、系統通知、即時數據展示等場景。代碼簡單易懂，擴展性強，你也可以基於這個基礎添加更多功能。

本文首發於公眾號：程式員劉大華，專注分享前後端開發的實戰筆記。關注我，少走彎路，一起進步！

📌往期精彩

《SpringBoot+Vue3 整合 SSE 實現即時消息推送》
《這20條SQL優化方案，讓你的資料庫查詢速度提升10倍》
《SpringBoot 動態菜單權限系統設計的企業級解決方案》
《Vue3和Vue2的核心區別？很多開發者都沒完全搞懂的10個細節》

原文出處：https://juejin.cn/post/7576867727719677987