WebSockets

A WebSocket is one connection that stays open and carries messages in both directions. The browser creates it with new WebSocket(url), over ws:// locally and wss:// in production. It exists because polling an HTTP endpoint spends a request per check and still shows the change late.

Where the connection lives

Put it in a composable: a plain function that uses Vue's reactivity APIs and returns refs. The composable opens the socket, keeps the connection state in a ref, and registers its own teardown with onScopeDispose(fn, failSilently?), so every component that calls it gets cleanup without writing any. The second argument of onScopeDispose arrived in Vue 3.5 and suppresses the warning when there is no active scope, which is what you want in a composable that may also be called outside a component.

Receiving a message means listening for message and writing event.data into a ref. The template updates because the ref changed. Note the shorthand: ws.onmessage = handler is the same subscription as ws.addEventListener('message', handler), with one difference, the property holds a single handler and assigning again replaces it.

Reconnecting

A WebSocket never reconnects by itself. On close, schedule connect() again after a delay that doubles per attempt and is capped: 1s, 2s, 4s, up to 30s. Reset the counter in the open handler.

What trips people up

send() throws InvalidStateError while readyState is WebSocket.CONNECTING (0), so test for WebSocket.OPEN (1) first.

// src/composables/useSocket.ts
import { onScopeDispose, readonly, ref, shallowRef, toValue } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

export type SocketStatus = 'connecting' | 'open' | 'closed'

export function useSocket(url: MaybeRefOrGetter<string>) {
  const status = ref<SocketStatus>('closed')
  const lastMessage = ref<string | null>(null)
  const socket = shallowRef<WebSocket | null>(null)
  let attempts = 0
  let timer: ReturnType<typeof setTimeout> | undefined
  let stopped = false

  function connect() {
    status.value = 'connecting'
    const ws = new WebSocket(toValue(url))
    socket.value = ws
    ws.onopen = () => {
      attempts = 0
      status.value = 'open'
    }
    ws.onmessage = (event: MessageEvent<string>) => {
      lastMessage.value = event.data
    }
    ws.onclose = () => {
      if (socket.value !== ws) return
      status.value = 'closed'
      if (stopped) return
      attempts += 1
      timer = setTimeout(connect, Math.min(1000 * 2 ** (attempts - 1), 30000))
    }
  }

  function send(data: string) {
    const ws = socket.value
    if (ws && ws.readyState === WebSocket.OPEN) ws.send(data)
  }

  function close() {
    stopped = true
    clearTimeout(timer)
    socket.value?.close(1000, 'client closed')
  }

  connect()
  onScopeDispose(close, true)
  return { status: readonly(status), lastMessage: readonly(lastMessage), send, close }
}

<!-- src/components/TickerPanel.vue -->
<script setup lang="ts">
import { useSocket } from '@/composables/useSocket'

const { status, lastMessage, send } = useSocket('wss://stream.example.com/ticks')

function ping() {
  send(JSON.stringify({ type: 'ping' }))
}
</script>

<template>
  <section class="panel">
    <p>Connection: {{ status }}</p>
    <p v-if="lastMessage">Last frame: {{ lastMessage }}</p>
    <p v-else>Waiting for the first frame</p>
    <button type="button" :disabled="status !== 'open'" @click="ping">Ping</button>
  </section>
</template>

<style scoped>
.panel {
  display: grid;
  gap: 0.5rem;
}
</style>

// src/lib/backoff.ts
export function backoffDelay(attempt: number, base = 1000, cap = 30000) {
  return Math.min(cap, base * 2 ** (attempt - 1))
}

console.log([1, 2, 3, 4, 5, 6].map((n) => backoffDelay(n)))
// Output: [ 1000, 2000, 4000, 8000, 16000, 30000 ]

console.log(backoffDelay(3, 250, 5000))
// Output: 1000

// src/composables/useSocket.ts (inside useSocket, next to connect and close)
function reconnect() {
  clearTimeout(timer)
  attempts = 0
  stopped = false
  const previous = socket.value
  connect()
  previous?.close(1000, 'reconnecting')
}

// then return it alongside the rest:
// return { status: readonly(status), lastMessage: readonly(lastMessage), send, close, reconnect }