JavaScript Academy · Lekcja

Strategie ponownego łączenia

Proszę niezawodnie ponownie nawiązywać połączenie po jego utracie.

Lekcja 4 z 413 kroki

Strategie ponownego łączenia to bezpłatna lekcja JavaScript 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dlaczego ponownie nawiązywać połączenie?

Sieci bywają zawodne — połączenie Wi-Fi może zostać przerwane, laptop może przejść w stan uśpienia, a serwer może zostać uruchomiony ponownie. Solidny klient WebSocket wykrywa zamknięcie i automatycznie ponownie nawiązuje połączenie, dzięki czemu korzystanie z aplikacji pozostaje płynne.

Naiwne ponowne łączenie

Najprostsze podejście polega na natychmiastowym ponownym otwarciu połączenia po jego zamknięciu. Jeśli serwer nie działa, grozi to zasypywaniem go żądaniami w ciasnej pętli.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Stałe opóźnienie

Dodanie stałego opóźnienia jest łagodniejszym rozwiązaniem, ale nadal powoduje stały napływ prób i może synchronizować wielu klientów, tworząc efekt lawiny.

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Wykładnicze zwiększanie opóźnienia

Po każdej nieudanej próbie należy podwoić czas oczekiwania: 1 s, 2 s, 4 s, 8 s… aż do ustalonego maksimum. Rozprasza to ponowne próby i odciąża przeciążony serwer.

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

Dodawanie jittera

Należy nieznacznie losowo zmieniać opóźnienie, aby tysiące klientów nie próbowały połączyć się ponownie dokładnie w tej samej chwili. Pełny jitter wybiera losową wartość od 0 do obliczonego limitu.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Resetowanie po pomyślnym połączeniu

Po wywołaniu onopen należy wyzerować licznik prób, aby po następnym rozłączeniu odliczanie z wykładniczym zwiększaniem opóźnienia rozpoczęło się od początku.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

Kompletny klient z ponownym łączeniem

Należy połączyć wszystkie elementy: nawiązywanie połączenia, resetowanie po jego otwarciu i zwiększanie opóźnienia po zamknięciu.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Obsługa stanu online/offline

Należy nasłuchiwać zdarzeń online/offline przeglądarki. Podczas pracy w trybie offline trzeba wstrzymać ponowne łączenie i wywołać natychmiastową próbę po przywróceniu połączenia.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Ograniczanie liczby prób

Opcjonalnie można ograniczyć liczbę ponownych prób i poinformować użytkownika o trwałym niepowodzeniu zamiast próbować bez końca.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Ponowna synchronizacja stanu po połączeniu

Nowe połączenie nie ma kontekstu po stronie serwera. Po ponownym otwarciu należy ponownie zasubskrybować kanały i zażądać komunikatów, które pominięto podczas rozłączenia.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Unikanie zduplikowanych gniazd

Należy zabezpieczyć się przed otwarciem wielu gniazd, jeśli logika ponownego łączenia zostanie uruchomiona dwukrotnie. Trzeba śledzić bieżące gniazdo i ignorować procedury obsługi nieaktualnych gniazd.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Szybki sprawdzian

Sprawdź projektowanie ponownego łączenia.

Odpowiedz w interaktywnej lekcji

Podsumowanie: ponowne łączenie

Przejście od naiwnego ponownego łączenia do wykładniczego zwiększania opóźnienia z jitterem, resetowanie liczby prób po sukcesie, obsługa zdarzeń online/offline, ograniczanie liczby prób, ponowna synchronizacja stanu po połączeniu i unikanie zduplikowanych gniazd sprawiają, że klient jest teraz odporny na awarie.

Bezpłatny start

Ucz się JavaScript dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 59
Lekcje: 200

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Strategie ponownego łączenia” jest bezpłatna?

Tak — pełny tekst „Strategie ponownego łączenia” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Strategie ponownego łączenia”?

Proszę niezawodnie ponownie nawiązywać połączenie po jego utracie. Ćwiczysz JavaScript 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ąć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript 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 „Strategie ponownego łączenia”?

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 JavaScript Academy?

Tak. Każda lekcja JavaScript 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

← Powrót do JavaScript Academy