JavaScript Academy · leksjon

Sende og motta meldinger

Utveksle data med send og onmessage.

Leksjon 2 av 413 trinn

Sende og motta meldinger er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Sende tekst

Når socketen er åpen, sender socket.send(string) en tekstmelding til serveren.

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

Motta med onmessage

onmessage utløses for hvert innkommende bilde. Dataene finnes i event.data.

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

JSON-innramming

WebSocket overfører råstrenger. For å sende strukturerte data serialiserer du dem med JSON.stringify og analyserer dem ved mottak.

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

Ruting etter meldingstype

Et vanlig mønster er å ta med et type-felt og distribuere meldingen basert på dette.

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

Sende binærdata

send godtar også ArrayBuffer, typede matriser og Blob for binærdata.

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

Motta binærdata

Med binaryType = "arraybuffer" er event.data en ArrayBuffer som du kan pakke inn i en typet matrise.

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

Tilbakepress med bufferedAmount

bufferedAmount rapporterer hvor mange byte som ligger i kø, men ennå ikke er sendt. Kontroller verdien før du oversvømmer socketen, slik at minnebruken ikke vokser uten grenser.

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

Hjerteslag

Send periodiske ping-meldinger, slik at begge sider vet at tilkoblingen er aktiv, og mellomliggende tjenester ikke lukker inaktive tilkoblinger.

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

Forespørsel/svar over WebSocket

Merk utgående meldinger med en ID, og oppfyll et ventende løfte når det tilsvarende svaret kommer.

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); }
};

Kø før åpning

Hvis du kan komme til å sende før socketen er åpnet, legger du meldingene i en buffer og sender dem i 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; };

Validere innkommende data

Stol aldri blindt på data fra nettet. Pakk inn JSON.parse i try/catch, og valider strukturen før du bruker dataene.

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

Rask sjekk

Test meldingshåndtering.

Besvar den i den interaktive leksjonen

Oppsummering: Sende og motta

Du har sendt tekst og binærdata, håndtert onmessage, rammet inn data som JSON, rutet etter type, overvåket bufferedAmount for å håndtere tilbakepress, lagt til hjerteslag og lagt meldinger i kø før socketen ble åpnet. Neste trinn er tilkoblingens livssyklus.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Sende og motta meldinger» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Sende og motta meldinger», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Sende og motta meldinger»?

Utveksle data med send og onmessage. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Sende og motta meldinger»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy