JavaScript Academy · Lekcja

Otwieranie połączenia WebSocket

Proszę połączyć się z serwerem WebSocket.

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

Czym są WebSockets?

WebSockets zapewniają trwałe, pełnodupleksowe połączenie między przeglądarką a serwerem za pośrednictwem pojedynczego połączenia TCP. W przeciwieństwie do modelu żądanie/odpowiedź HTTP każda ze stron może wysłać komunikat w dowolnym momencie — to idealne rozwiązanie dla czatów, kanałów na żywo i gier.

Schematy ws i wss

Adresy URL WebSocket używają ws:// (bez szyfrowania) lub wss:// (szyfrowane za pomocą TLS). W środowisku produkcyjnym należy zawsze preferować wss://, podobnie jak https.

const url = "wss://example.com/socket";

Nawiązywanie połączenia

Gniazdo należy utworzyć za pomocą new WebSocket(url). Uzgadnianie połączenia rozpoczyna się natychmiast, ale połączenie nie jest gotowe, dopóki nie zostanie otwarte.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

Zdarzenie onopen

onopen jest wywoływane po zakończeniu uzgadniania połączenia. Dopiero wtedy można bezpiecznie wysyłać dane.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

Alternatywa dla addEventListener

Zamiast właściwości on* można użyć addEventListener, aby dołączyć wiele procedur obsługi.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

Stan połączenia readyState

readyState informuje o cyklu życia połączenia: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Podprotokoły

Drugi argument służy do negocjowania podprotokołu. Serwer wybiera jeden z nich, a po otwarciu połączenia można odczytać go z socket.protocol.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Same-origin i mixed content

Strona wczytana przez https może otwierać tylko połączenia wss:// — otwarcie ws:// zostanie zablokowane jako mieszana zawartość. Należy odpowiednio zaplanować adresy URL.

Typ danych binarnych

Należy ustawić binaryType na "blob" (wartość domyślna) lub "arraybuffer", aby określić sposób dostarczania ramek binarnych.

socket.binaryType = "arraybuffer";

Minimalny klient

Po połączeniu wszystkich elementów należy otworzyć połączenie, rejestrować jego stan i prawidłowo je zamykać.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Limity czasu połączenia

WebSockets nie mają wbudowanego limitu czasu nawiązania połączenia. Należy użyć licznika czasu, który zamknie gniazdo, jeśli zdarzenie onopen nie zostanie wywołane w odpowiednim czasie.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Szybki sprawdzian

Sprawdź podstawy nawiązywania połączeń.

Podsumowanie: nawiązywanie połączenia

Poznano schematy ws/wss, utworzono gniazdo za pomocą new WebSocket, obsłużono onopen, sprawdzono readyState, wynegocjowano podprotokoły i dodano limit czasu nawiązania połączenia. Następny temat: wysyłanie i odbieranie komunikatów.

Często zadawane pytania

Czy lekcja „Otwieranie połączenia WebSocket” jest bezpłatna?

Tak — pełny tekst „Otwieranie połączenia WebSocket” 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 „Otwieranie połączenia WebSocket”?

Proszę połączyć się z serwerem WebSocket. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Otwieranie połączenia WebSocket”?

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