JavaScript Academy · Lekcja

Wysyłanie i odbieranie wiadomości

Proszę wymieniać dane za pomocą send i onmessage.

Wysyłanie i odbieranie wiadomości to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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.

Wysyłanie tekstu

Po otwarciu połączenia socket.send(string) przesyła komunikat tekstowy do serwera.

socket.onopen = () => {
  socket.send("ping");
};

Odbieranie za pomocą onmessage

onmessage jest wywoływane dla każdej przychodzącej ramki. Dane znajdują się w event.data.

socket.onmessage = (event) => {
  console.log("Received:", event.data);
};

Formatowanie komunikatów w JSON

WebSockets przesyłają surowe ciągi znaków. Aby wysyłać dane o strukturze, należy je serializować za pomocą JSON.stringify i analizować po odebraniu.

socket.send(JSON.stringify({ type: "chat", text: "hi" }));
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  console.log(msg.type, msg.text);
};

Kierowanie według typu komunikatu

Typowy wzorzec polega na dodaniu pola type i wybraniu procedury obsługi na jego podstawie.

socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  switch (msg.type) {
    case "chat": showChat(msg); break;
    case "presence": updatePresence(msg); break;
  }
};

Wysyłanie danych binarnych

send przyjmuje również ArrayBuffer, tablice typowane i Blob jako dane binarne.

const bytes = new Uint8Array([1, 2, 3, 4]);
socket.send(bytes.buffer);

Odbieranie danych binarnych

Gdy binaryType = "arraybuffer", event.data jest obiektem ArrayBuffer, który można opakować w tablicę typowaną.

socket.binaryType = "arraybuffer";
socket.onmessage = (e) => {
  if (e.data instanceof ArrayBuffer) {
    const view = new Uint8Array(e.data);
    console.log(view.length);
  }
};

Kontrola przeciążenia za pomocą bufferedAmount

bufferedAmount informuje, ile bajtów znajduje się w kolejce, ale nie zostało jeszcze wysłanych. Należy sprawdzać tę wartość przed zalewaniem gniazda danymi, aby uniknąć nieograniczonego wzrostu zużycia pamięci.

if (socket.bufferedAmount < 1_000_000) {
  socket.send(payload);
}

Sygnały heartbeat

Należy okresowo wysyłać komunikaty ping, aby obie strony wiedziały, że połączenie działa, a urządzenia pośredniczące nie zamykały bezczynnych połączeń.

setInterval(() => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify({ type: "ping" }));
  }
}, 30000);

Żądanie/odpowiedź przez WebSocket

Należy oznaczać wychodzące komunikaty identyfikatorem i rozwiązywać oczekujący obiekt Promise po nadejściu pasującej odpowiedzi.

const pending = new Map();
function request(payload) {
  const id = crypto.randomUUID();
  socket.send(JSON.stringify({ id, ...payload }));
  return new Promise((res) => pending.set(id, res));
}
socket.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (pending.has(msg.id)) { pending.get(msg.id)(msg); pending.delete(msg.id); }
};

Kolejkowanie przed otwarciem

Jeśli komunikaty mogą być wysyłane przed otwarciem gniazda, należy je buforować i opróżnić bufor w procedurze onopen.

const queue = [];
function safeSend(data) {
  if (socket.readyState === WebSocket.OPEN) socket.send(data);
  else queue.push(data);
}
socket.onopen = () => { queue.forEach((d) => socket.send(d)); queue.length = 0; };

Weryfikowanie przychodzących danych

Nigdy nie należy ufać danym przesyłanym przez sieć. Wywołanie JSON.parse należy umieścić w bloku try/catch i przed użyciem sprawdzić strukturę danych.

socket.onmessage = (e) => {
  let msg;
  try { msg = JSON.parse(e.data); }
  catch { return; }
  if (typeof msg.type !== "string") return;
  handle(msg);
};

Szybki sprawdzian

Sprawdź obsługę komunikatów.

Podsumowanie: wysyłanie i odbieranie

Wysyłano dane tekstowe i binarne, obsłużono onmessage, opakowano dane w JSON, kierowano je według typu, monitorowano bufferedAmount w celu kontroli przeciążenia, dodano sygnały heartbeat i kolejkowano komunikaty przed otwarciem gniazda. Następny temat: cykl życia połączenia.

Często zadawane pytania

Czy lekcja „Wysyłanie i odbieranie wiadomości” jest bezpłatna?

Tak — pełny tekst „Wysyłanie i odbieranie wiadomości” 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 „Wysyłanie i odbieranie wiadomości”?

Proszę wymieniać dane za pomocą send i onmessage. Ć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 2 z 4.

Ile czasu zajmuje lekcja „Wysyłanie i odbieranie wiadomości”?

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