useOnlineCount 在线用户数

通过 SSE 实时获取并展示在线用户数量。

基础用法

<template>
  <div class="online-status">
    <span>当前在线：{{ onlineUserCount }} 人</span>
    <span v-if="isConnected">已连接</span>
    <span v-else>未连接</span>
  </div>
</template>

<script setup lang="ts">
import { useOnlineCount } from "@/composables";

const { onlineUserCount, isConnected } = useOnlineCount();
</script>

手动控制初始化

const { onlineUserCount, initialize, cleanup } = useOnlineCount({
  autoInit: false,
});

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

onUnmounted(() => {
  cleanup();
});

API

参数

参数	类型	默认值	说明
options.autoInit	boolean	true	是否在组件挂载时自动初始化

返回值

名称	类型	说明
onlineUserCount	Readonly<Ref<number>>	在线用户数量
lastUpdateTime	Readonly<Ref<number>>	最后更新时间戳
isConnected	Ref<boolean>	SSE 连接状态
initialize	() => void	初始化 SSE 连接
cleanup	() => void	关闭连接并清理资源

消息格式

后端推送支持两种格式：

// 直接数字
42

// 对象格式
{ "count": 42, "timestamp": 1703577600000 }

初始化条件

满足以下条件才会初始化：

1. 配置了 VITE_APP_SSE_ENDPOINT 环境变量
2. 用户已登录（存在有效的 accessToken）