快捷導(dǎo)航

前端vue3使用SSE、EventSource攜帶請求頭實例代碼

更新時間：2025年06月23日 08:39:05 作者：alikami

這篇文章主要介紹了前端vue3使用SSE、EventSource攜帶請求頭的相關(guān)資料,SSE是基于HTTP的服務(wù)器向客戶端推送數(shù)據(jù)技術(shù),實現(xiàn)單向?qū)崟r通信,輕量級且支持跨域、自動重連,文中將實現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下

一、SSE介紹

1. 定義

SSE（Server-Sent Events）是一種基于 HTTP 協(xié)議，用于實現(xiàn)服務(wù)器主動向客戶端推送數(shù)據(jù)的技術(shù)。它在客戶端與服務(wù)器之間建立一條持久化連接，并通過這條連接實現(xiàn)服務(wù)器向客戶端的實時數(shù)據(jù)推送，而客戶端不能發(fā)送數(shù)據(jù)給服務(wù)端。

總之——SSE是一種允許服務(wù)器向客戶端單向發(fā)送數(shù)據(jù)的技術(shù)。

2. 特點

單向通信
實時推送
輕量級
支持跨域、使用簡單、支持自動重連

3. 適合場景

數(shù)據(jù)大屏
消息推送
股票交易
在線聊天
...

二、SSE使用

1. 建立最基本的SSE連接，需要用到 EventSource

EventSource接口是Web內(nèi)容與服務(wù)器發(fā)送事件通信的接口。

一個EventSource實例向HTTP服務(wù)器開啟一個持久化的連接，以text/event-stream格式發(fā)送事件，此連接會一直保持開啟直到通過調(diào)用EventSource.close()關(guān)閉。

示例：在一個vue的頁面中

const initSSE = () => {
    eventSource = new EventSource('http://地址');

    eventSource.onmessage = (event) => {
        console.log("收到消息內(nèi)容是:", event.data)
    };

    eventSource.onerror = (error) => {
        console.error("SSE 連接出錯：", error);
        eventSource.close();
    };
}

onMounted(() => {
    initSSE();
});

onUnmounted(() => {
    if (eventSource) {
        eventSource.close();
    }
});

2. EventSource的事件

open	在與事件源的連接打開時觸發(fā)
message	在從事件源接收到數(shù)據(jù)時觸發(fā)
error	在事件源連接未能打開時觸發(fā)
具名事件	當(dāng)從服務(wù)器端接收到指定了event字段的事件時觸發(fā)，這將創(chuàng)建一個以該鍵值為值的特定事件

3. 建立SSE連接的時候攜帶token

如果想要在建立SSE連接的時候攜帶token，需要用到 event-source-polyfill

EventSourcePolyfill 是 EventSource 封裝好了的一個方法，可以直接配置請求頭

首先安裝依賴

npm install event-source-polyfill --save

項目中使用，完整的封裝代碼如下 sse.js 文件

import {getToken} from "@/utils/auth";
import {EventSourcePolyfill} from "event-source-polyfill";

let eventSource = null;
let reconnectAttempts = 0; // 重連次數(shù)

export default function subscribeWarnMsg(proxy, url) {
    if (eventSource) {
        console.log("sse已經(jīng)存在：", eventSource);
        return eventSource;
    } else {
        eventSource = new EventSourcePolyfill(import.meta.env.VITE_APP_BASE_API + url, {
            heartbeatTimeout: 3 * 60 * 1000,
            headers: {
                Authorization: 'Bearer ' + getToken(),
                Accept: 'text/event-stream'
            },
            withCredentials: true,
        })
        eventSource.onopen = function (e) {
            console.log(e, "連接剛打開時觸發(fā)");
            reconnectAttempts = 0; // 重置重連次數(shù)
        };
        eventSource.onmessage = (event) => {
            console.log("收到消息內(nèi)容是:", event.data)
        };
        eventSource.onerror = (event) => {
            console.error("SSE 連接出錯：", event);
            eventSource.close(); // 關(guān)閉連接
            eventSource = null;
            // 自動重連邏輯
            reconnectAttempts++;
            const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts)); // 計算重連延遲，最大延遲為30秒
            console.log(`將在 ${reconnectDelay} 毫秒后嘗試重連...`);
            // 等待一定時間后重連
            setTimeout(() => {
                if (!eventSource) {
                    console.log("嘗試重連 SSE...");
                    subscribeWarnMsg(proxy, url); // 遞歸調(diào)用重連
                }
            }, reconnectDelay);
        }
        return eventSource;
    }
}

頁面中使用 test.vue 文件

import subscribeWarnMsg from '@/../sse'
const {proxy} = getCurrentInstance();

const sse = ref()

function initSSE() {
  sse.value = subscribeWarnMsg(proxy, `/system/sse/connect`);
  sse.value.onmessage = async (event) => {
    info.value = await JSON.parse(event.data)
  }
}

onMounted(() => {
  initSSE();
});

onUnmounted(() => {
  sse.value.close()
});