vue3+ts前端封装EventSource并在请求头添加token的方法

npm install event-source-polyfill
# 或
yarn add event-source-polyfill
# 或
pnpm install event-source-polyfill

npm install @types/event-source-polyfill -D
# 或  
yarn add @types/event-source-polyfill -D
# 或
pnpm install @types/event-source-polyfill -D

import { EventSourcePolyfill } from 'event-source-polyfill'
import store from '@/store'
import type { StateAll } from '@/store'
interface SSEOptions {
  onMessage?: (data: any) => void
  onError?: (error: any) => void 
  onOpen?: () => void
}
// 创建 SSE 连接
function createSSEConnection(url: string, options?: SSEOptions) {
  // 从 store 中获取 token
  const token = (store.state as StateAll).user.token
  // 创建 EventSource 实例,添加 token
  const eventSource = new EventSourcePolyfill(BASE_URL + url, {
    headers: {
      'Authorization': token
    }
  })
  // 连接成功回调
  eventSource.addEventListener('open', () => {
    console.log('SSE连接成功')
    options?.onOpen?.()
  })
  // 接收消息回调
  eventSource.addEventListener('message', (event: any) => {
    try {
      const data = JSON.parse(event.data)
      options?.onMessage?.(data)
    } catch (error) {
      console.error('解析消息失败:', error)
      options?.onMessage?.([])
    }
  })
  // 错误处理
  eventSource.addEventListener('error', (error: any) => {
    console.error('SSE连接错误:', error)
    // token 失效处理
    if (error?.status === 401) {
      store.commit('user/clearToken')
      window.location.replace('/login')
      return
    }
    options?.onError?.(error)
  })
  return {
    eventSource,
    close: () => {
      eventSource.close()
    }
  }
}

const unreadMessages = ref<ElectricityMessage[]>([])
let sseConnection: { close: () => void } | null = null
// 建立 SSE 连接
sseConnection = http.createSSEConnection('messages/unread', {
  onOpen: () => {
    console.log('消息连接已建立')
  },
  onMessage: (data) => {
    unreadMessages.value = data
  },
  onError: (error) => {
    console.error('消息连接错误:', error)
  }
})
// 组件销毁时关闭连接
onUnmounted(() => {
  sseConnection?.close()
})