首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 前端vue3 SSE携带请求头

前端vue3使用SSE、EventSource携带请求头实例代码

2025-06-23 08:39:05 作者：alikami

这篇文章主要介绍了前端vue3使用SSE、EventSource携带请求头的相关资料,SSE是基于HTTP的服务器向客户端推送数据技术,实现单向实时通信,轻量级且支持跨域、自动重连,文中将实现的方法介绍的非常详细,需要的朋友可以参考下

一、SSE介绍

1. 定义

SSE（Server-Sent Events）是一种基于 HTTP 协议，用于实现服务器主动向客户端推送数据的技术。它在客户端与服务器之间建立一条持久化连接，并通过这条连接实现服务器向客户端的实时数据推送，而客户端不能发送数据给服务端。

总之——SSE是一种允许服务器向客户端单向发送数据的技术。

2. 特点

单向通信
实时推送
轻量级
支持跨域、使用简单、支持自动重连

3. 适合场景

数据大屏
消息推送
股票交易
在线聊天
...

二、SSE使用

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

EventSource接口是Web内容与服务器发送事件通信的接口。

一个EventSource实例向HTTP服务器开启一个持久化的连接，以text/event-stream格式发送事件，此连接会一直保持开启直到通过调用EventSource.close()关闭。

示例：在一个vue的页面中

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

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

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

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

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

2. EventSource的事件

open	在与事件源的连接打开时触发
message	在从事件源接收到数据时触发
error	在事件源连接未能打开时触发
具名事件	当从服务器端接收到指定了event字段的事件时触发，这将创建一个以该键值为值的特定事件

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; // 重连次数

export default function subscribeWarnMsg(proxy, url) {
    if (eventSource) {
        console.log("sse已经存在：", 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, "连接刚打开时触发");
            reconnectAttempts = 0; // 重置重连次数
        };
        eventSource.onmessage = (event) => {
            console.log("收到消息内容是:", event.data)
        };
        eventSource.onerror = (event) => {
            console.error("SSE 连接出错：", event);
            eventSource.close(); // 关闭连接
            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); // 递归调用重连
                }
            }, 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()
});

总结

到此这篇关于前端vue3使用SSE、EventSource携带请求头的文章就介绍到这了,更多相关前端vue3 SSE携带请求头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！