vue3+ts前端封裝EventSource并在請求頭添加token的方法

更新時間：2024年12月21日 15:54:21 作者：全能全知者

這篇文章主要介紹了vue3+ts前端封裝EventSource并在請求頭添加token,本文將介紹如何使用 event-source-polyfill 來解決這個問題,需要的朋友可以參考下

vue3+ts前端封裝 EventSource 并在請求頭添加 token

背景介紹

在前端開發(fā)中,我們經(jīng)常需要使用 Server-Sent Events (SSE) 來實現(xiàn)服務器向客戶端推送數(shù)據(jù)。但原生的 EventSource 不支持在請求頭中添加自定義字段,這使得我們無法添加 token 等認證信息。本文將介紹如何使用 event-source-polyfill 來解決這個問題。

環(huán)境準備

首先需要安裝 event-source-polyfill 依賴:

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

如果是ts項目,同時還需要安裝對應的類型聲明文件:

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

封裝 SSE 連接方法

在 http 工具類中,我們可以這樣封裝 SSE 連接:
http.ts

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
}
// 創(chuàng)建 SSE 連接
function createSSEConnection(url: string, options?: SSEOptions) {
  // 從 store 中獲取 token
  const token = (store.state as StateAll).user.token
  // 創(chuàng)建 EventSource 實例,添加 token
  const eventSource = new EventSourcePolyfill(BASE_URL + url, {
    headers: {
      'Authorization': token
    }
  })
  // 連接成功回調(diào)
  eventSource.addEventListener('open', () => {
    console.log('SSE連接成功')
    options?.onOpen?.()
  })
  // 接收消息回調(diào)
  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()
    }
  }
}

使用示例

在組件中使用封裝好的 SSE 連接:

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()
})