LiveVue
1.0
Connection Status
Monitor the WebSocket connection state in real-time using the useLiveConnection() hook. Track when the connection is open, connecting, closing, or closed.
What this example shows
How it works
1 The useLiveConnection() hook
The useLiveConnection()
hook provides reactive access to the WebSocket connection state. It returns
connectionState
(a ref with values "connecting", "open", "closing", or "closed") and
isConnected
(a computed boolean for convenience).
const { connectionState, isConnected } = useLiveConnection()2 Reactive state tracking
Use Vue's watch()
to track state changes over time. This example maintains a history of the last 5 state transitions
with timestamps, demonstrating how connection state changes propagate through your component.
watch(
connectionState,
(newState) => {
stateHistory.value.push({ state: newState, timestamp: new Date() })
},
{ immediate: true }
)3 Visual feedback
Bind the connection state to your UI with dynamic classes and animations. Show users when they're connected with a pulsing green indicator, or warn them about connection issues with red/amber states. This creates a responsive, transparent user experience.
<span :class="isConnected ? 'bg-green-500 animate-pulse' : 'bg-red-500'" />