Vue Academy · Lezione

Composable useWebSocket con riconnessione

Wrapping di WebSocket in un composable, riconnessione automatica con backoff esponenziale, monitoraggio dello stato.

Composable useWebSocket con riconnessione è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Incapsulare i WebSocket in un composable

La gestione diretta dei WebSocket distribuita tra i componenti diventa caotica. Un composable useWebSocket centralizza lo stato della connessione, la riconnessione e la gestione dei messaggi, consentendo di riutilizzarlo ovunque.

Lo costruiremo un pezzo alla volta.

Monitorare lo stato con un ref

Esponga lo stato della connessione come ref status reattivo, così l'interfaccia utente può mostrare i badge "Connessione", "Aperta" o "Chiusa".

import { ref } from "vue"

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

La funzione connect

Incapsuli l'apertura del socket in una funzione interna connect, così potrà richiamarla in seguito per riconnettersi. Aggiorni status a ogni evento del ciclo di vita.

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

Riconnessione con ritardo crescente

Riconnettersi istantaneamente in un ciclo serrato sovraccarica il server. Utilizzi il backoff esponenziale: attenda più a lungo dopo ogni tentativo fallito, fino a raggiungere un limite massimo.

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

Reimpostare il backoff in caso di successo

Quando una connessione riesce, reimposti il contatore dei tentativi, così la disconnessione successiva avvierà il backoff dall'inizio invece di partire da un ritardo già lungo.

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

Una coda di messaggi quando si è disconnessi

Se l'utente invia un messaggio mentre il socket è disconnesso, non deve perderlo. Inserisca i messaggi in uscita in una coda e li invii tutti quando la connessione viene ristabilita.

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

Svuotare la coda

Quando il socket si apre, svuoti tutto ciò che si è accumulato. Rimuova gli elementi dall'inizio della coda per preservare l'ordine.

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

Gestori di messaggi tipizzati

Consenta ai consumer di registrare gestori per ogni type di messaggio. Memorizzi i callback in una mappa e li distribuisca in base al tipo di messaggio per ogni frame in arrivo.

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)
}

Pulizia in onUnmounted

Il composable gestisce timer e socket. Li disattivi quando il componente che lo utilizza viene smontato, così la riconnessione non continuerà a essere eseguita dopo che la vista è stata rimossa.

import { onUnmounted } from "vue"

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

Evitare la riconnessione dopo una chiusura intenzionale

Una chiusura corretta (codice 1000) eseguita durante il proprio teardown NON deve attivare una riconnessione. Tenga traccia di un flag intentional e ignori la pianificazione quando è impostato.

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

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

Struttura completa del composable

Tutto converge: connessione alla creazione, esposizione di status, send e on, accodamento quando il socket è disconnesso, riconnessione con backoff e pulizia automatica.

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://...")

Verifica rapida

Verifichi la comprensione della strategia di riconnessione.

Riepilogo

Ha costruito un composable useWebSocket robusto:

Un ref status riflette CONNECTING / OPEN / CLOSED per l'interfaccia utente.
Si riconnette con backoff esponenziale, con un limite massimo, e reimposta il contatore in caso di successo.
Accoda i messaggi in uscita quando il socket è disconnesso e li invia tutti alla riapertura.
Distribuisce i frame in arrivo ai callback dei gestori specifici per tipo.
Esegue la pulizia dei timer e del socket in onUnmounted, evitando la riconnessione dopo una chiusura intenzionale.

Domande Frequenti

La lezione «Composable useWebSocket con riconnessione» è gratuita?

Sì — il testo completo di «Composable useWebSocket con riconnessione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Composable useWebSocket con riconnessione»?

Wrapping di WebSocket in un composable, riconnessione automatica con backoff esponenziale, monitoraggio dello stato. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Composable useWebSocket con riconnessione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Nozioni di base sui WebSocket nel browser
Client Socket.io con Vue
Creazione di un componente chat in tempo reale
Composable useWebSocket con riconnessione

← Torna a Vue Academy