useSse

SSE（Server-Sent Events）长连接管理 Composable，用于与后端建立实时通信通道。

功能说明

useSse 提供完整的 SSE 连接管理：

• 单例模式：全局共享一个连接实例
• 自动重连：指数退避策略，避免服务端压力
• 事件订阅：支持订阅多个事件类型
• Token 认证：自动携带 Authorization 头
• 资源清理：登出时自动断开连接

基础用法

import { useSse } from '@/composables'

const { isConnected, connect, disconnect, on } = useSse()

// 建立连接（通常在登录后调用）
onMounted(() => {
  connect()
})

// 订阅事件
const unsubscribe = on('dict-change', (data) => {
  console.log('字典已更新:', data)
})

// 取消订阅
onUnmounted(() => {
  unsubscribe()
})

// 断开连接（通常在登出时调用）
disconnect()

配置选项

interface UseSseOptions {
  /** SSE 连接地址，默认走 VITE_APP_BASE_API 代理 */
  url?: string

  /** 是否在控制台打印调试日志 */
  debug?: boolean

  /** 连接超时时间(ms)，默认 10000 */
  connectionTimeout?: number

  /** 重连间隔基数，实际间隔 = min(基数 × 2^n, 最大间隔)，默认 5000 */
  reconnectInterval?: number

  /** 重连间隔上限(ms)，默认 120000 */
  maxReconnectInterval?: number

  /** 最大重试次数，超过后停止重连，默认 10 */
  maxReconnectAttempts?: number
}

返回值

属性/方法	类型	说明
connectionState	Readonly<Ref<SseConnectionState>>	连接状态
isConnected	ComputedRef<boolean>	是否已连接
connect	() => void	建立连接
disconnect	() => void	断开连接（不触发重连）
cleanup	() => void	清理资源（登出时调用）
on	(event, handler) => () => void	订阅事件，返回取消函数

连接状态

enum SseConnectionState {
  DISCONNECTED = 'DISCONNECTED', // 未连接
  CONNECTING = 'CONNECTING',    // 连接中
  CONNECTED = 'CONNECTED',      // 已连接
}

完整示例

<template>
  <div>
    <el-tag :type="isConnected ? 'success' : 'danger'">
      {{ isConnected ? '已连接' : '未连接' }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import { useSse } from '@/composables'

const { isConnected, connect, disconnect, on, cleanup } = useSse({
  debug: true,
  reconnectInterval: 3000,
  maxReconnectAttempts: 5
})

// 连接并订阅事件
onMounted(() => {
  connect()

  // 订阅字典变更事件
  on('dict-change', (data) => {
    console.log('字典已更新:', data.dictCode)
  })

  // 订阅在线人数事件
  on('online-count', (data) => {
    console.log('当前在线:', data.count)
  })
})

// 组件卸载时断开
onUnmounted(() => {
  cleanup()
})
</script>

自动重连策略

采用指数退避策略：

重试次数	等待时间
1	5s
2	10s
3	20s
4	40s
5	80s
6+	120s（上限）

重连成功后，计数器重置，下次重连仍从 5s 开始。

环境配置

# .env.development（开发环境走代理）
VITE_APP_BASE_API=http://localhost:8080

# SSE 连接地址会自动拼接为：
# http://localhost:8080/api/v1/sse/connect

如需自定义 SSE 地址：

useSse({
  url: 'https://api.example.com/custom-sse-endpoint'
})

注意事项

1. Token 必需：连接前需确保已登录，否则连接会被跳过
2. 单例模式：多次调用 useSse() 返回同一实例
3. 登出清理：用户登出时需调用 cleanup() 释放资源
4. 事件取消：组件卸载时应取消订阅，避免内存泄漏

相关链接

• useDictSync 字典同步
• useOnlineCount 在线人数
• 实时通信专题