A composable for accessing real-time statistics about active SSE/WebSocket connections and their version distribution.
connectionTracking: true in your module config and only works with sse or ws update strategies. It does not support Pusher/Ably adapters.Enable connection tracking in your Nuxt config:
export default defineNuxtConfig({
skewProtection: {
connectionTracking: true
}
})
const { total, versions } = useActiveConnections()
totalComputedRef<number>The total number of active connections across all versions.
const { total } = useActiveConnections()
console.log(total.value) // 42
versionsComputedRef<Record<string, number>>A map of build IDs to connection counts, showing how many users are on each version.
const { versions } = useActiveConnections()
console.log(versions.value)
// { "abc123": 35, "def456": 7 }
interface ConnectionStats {
total: number
versions: Record<string, number>
}
<script setup>
const { total, versions } = useActiveConnections()
const versionList = computed(() => {
return Object.entries(versions.value)
.sort(([, a], [, b]) => b - a)
.map(([id, count]) => ({
id: id.slice(0, 8),
count,
percentage: Math.round((count / total.value) * 100)
}))
})
</script>
<template>
<div class="connections-widget">
<h3>Active Users: {{ total }}</h3>
<ul>
<li v-for="v in versionList" :key="v.id">
{{ v.id }}: {{ v.count }} ({{ v.percentage }}%)
</li>
</ul>
</div>
</template>
const { total, versions } = useActiveConnections()
const usersOnOldVersions = computed(() => {
const currentBuildId = useRuntimeConfig().app.buildId
return Object.entries(versions.value)
.filter(([id]) => id !== currentBuildId)
.reduce((sum, [, count]) => sum + count, 0)
})
watch(usersOnOldVersions, (count) => {
if (count === 0) {
console.log('All users migrated to latest version!')
}
})
<script setup>
const { total, versions } = useActiveConnections()
const buildId = useRuntimeConfig().app.buildId
const stats = computed(() => {
const current = versions.value[buildId] || 0
const outdated = total.value - current
return {
current,
outdated,
percentCurrent: total.value ? Math.round((current / total.value) * 100) : 0
}
})
</script>
<template>
<div class="stats">
<span>{{ stats.current }} current</span>
<span>{{ stats.outdated }} outdated</span>
<span>{{ stats.percentCurrent }}% up to date</span>
</div>
</template>
updateStrategy: 'sse' or updateStrategy: 'ws'