Vue Academy · Les

WebSocket-basiskennis in de browser

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

Les 1 van 413 stappen

WebSocket-basiskennis in de browser is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.

Realtime in de browser

HTTP werkt volgens het verzoek-antwoordmodel: de client vraagt, de server antwoordt en de verbinding wordt gesloten. Voor chat, live dashboards of spellen voor meerdere spelers moet de server gegevens kunnen pushen zonder dat daarom wordt gevraagd.

Het WebSocket-protocol biedt één langdurige, tweerichtingsverbinding tussen browser en server.

Een verbinding openen

De browser heeft standaard een globale WebSocket-constructor. Geef een URL door met het schema ws:// (onbeveiligd) of wss:// (TLS).

Het maken van het object start onmiddellijk de verbindingshandshake.

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

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

De onopen-afhandelaar

De verbinding is niet direct klaar zodra je deze maakt. De gebeurtenis onopen wordt uitgevoerd zodra de handshake is voltooid en de socket klaar is om gegevens te vervoeren.

Verzend je eerste bericht vanuit onopen, nooit eerder.

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

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

Berichten ontvangen

Inkomende gegevens komen binnen via onmessage. De payload staat in event.data en is standaard een tekenreeks.

De meeste apps verzenden JSON, dus je parseert dit weer naar een object.

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

Berichten verzenden

Gebruik ws.send() om gegevens te verzenden. WebSockets bevatten onbewerkte tekenreeksen of binaire gegevens, dus codeer objecten eerst met JSON.stringify.

Beide kanten spreken een structuur af — hier een type plus een payload.

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

sendChat("Good morning")

Een volledige heen-en-terugcyclus

Door openen, verzenden en ontvangen te combineren krijg je een complete echo-client. Open de socket, verzend bij het openen en registreer wat terugkomt.

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

De verbinding sluiten

De gebeurtenis onclose wordt uitgevoerd wanneer de verbinding eindigt — of je nu ws.close() hebt aangeroepen of het netwerk is weggevallen. De gebeurtenis bevat een numerieke code en een tekenreeks met een reason.

Code 1000 betekent een normale afsluiting.

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

Fouten afhandelen

De gebeurtenis onerror wordt uitgevoerd bij transportfouten. De foutgebeurtenis zelf bevat om veiligheidsredenen bewust weinig details; beschouw deze als een signaal dat er iets mis is gegaan en dat er waarschijnlijk een afsluiting volgt.

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

De readyState-eigenschap

ws.readyState is een getal dat aangeeft waar de socket zich in zijn levenscyclus bevindt. Controleer dit altijd voordat je verzendt, zodat je geen fout veroorzaakt op een socket die nog niet is geopend.

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

Benoemde readyState-constanten

Gebruik in plaats van magische getallen de constanten van de klasse WebSocket. Deze zijn veel duidelijker dan 0, 1 of 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")
}

Alles samenbrengen in Vue

In een Vue-component maak je de socket meestal aan in onMounted en ruim je deze op in onUnmounted. De gebeurtenisafhandelaars werken reactieve referenties bij die je sjabloon weergeeft.

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

Korte toets

Controleer of je de waarden van WebSocket readyState begrijpt.

Beantwoord dit in de interactieve les

Samenvatting

In deze les heb je geleerd:

new WebSocket(url) start een tweerichtingsverbinding met ws:// of wss://.
onopen wordt uitgevoerd wanneer de socket klaar is; verzend pas daarna.
onmessage levert gegevens in event.data — parseer JSON om een object te krijgen.
ws.send(JSON.stringify(msg)) verzendt gegevens.
onclose en onerror handelen het afsluiten en fouten af.
readyState is 0 CONNECTING, 1 OPEN, 2 CLOSING en 3 CLOSED.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “WebSocket-basiskennis in de browser” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “WebSocket-basiskennis in de browser”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.

Wat leer ik in “WebSocket-basiskennis in de browser”?

new WebSocket(url), onopen/onmessage/onerror/onclose, send() en readyState. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “WebSocket-basiskennis in de browser”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy