快捷導(dǎo)航

前端vue3使用SSE、EventSource攜帶請(qǐng)求頭實(shí)例代碼

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

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

一、SSE介紹

1. 定義

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

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

2. 特點(diǎn)

單向通信
實(shí)時(shí)推送
輕量級(jí)
支持跨域、使用簡(jiǎn)單、支持自動(dòng)重連

3. 適合場(chǎng)景

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

二、SSE使用

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

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

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

示例：在一個(gè)vue的頁(yè)面中

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

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

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

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

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

2. EventSource的事件

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

3. 建立SSE連接的時(shí)候攜帶token

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

EventSourcePolyfill 是 EventSource 封裝好了的一個(gè)方法，可以直接配置請(qǐng)求頭

首先安裝依賴

npm install event-source-polyfill --save

項(xiàng)目中使用，完整的封裝代碼如下 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, "連接剛打開(kāi)時(shí)觸發(fā)");
            reconnectAttempts = 0; // 重置重連次數(shù)
        };
        eventSource.onmessage = (event) => {
            console.log("收到消息內(nèi)容是:", event.data)
        };
        eventSource.onerror = (event) => {
            console.error("SSE 連接出錯(cuò)：", event);
            eventSource.close(); // 關(guān)閉連接
            eventSource = null;
            // 自動(dòng)重連邏輯
            reconnectAttempts++;
            const reconnectDelay = Math.min(30000, 1000 * Math.pow(2, reconnectAttempts)); // 計(jì)算重連延遲，最大延遲為30秒
            console.log(`將在 ${reconnectDelay} 毫秒后嘗試重連...`);
            // 等待一定時(shí)間后重連
            setTimeout(() => {
                if (!eventSource) {
                    console.log("嘗試重連 SSE...");
                    subscribeWarnMsg(proxy, url); // 遞歸調(diào)用重連
                }
            }, reconnectDelay);
        }
        return eventSource;
    }
}

頁(yè)面中使用 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()
});