Automatyczne ponowne łączenie po stronie klienta
Zbuduj odporną przeglądarkową aplikację kliencką WebSocket, która wykrywa zerwania połączenia i automatycznie łączy się ponownie z wykładniczym opóźnieniem oraz kolejkowaniem wiadomości.
Automatyczne ponowne łączenie po stronie klienta to bezpłatna lekcja WebSockets & Realtime Systems Programming 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 WebSockets & Realtime Systems Programming, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs WebSockets & Realtime Systems Programming zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Connections Drop
Networks are unreliable. Wi-Fi hiccups, tabs sleep, and servers restart. A good client detects a closed socket and reconnects without the user noticing.
Detecting a Drop
The browser fires close when the connection ends and error on failures. Reconnection logic hooks into close.
ws.addEventListener('close', () => {
scheduleReconnect();
});Naive Reconnect Is Risky
Reconnecting instantly in a tight loop can hammer a struggling server. Instead, wait longer after each failed attempt.
Exponential Backoff
Double the delay each attempt, up to a cap, so a recovering server is not overwhelmed.
let attempt = 0;
function delay() {
return Math.min(1000 * 2 ** attempt, 30000);
}Adding Jitter
If many clients reconnect at once, they create a thundering herd. Random jitter spreads them out.
function delayWithJitter() {
return delay() * (0.5 + Math.random() * 0.5);
}The Reconnect Function
Wrap connection creation so each attempt re-binds handlers and schedules the next retry on failure.
function connect() {
ws = new WebSocket(url);
ws.addEventListener('open', onOpen);
ws.addEventListener('close', scheduleReconnect);
}Resetting on Success
When a connection opens successfully, reset the attempt counter so future drops start backoff fresh.
function onOpen() {
attempt = 0;
flushQueue();
}Queuing Messages While Down
If the user sends while disconnected, buffer the message and send it once reconnected.
const queue = [];
function send(data) {
if (ws.readyState === WebSocket.OPEN) ws.send(data);
else queue.push(data);
}Flushing the Queue
On reconnect, drain the buffer in order.
function flushQueue() {
while (queue.length) ws.send(queue.shift());
}Giving Up Gracefully
After a max number of attempts, surface an error to the user rather than retrying forever.
function scheduleReconnect() {
if (++attempt > 10) return showOffline();
setTimeout(connect, delayWithJitter());
}Best Practices
Build resilient clients:
- Use exponential backoff with jitter
- Reset state on a successful open
- Queue outgoing messages while offline
- Cap retries and inform the user
Quick Check
Test your reconnection knowledge.
Recap
You built an auto-reconnecting client:
- Hook the
closeevent to schedule retries - Use exponential backoff with jitter
- Reset attempts on open
- Queue and flush messages around outages
Your client now survives flaky networks.
Ucz się WebSockets & Realtime Systems Programming 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
- 12
- Lekcje
- 47
Często zadawane pytania
Czy lekcja „Automatyczne ponowne łączenie po stronie klienta” jest bezpłatna?
Tak — pełny tekst „Automatyczne ponowne łączenie po stronie klienta” 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 WebSockets & Realtime Systems Programming, przejdź na CoddyKit PRO. Kurs WebSockets & Realtime Systems Programming zawiera 4 lekcji w sumie.
Co nauczysz się w „Automatyczne ponowne łączenie po stronie klienta”?
Zbuduj odporną przeglądarkową aplikację kliencką WebSocket, która wykrywa zerwania połączenia i automatycznie łączy się ponownie z wykładniczym opóźnieniem oraz kolejkowaniem wiadomości. Ćwiczysz WebSockets & Realtime Systems Programming 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ąć WebSockets & Realtime Systems Programming?
Nie wymagamy żadnego doświadczenia. WebSockets & Realtime Systems Programming 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 „Automatyczne ponowne łączenie po stronie klienta”?
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 WebSockets & Realtime Systems Programming?
Tak. Każda lekcja WebSockets & Realtime Systems Programming 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
- Podstawy przeglądarkowego API WebSocket
- Wysyłanie i odbieranie danych
- Obsługa zdarzeń po stronie klienta
- Automatyczne ponowne łączenie po stronie klienta