0Pricing
Vue Academy · Lektion

useWebSocket-Composable mit Wiederverbindung

WebSocket in ein Composable kapseln, automatische Wiederverbindung mit exponentiellem Backoff und Statusverfolgung

useWebSocket-Composable mit Wiederverbindung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

WebSockets in ein Composable kapseln

Wenn die Verarbeitung von WebSockets über mehrere Komponenten verteilt ist, wird der Code schnell unübersichtlich. Ein useWebSocket-Composable zentralisiert den Verbindungsstatus, die Wiederverbindung und die Nachrichtenverarbeitung – und Sie können es überall wiederverwenden.

Wir erstellen es Schritt für Schritt.

Den Status mit einem Ref verfolgen

Stellen Sie den Verbindungsstatus als reaktiven status-Ref bereit, damit die Benutzeroberfläche Status-Badges wie „Connecting“, „Open“ oder „Closed“ anzeigen kann.

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

Die Funktion connect

Kapseln Sie das Öffnen des Sockets in einer inneren Funktion connect, damit Sie sie später erneut für eine Wiederverbindung aufrufen können. Aktualisieren Sie status bei jedem Lebenszyklus-Ereignis.

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

Wiederverbindung mit zunehmender Wartezeit

Wenn Sie in einer engen Schleife sofort wieder eine Verbindung herstellen, wird der Server überlastet. Verwenden Sie exponential backoff: Warten Sie nach jedem fehlgeschlagenen Versuch länger, bis eine Obergrenze erreicht ist.

let attempts = 0
function scheduleReconnect() {
  attempts++
  const delay = Math.min(1000 * 2 ** attempts, 30000)
  setTimeout(connect, delay)
}

Backoff bei Erfolg zurücksetzen

Sobald eine Verbindung erfolgreich hergestellt wurde, setzen Sie den Versuchszähler zurück. So beginnt der Backoff bei der nächsten Trennung wieder von vorn und nicht mit einer langen Wartezeit.

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

Eine Nachrichtenwarteschlange bei getrennter Verbindung

Wenn eine Benutzerin oder ein Benutzer bei unterbrochener Verbindung eine Nachricht sendet, darf diese nicht verloren gehen. Puffern Sie ausgehende Nachrichten in einer Warteschlange und senden Sie sie, sobald die Verbindung geöffnet wird.

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

Die Warteschlange leeren

Wenn der Socket geöffnet wird, verarbeiten Sie alles, was sich angesammelt hat. Entfernen Sie die Elemente am Anfang der Warteschlange mit Shift, damit die Reihenfolge erhalten bleibt.

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

Typisierte Nachrichten-Handler

Ermöglichen Sie es den Konsumenten, Handler für jeden Nachrichtentyp type zu registrieren. Speichern Sie die Callbacks in einer Map und rufen Sie bei jedem eingehenden Frame den zum Nachrichtentyp passenden Handler auf.

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

Aufräumen in onUnmounted

Das Composable verwaltet Timer und einen Socket. Beenden Sie beide, wenn die verwendende Komponente ausgehängt wird, damit nach dem Entfernen der Ansicht keine Wiederverbindungen mehr ausgelöst werden.

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

Wiederverbindung nach absichtlichem Schließen vermeiden

Ein sauberes Schließen (Code 1000) durch Ihr eigenes Aufräumen darf KEINE Wiederverbindung auslösen. Verfolgen Sie dies mit einem intentional-Flag und überspringen Sie die Planung, wenn es gesetzt ist.

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

Der vollständige Aufbau des Composables

Nun greifen alle Teile ineinander: Beim Erstellen verbinden, status, send und on bereitstellen, bei unterbrochener Verbindung Nachrichten einreihen, mit Backoff wiederverbinden und automatisch aufräumen.

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

Schnelltest

Überprüfen Sie Ihr Verständnis der Strategie für die Wiederverbindung.

Zusammenfassung

Sie haben ein robustes useWebSocket-Composable erstellt:

  • Ein status-Ref bildet CONNECTING / OPEN / CLOSED für die Benutzeroberfläche ab.
  • Stellen Sie mit exponentiellem Backoff, einer Obergrenze und einem bei Erfolg zurückgesetzten Zähler die Verbindung wieder her.
  • Reihen Sie ausgehende Nachrichten bei getrennter Verbindung ein und senden Sie sie beim Öffnen der Verbindung.
  • Leiten Sie eingehende Frames an Handler-Callbacks für die jeweiligen Typen weiter.
  • Räumen Sie Timer und Socket in onUnmounted auf und überspringen Sie die Wiederverbindung nach einem absichtlichen Schließen.

Häufig gestellte Fragen

Ist die Lektion „useWebSocket-Composable mit Wiederverbindung“ kostenlos?

Ja — der vollständige Text von „useWebSocket-Composable mit Wiederverbindung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „useWebSocket-Composable mit Wiederverbindung“?

WebSocket in ein Composable kapseln, automatische Wiederverbindung mit exponentiellem Backoff und Statusverfolgung Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „useWebSocket-Composable mit Wiederverbindung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. WebSocket-Grundlagen im Browser
  2. Socket.io-Client mit Vue
  3. Eine Echtzeit-Chatkomponente erstellen
  4. useWebSocket-Composable mit Wiederverbindung
← Zurück zu Vue Academy