0Pricing
Vue Academy · Lekcja

Composable useWebSocket z ponownym połączeniem

Opakowanie WebSocket w composable, automatyczne ponowne łączenie z wykładniczym zwiększaniem opóźnienia oraz śledzenie statusu.

Composable useWebSocket z ponownym połączeniem to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Hermetyzowanie WebSocketów w composable

Rozproszona obsługa surowych WebSocketów w komponentach szybko staje się nieuporządkowana. Composable useWebSocket centralizuje stan połączenia, ponowne łączenie i obsługę wiadomości — a następnie można go wielokrotnie wykorzystywać.

Zbudujemy go krok po kroku.

Śledzenie stanu za pomocą refu

Należy udostępnić stan połączenia jako reaktywny ref status, aby interfejs mógł wyświetlać odznaki „Łączenie”, „Otwarte” lub „Zamknięte”.

import { ref } from "vue"

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

Funkcja connect

Należy zamknąć otwieranie gniazda w wewnętrznej funkcji connect, aby można było wywołać ją ponownie podczas ponownego łączenia. Stan status należy aktualizować przy każdym zdarzeniu cyklu życia.

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

Ponowne łączenie ze zwiększanym opóźnieniem

Natychmiastowe ponawianie połączenia w ciasnej pętli przeciąża serwer. Należy użyć wykładniczego wycofywania: po każdej nieudanej próbie czekać dłużej, aż do ustalonego limitu.

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

Resetowanie wycofywania po pomyślnym połączeniu

Po pomyślnym nawiązaniu połączenia należy wyzerować licznik prób, aby przy następnym rozłączeniu wycofywanie zaczynało się od początku, a nie od długiego opóźnienia.

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

Kolejka wiadomości podczas rozłączenia

Jeśli użytkownik wyśle wiadomość, gdy gniazdo jest rozłączone, nie należy jej tracić. Wiadomości wychodzące trzeba buforować w kolejce i opróżnić ją po otwarciu połączenia.

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

Opróżnianie kolejki

Po otwarciu gniazda należy wysłać wszystko, co zostało zgromadzone. Elementy trzeba usuwać z początku kolejki, aby zachować ich kolejność.

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

Typowane handlery wiadomości

Należy umożliwić konsumentom rejestrowanie handlerów dla poszczególnych wartości type wiadomości. Callbacki należy przechowywać w mapie i przy każdym przychodzącym frame’ie wywoływać handler na podstawie typu wiadomości.

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

Sprzątanie w onUnmounted

Composable zarządza timerami i gniazdem. Należy je zamknąć po odmontowaniu komponentu, który z niego korzysta, aby ponowne łączenie nie było uruchamiane po zniknięciu widoku.

import { onUnmounted } from "vue"

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

Unikanie ponownego łączenia po zamierzonym zamknięciu

Poprawne zamknięcie (kod 1000) wykonane podczas własnego sprzątania NIE powinno uruchamiać ponownego łączenia. Należy śledzić flagę intentional i nie planować kolejnej próby, gdy jest ustawiona.

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

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

Pełna struktura composable

Wszystkie elementy składają się w całość: połączenie przy tworzeniu, udostępnienie status, send i on, kolejkowanie podczas rozłączenia, ponowne łączenie z wycofywaniem oraz automatyczne sprzątanie.

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

Szybkie sprawdzenie

Sprawdź zrozumienie strategii ponownego łączenia.

Podsumowanie

Zbudowano solidny composable useWebSocket:

  • Ref status odzwierciedla stany CONNECTING / OPEN / CLOSED dla interfejsu.
  • Połączenie jest ponawiane z wykładniczym wycofywaniem, ograniczonym limitem, a licznik jest resetowany po sukcesie.
  • Wiadomości wychodzące są kolejkowane podczas rozłączenia i wysyłane po otwarciu połączenia.
  • Przychodzące frame’y są przekazywane do callbacków handlerów przypisanych do poszczególnych typów.
  • Timery i gniazdo są sprzątane w onUnmounted, a po zamierzonym zamknięciu ponowne łączenie jest pomijane.

Często zadawane pytania

Czy lekcja „Composable useWebSocket z ponownym połączeniem” jest bezpłatna?

Tak — pełny tekst „Composable useWebSocket z ponownym połączeniem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Composable useWebSocket z ponownym połączeniem”?

Opakowanie WebSocket w composable, automatyczne ponowne łączenie z wykładniczym zwiększaniem opóźnienia oraz śledzenie statusu. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Composable useWebSocket z ponownym połączeniem”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy WebSocket w przeglądarce
  2. Klient Socket.io z Vue
  3. Budowanie komponentu czatu czasu rzeczywistego
  4. Composable useWebSocket z ponownym połączeniem
← Powrót do Vue Academy