Vue Academy · Lektion

Grundlæggende WebSocket i browseren

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

Lektion 1 af 413 trin

Grundlæggende WebSocket i browseren er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

Realtid i browseren

HTTP bruger forespørgsel/svar: Klienten spørger, serveren svarer, og forbindelsen lukkes. Til chat, livekontrolpaneler eller multiplayerspil skal serveren kunne sende data uden at blive spurgt.

WebSocket-protokollen giver dig én langvarig, tovejsforbindelse mellem browseren og serveren.

Åbning af en forbindelse

Browseren leveres med den globale WebSocket-konstruktør. Giv den en URL med skemaet ws:// (uden kryptering) eller wss:// (TLS).

Når objektet oprettes, starter forbindelsens håndtryk med det samme.

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

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

onopen-håndteringen

Forbindelsen er ikke klar i samme øjeblik, du opretter den. Hændelsen onopen udløses, når håndtrykket er fuldført, og socketforbindelsen er klar til at overføre data.

Send din første meddelelse inde i onopen, aldrig før.

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

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

Modtagelse af meddelelser

Indgående data ankommer via onmessage. Nyttedataene findes i event.data og er som standard en tekststreng.

De fleste apps sender JSON, så du fortolker det tilbage til et objekt.

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

Afsendelse af meddelelser

Brug ws.send() til at sende data. WebSockets transporterer rå tekststrenge eller binære data, så kod først objekter med JSON.stringify.

Begge sider er enige om en struktur — her en type plus et payload.

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

sendChat("Good morning")

En komplet tur-retur

Når du samler åbning, afsendelse og modtagelse, får du en komplet ekkoklient. Åbn socketforbindelsen, send ved åbning, og log det, der kommer tilbage.

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

Lukning af forbindelsen

Hændelsen onclose udløses, når forbindelsen slutter — uanset om du kaldte ws.close(), eller netværket blev afbrudt. Hændelsen indeholder en numerisk code-værdi og en reason-tekststreng.

Koden 1000 betyder en normal lukning.

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")

Håndtering af fejl

Hændelsen onerror udløses ved transportfejl. Selve fejlhændelsen indeholder med vilje kun få detaljer af hensyn til sikkerheden; betragt den som et signal om, at noget gik galt, og at forbindelsen sandsynligvis snart lukkes.

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

Egenskaben readyState

ws.readyState er et tal, der fortæller dig, hvor socketforbindelsen er i sin livscyklus. Kontrollér altid værdien før afsendelse, så du ikke udløser en fejl på en forbindelse, der endnu ikke er åbnet.

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

Navngivne readyState-konstanter

Brug konstanterne på WebSocket-klassen i stedet for magiske tal. De er langt tydeligere end 0, 1 eller 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")
}

Samling af det hele i Vue

Inde i en Vue-komponent opretter du normalt socketforbindelsen i onMounted og lukker den ned i onUnmounted. Håndteringerne opdaterer reaktive refs, som din skabelon viser.

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())

Hurtigt tjek

Kontrollér din forståelse af WebSockets readyState-værdier.

Besvar den i den interaktive lektion

Opsummering

I denne lektion har du lært:

new WebSocket(url) starter en tovejsforbindelse med ws:// eller wss://.
onopen udløses, når socketforbindelsen er klar; send først derefter.
onmessage leverer data i event.data — fortolk JSON for at få et objekt.
ws.send(JSON.stringify(msg)) sender data.
onclose og onerror håndterer lukning og fejl.
readyState er 0 CONNECTING, 1 OPEN, 2 CLOSING, 3 CLOSED.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende WebSocket i browseren” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Grundlæggende WebSocket i browseren”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende WebSocket i browseren”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() og readyState Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Grundlæggende WebSocket i browseren”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Grundlæggende WebSocket i browseren
Socket.io-klient med Vue
Opbygning af en chatkomponent i realtid
useWebSocket-composable med genforbindelse

← Tilbage til Vue Academy