Examples Connection Status

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

useLiveConnection()

Hook for connection state

WebSocket State

Reactive connection status

Real-time Feedback

Visual connection indicator

Preview LiveView Vue

ConnectionStatus.vue

<script setup lang="ts">
import { useLiveConnection } from 'live_vue'
import { ref, watch } from 'vue'

interface StateHistoryEntry {
  state: string
  timestamp: Date
}

const { connectionState, isConnected } = useLiveConnection()

const stateHistory = ref<StateHistoryEntry[]>([])

watch(connectionState, (newState) => {
  stateHistory.value.push({
    state: newState,
    timestamp: new Date()
  })
  if (stateHistory.value.length > 5) {
    stateHistory.value.shift()
  }
}, { immediate: true })

const formatTime = (date: Date) => {
  return date.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    fractionalSecondDigits: 3
  })
}

const getStateClass = (state: string) => {
  switch (state) {
    case 'open':
      return 'text-success'
    case 'connecting':
      return 'text-warning'
    case 'closing':
      return 'text-warning'
    case 'closed':
      return 'text-error'
    default:
      return 'text-neutral'
  }
}

const getStateBadge = (state: string) => {
  switch (state) {
    case 'open':
      return 'badge-success'
    case 'connecting':
      return 'badge-warning'
    case 'closing':
      return 'badge-warning'
    case 'closed':
      return 'badge-error'
    default:
      return 'badge-ghost'
  }
}
</script>

<template>
  <div class="card bg-base-200 p-6 space-y-6">
    <div class="text-center">
      <div class="text-sm text-neutral mb-3">WebSocket Connection</div>
      <div class="inline-flex items-center gap-3">
        <span
          :class="[
            'badge badge-lg gap-2',
            getStateBadge(connectionState),
            isConnected && 'animate-pulse'
          ]"
        >
          <span class="w-2 h-2 rounded-full bg-current" />
          <span class="font-mono">{{ connectionState }}</span>
        </span>
      </div>
      <div class="mt-3 text-sm" :class="isConnected ? 'text-success' : 'text-neutral'">
        {{ isConnected ? 'Connected' : 'Disconnected' }}
      </div>
    </div>

    <div v-if="stateHistory.length > 0" class="pt-4 border-t border-base-300">
      <div class="text-sm text-neutral mb-3">Connection History</div>
      <div class="space-y-2">
        <div
          v-for="(entry, index) in stateHistory.slice().reverse()"
          :key="index"
          class="flex items-center justify-between py-2 px-3 rounded border border-base-300 text-sm"
        >
          <span :class="['badge badge-sm gap-1.5', getStateBadge(entry.state)]">
            <span class="w-1.5 h-1.5 rounded-full bg-current" />
            <span class="font-mono">{{ entry.state }}</span>
          </span>
          <span class="text-xs text-neutral font-mono">
            {{ formatTime(entry.timestamp) }}
          </span>
        </div>
      </div>
    </div>

    <div class="pt-4 border-t border-base-300 text-xs text-neutral">
      Open your browser's DevTools and throttle the network to see state changes, or navigate away and back.
    </div>
  </div>
</template>

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'" />

Next up: Simple Form with useLiveForm()

View example →