Podstawy WebSocket w przeglądarce
Otwieranie połączeń WebSocket, wysyłanie wiadomości i obsługa zdarzeń za pomocą natywnego API WebSocket.
Podstawy WebSocket w przeglądarce to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.
Czym jest WebSocket?
WebSocket to protokół zapewniający komunikację w trybie pełnego dupleksu przez pojedyncze połączenie TCP. W przeciwieństwie do HTTP połączenie pozostaje otwarte, dzięki czemu serwer może w dowolnym momencie wysyłać dane do klienta.
Otwieranie połączenia
Utwórz obiekt WebSocket za pomocą adresu URL ws:// lub wss://. Połączenie jest otwierane asynchronicznie.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Wysyłanie wiadomości
Użyj ws.send(), aby wysłać dane. Można wysyłać ciągi znaków lub dane binarne (ArrayBuffer, Blob). Przed wysłaniem zakoduj obiekty w formacie JSON.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Odbieranie wiadomości
Zdarzenie onmessage jest wywoływane za każdym razem, gdy serwer wysyła dane. Dane znajdują się w event.data jako ciąg znaków lub dane binarne.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Obsługa błędów i zamykanie
Obsłuż zdarzenia onerror i onclose. Zdarzenie zamknięcia zawiera kod i przyczynę wyjaśniające, dlaczego połączenie zostało zakończone.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Kody zamknięcia
Standardowe kody zamknięcia WebSocket: 1000 = normalne, 1001 = zamknięcie z powodu opuszczenia strony, 1006 = nieprawidłowe (brak ramki zamknięcia), 1008 = naruszenie zasad.
readyState
ws.readyState informuje o bieżącym stanie połączenia: CONNECTING (0), OPEN (1), CLOSING (2) lub CLOSED (3). Przed wysłaniem zawsze sprawdzaj ten stan.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Zamykanie połączenia
Wywołaj ws.close(code, reason), aby rozpocząć prawidłowe zamykanie połączenia. Serwer otrzymuje ramkę zamknięcia i może odpowiedzieć własną ramką.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Dane binarne
Ustaw ws.binaryType = 'arraybuffer' (lub 'blob'), aby odbierać wiadomości binarne. Jest to przydatne w przypadku dźwięku, obrazów lub niestandardowych protokołów.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Heartbeat / Ping-Pong
Przeglądarkowe API WebSocket nie udostępnia ramek ping, ale można zaimplementować heartbeat na poziomie aplikacji: wysyłać wiadomość ping co N sekund i oczekiwać odpowiedzi pong.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket a Server-Sent Events
Używaj WebSocket do komunikacji dwukierunkowej (czaty, gry). Używaj Server-Sent Events (SSE) tylko do strumieni z serwera do klienta (powiadomienia, kanały na żywo) — SSE działa przez zwykłe HTTP i automatycznie ponawia połączenie.
Szybkie sprawdzenie
Jaka wartość readyState WebSocket oznacza, że połączenie jest otwarte i gotowe do wysyłania?
Podsumowanie
Twórz połączenia za pomocą new WebSocket(url), wysyłaj obiekty zakodowane jako ciągi JSON przez ws.send() i obsługuj zdarzenia onmessage, onerror oraz onclose. Przed wysłaniem sprawdzaj readyState, a połączenie zamykaj prawidłowo za pomocą ws.close(1000).
Często zadawane pytania
Czy lekcja „Podstawy WebSocket w przeglądarce” jest bezpłatna?
Tak — pełny tekst „Podstawy WebSocket w przeglądarce” 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 React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Podstawy WebSocket w przeglądarce”?
Otwieranie połączeń WebSocket, wysyłanie wiadomości i obsługa zdarzeń za pomocą natywnego API WebSocket. Ćwiczysz React 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ąć React Academy?
Nie wymagamy żadnego doświadczenia. React 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 1 z 4.
Ile czasu zajmuje lekcja „Podstawy WebSocket w przeglądarce”?
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 React Academy?
Tak. Każda lekcja React 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
- Podstawy WebSocket w przeglądarce
- Używanie Socket.IO z React
- Budowanie komponentu czatu w czasie rzeczywistym
- Ponowne łączenie, obsługa błędów i czyszczenie