Frontend Academy · leksjon

WebSocket API: open, message, close og error

Opprett en WebSocket-tilkobling, send og motta meldinger i message-håndtereren, og håndter tilkoblingsfeil og korrekt lukking.

Leksjon 1 av 414 trinn

WebSocket API: open, message, close og error er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor WebSockets?

HTTP følger en forespørsels-/svarmodell. For sanntidsapper (chat, flerspillerspill, direkteoppdateringer) trenger du vedvarende toveis kommunikasjon. WebSockets gir deg én enkelt TCP-tilkobling som forblir åpen, slik at begge sider kan sende meldinger når som helst.

Opprette en WebSocket

Opprett en WebSocket med en URL av typen ws:// eller wss://. Nettleseren håndterer oppgraderingshåndtrykket.

const ws = new WebSocket('wss://api.example.com/realtime');

// Always use wss:// (secure) in production

De fire hendelsene

WebSocket har fire hendelsestyper: open (tilkoblet), message (data mottatt), close (tilkoblingen avsluttet) og error (problem).

ws.addEventListener('open', () => {
  console.log('Connected');
  ws.send(JSON.stringify({ type: 'subscribe', channel: 'updates' }));
});

ws.addEventListener('message', (event) => {
  const data = JSON.parse(event.data);
  console.log('Received:', data);
});

ws.addEventListener('close', (event) => {
  console.log('Closed:', event.code, event.reason);
});

ws.addEventListener('error', (event) => {
  console.error('Error:', event);
});

Sende meldinger

Bruk ws.send(). Den godtar strenger, ArrayBuffers, Blobs eller ArrayBufferView. For strukturerte data må du først bruke JSON.stringify.

ws.send('hello');
ws.send(JSON.stringify({ type: 'chat', text: 'Hi' }));

// Binary:
const buffer = new ArrayBuffer(8);
ws.send(buffer);

Motta meldinger

Undersøk event.data — typen samsvarer med det serveren sendte. Bruk JSON.parse for payloads som er objekter.

ws.addEventListener('message', (event) => {
  // typeof event.data: string | ArrayBuffer | Blob
  if (typeof event.data === 'string') {
    const msg = JSON.parse(event.data);
    handleMessage(msg);
  }
});

Tilkoblingstilstand (readyState)

Sjekk ws.readyState: CONNECTING=0, OPEN=1, CLOSING=2, CLOSED=3. Ikke send før OPEN.

if (ws.readyState === WebSocket.OPEN) {
  ws.send(message);
} else {
  console.warn('Not connected yet');
}

Avslutte på en ryddig måte

Kall ws.close(code, reason). Vanlige avslutningskoder: 1000 (normal), 1001 (på vei bort), 1008 (brudd på retningslinjer), 1011 (serverfeil).

ws.close(1000, 'User logged out');

Strategi for ny tilkobling

WebSockets kobles fra ved nettverksendringer, omstarter av serveren og lignende. Implementer ny tilkobling med eksponentiell backoff.

let reconnectDelay = 1000;

function connect() {
  const ws = new WebSocket('wss://api/realtime');
  ws.addEventListener('open', () => { reconnectDelay = 1000; });
  ws.addEventListener('close', () => {
    setTimeout(connect, reconnectDelay);
    reconnectDelay = Math.min(reconnectDelay * 2, 30000);
  });
  return ws;
}

Hjerteslag / holde tilkoblingen aktiv

Inaktive WebSocket-tilkoblinger blir avsluttet av proxyer og lastbalansere etter omtrent 60 sekunder. Send en ping hvert 25.–30. sekund for å holde tilkoblingen aktiv.

let pingInterval;
ws.addEventListener('open', () => {
  pingInterval = setInterval(() => {
    if (ws.readyState === WebSocket.OPEN) {
      ws.send(JSON.stringify({ type: 'ping' }));
    }
  }, 25000);
});
ws.addEventListener('close', () => clearInterval(pingInterval));

Autentisering

WebSockets støtter ikke egendefinerte headere. Alternativer: 1) Autentiser via et token i spørringsstrengen (?token=jwt) i WS-URL-en. 2) Send en autentiseringsmelding etter open. 3) Bruk en cookie (fungerer automatisk for same-origin).

// Query string:
const ws = new WebSocket(`wss://api/realtime?token=${jwt}`);

// Auth message:
ws.addEventListener('open', () => {
  ws.send(JSON.stringify({ type: 'auth', token: jwt }));
});

React-hook for WebSockets

Pakk inn livssyklusen til WS i en egendefinert hook for å unngå lekkende tilkoblinger.

function useWebSocket(url) {
  const [messages, setMessages] = useState([]);
  const wsRef = useRef(null);

  useEffect(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;
    ws.addEventListener('message', (e) => {
      setMessages(m => [...m, JSON.parse(e.data)]);
    });
    return () => ws.close();
  }, [url]);

  return { messages, send: (msg) => wsRef.current?.send(JSON.stringify(msg)) };
}

WebSocket vs. HTTP/2 vs. SSE

WebSocket: full dupleks, begge sider kan sende. HTTP/2 server push: avviklet. Server-Sent Events: bare fra server til klient, enklere og med automatisk ny tilkobling. Velg WS når klienten også må kunne sende (chat), og SSE for enveisvarsler.

Hurtigsjekk

Hva er den standardiserte WebSocket-avslutningskoden for en normal, tilsiktet avslutning (for eksempel når brukeren logger ut)?

Besvar den i den interaktive leksjonen

Oppsummering: WebSocket API

new WebSocket('wss://...') åpner tilkoblingen. Fire hendelser: open, message, close og error. send() godtar string/ArrayBuffer/Blob; bruk JSON.stringify for objekter. Sjekk readyState før sending. Bruk close(1000) for en ryddig avslutning. Koble til på nytt med eksponentiell backoff. Send et hjerteslag hvert 25. sekund for å holde tilkoblingen aktiv. Autentiser via spørringsstrengen eller en autentiseringsmelding. Pakk inn løsningen i en hook for React.

Gratis å komme i gang

Lær deg HTML 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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «WebSocket API: open, message, close og error» gratis?

Ja – hele teksten i «WebSocket API: open, message, close og error» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «WebSocket API: open, message, close og error»?

Opprett en WebSocket-tilkobling, send og motta meldinger i message-håndtereren, og håndter tilkoblingsfeil og korrekt lukking. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 1 av 4.

Hvor lang tid tar leksjonen «WebSocket API: open, message, close og error»?

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 Frontend Academy-leksjonen?

Ja. Alle Frontend 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

WebSocket API: open, message, close og error
Integrasjon av Socket.io-klienten
Server-Sent Events for strømming én vei
Mønstre for sanntidsgrensesnitt

← Tilbake til Frontend Academy