Vue Academy · Lekcja

Podstawy WebSocket w przeglądarce

new WebSocket(url), onopen/onmessage/onerror/onclose, send() oraz readyState.

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

Czas rzeczywisty w przeglądarce

HTTP działa na zasadzie żądanie–odpowiedź: klient wysyła żądanie, serwer odpowiada, a połączenie zostaje zamknięte. W przypadku czatu, paneli aktualizowanych na żywo lub gier wieloosobowych serwer musi móc przesyłać dane bez otrzymania żądania.

Protokół WebSocket zapewnia jedno długotrwałe, dwukierunkowe połączenie między przeglądarką a serwerem.

Otwieranie połączenia

Przeglądarka udostępnia globalny konstruktor WebSocket. Należy przekazać mu adres URL ze schematem ws:// (zwykłym) lub wss:// (TLS).

Utworzenie obiektu natychmiast rozpoczyna uzgadnianie połączenia.

const ws = new WebSocket("wss://echo.example.com/socket")

// Construction kicks off the connection.
// Nothing is sent yet — we wait for it to open.

Obsługa onopen

Połączenie nie jest gotowe natychmiast po jego utworzeniu. Zdarzenie onopen występuje po zakończeniu uzgadniania, gdy gniazdo jest gotowe do przesyłania danych.

Pierwszą wiadomość należy wysłać wewnątrz onopen, nigdy wcześniej.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  console.log("Connected!")
  ws.send("hello server")
}

Odbieranie wiadomości

Dane przychodzące docierają przez onmessage. Payload znajduje się w event.data i domyślnie jest ciągiem znaków.

Większość aplikacji wysyła dane w formacie JSON, dlatego należy ponownie przekształcić je w obiekt.

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data)
  console.log("Got:", msg.type, msg.payload)
}

Wysyłanie wiadomości

Do przesyłania danych należy użyć ws.send(). WebSockety przenoszą surowe ciągi znaków lub dane binarne, dlatego obiekty trzeba najpierw zakodować za pomocą JSON.stringify.

Obie strony uzgadniają strukturę danych — w tym przypadku jest to type oraz payload.

function sendChat(text) {
  const msg = { type: "chat", payload: { text } }
  ws.send(JSON.stringify(msg))
}

sendChat("Good morning")

Pełny cykl komunikacji

Połączenie otwierania, wysyłania i odbierania daje kompletny klient echa. Należy otworzyć gniazdo, wysłać wiadomość po jego otwarciu i wyświetlić wszystko, co wróci.

const ws = new WebSocket("wss://echo.example.com/socket")

ws.onopen = () => {
  ws.send(JSON.stringify({ type: "ping" }))
}

ws.onmessage = (event) => {
  const data = JSON.parse(event.data)
  console.log("Server replied:", data)
}

Zamykanie połączenia

Zdarzenie onclose występuje po zakończeniu połączenia — niezależnie od tego, czy wywołano ws.close(), czy połączenie sieciowe zostało zerwane. Zdarzenie zawiera numeryczny code oraz ciąg znaków reason.

Kod 1000 oznacza normalne zamknięcie.

ws.onclose = (event) => {
  console.log("Closed:", event.code, event.reason)
  if (event.code !== 1000) {
    console.log("Unexpected close — may want to reconnect")
  }
}

// Trigger a clean close yourself:
// ws.close(1000, "done")

Obsługa błędów

Zdarzenie onerror występuje w przypadku awarii transportu. Samo zdarzenie błędu celowo zawiera niewiele szczegółów ze względów bezpieczeństwa; należy potraktować je jako sygnał, że coś poszło nie tak i prawdopodobnie wkrótce nastąpi zamknięcie połączenia.

ws.onerror = (event) => {
  console.error("WebSocket error occurred")
  // onclose usually fires right after onerror.
}

Właściwość readyState

ws.readyState to liczba informująca, na jakim etapie cyklu życia znajduje się gniazdo. Zawsze należy sprawdzić tę wartość przed wysłaniem danych, aby nie wywołać błędu przy próbie użycia jeszcze nieotwartego gniazda.

0 CONNECTING
1 OPEN
2 CLOSING
3 CLOSED

function safeSend(data) {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data))
  } else {
    console.warn("Not open, readyState =", ws.readyState)
  }
}

Nazwane stałe readyState

Zamiast magicznych liczb należy używać stałych z klasy WebSocket. Są znacznie czytelniejsze niż wartości 0, 1 czy 3.

console.log(WebSocket.CONNECTING) // 0
console.log(WebSocket.OPEN)       // 1
console.log(WebSocket.CLOSING)    // 2
console.log(WebSocket.CLOSED)     // 3

if (ws.readyState === WebSocket.OPEN) {
  ws.send("ready to talk")
}

Integracja z Vue

W komponencie Vue gniazdo zwykle tworzy się w onMounted, a zamyka w onUnmounted. Procedury obsługi aktualizują reaktywne refy, które następnie renderuje szablon.

import { ref, onMounted, onUnmounted } from "vue"

const messages = ref([])
let ws

onMounted(() => {
  ws = new WebSocket("wss://echo.example.com/socket")
  ws.onmessage = (e) => messages.value.push(JSON.parse(e.data))
})

onUnmounted(() => ws && ws.close())

Szybkie sprawdzenie

Proszę sprawdzić swoje rozumienie wartości readyState WebSocket.

Podsumowanie

W tej lekcji poznano:

new WebSocket(url) rozpoczyna dwukierunkowe połączenie za pomocą ws:// lub wss://.
onopen występuje, gdy gniazdo jest gotowe; dane należy wysyłać dopiero później.
onmessage dostarcza dane w event.data — aby uzyskać obiekt, należy przeanalizować JSON.
ws.send(JSON.stringify(msg)) przesyła dane.
onclose i onerror obsługują zamykanie połączenia oraz awarie.
readyState przyjmuje wartości: 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Podstawy WebSocket w przeglądarce”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() oraz readyState. Ć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 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 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

Podstawy WebSocket w przeglądarce
Klient Socket.io z Vue
Budowanie komponentu czatu czasu rzeczywistego
Composable useWebSocket z ponownym połączeniem

← Powrót do Vue Academy