Grunderna i WebSocket i webbläsaren
Öppna WebSocket-anslutningar, skicka meddelanden och hantera events med det inbyggda WebSocket-API:t.
Grunderna i WebSocket i webbläsaren är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Vad är WebSocket?
WebSocket är ett protokoll som tillhandahåller full-duplex-kommunikation över en enda TCP-anslutning. Till skillnad från HTTP förblir anslutningen öppen, vilket gör att servern kan skicka data till klienten när som helst.
Öppna en anslutning
Skapa ett WebSocket-objekt med en ws://- eller wss://-URL. Anslutningen öppnas asynkront.
const ws = new WebSocket('wss://api.example.com/ws');
ws.onopen = () => {
console.log('Connection established');
};Skicka meddelanden
Använd ws.send() för att skicka data. Du kan skicka strängar eller binär data (ArrayBuffer, Blob). JSON-koda objekt innan de skickas.
ws.onopen = () => {
ws.send(JSON.stringify({ type: 'join', room: 'general' }));
ws.send('Hello, server!');
};Ta emot meddelanden
Händelsen onmessage utlöses varje gång servern skickar data. Datan finns i event.data som en sträng eller binär typ.
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
console.log('Received:', data);
};Hantera fel och stängning
Hantera händelserna onerror och onclose. Stängningshändelsen innehåller en kod och en orsak som förklarar varför anslutningen avslutades.
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = (event) => {
console.log(`Closed: ${event.code} ${event.reason}`);
if (event.wasClean) {
console.log('Clean disconnect');
} else {
console.log('Connection lost — will retry');
}
};Stängningskoder
WebSockets standardkoder för stängning: 1000 = normalt, 1001 = lämnar, 1006 = onormalt (ingen close frame), 1008 = policyöverträdelse.
readyState
ws.readyState anger anslutningens aktuella tillstånd: CONNECTING (0), OPEN (1), CLOSING (2) eller CLOSED (3). Kontrollera alltid detta innan du skickar.
function sendSafely(ws, data) {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(data));
} else {
console.warn('WebSocket not open, dropping message');
}
}Stäng anslutningen
Anropa ws.close(code, reason) för att påbörja en ordnad stängning. Servern tar emot close frame och kan svara med en egen.
// Normal close
ws.close(1000, 'User logged out');
// Close from a cleanup effect
return () => ws.close();Binär data
Ange ws.binaryType = 'arraybuffer' (eller 'blob') för att ta emot binära meddelanden. Användbart för ljud, bilder eller anpassade protokoll.
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
if (event.data instanceof ArrayBuffer) {
const view = new Uint8Array(event.data);
console.log('Binary message, bytes:', view.length);
} else {
console.log('Text message:', event.data);
}
};Heartbeat / ping-pong
Webbläsarens WebSocket-API exponerar inte ping frames, men du kan implementera ett heartbeat på applikationsnivå: skicka ett ping-meddelande var N:e sekund och förvänta dig ett pong-svar.
function startHeartbeat(ws) {
return setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30_000);
}WebSocket jämfört med Server-Sent Events
Använd WebSocket för dubbelriktad kommunikation (chatt, spel). Använd Server-Sent Events (SSE) för strömmar som bara går från server till klient (aviseringar, liveflöden) — SSE fungerar över vanlig HTTP och återansluter automatiskt.
Snabbkontroll
Vilket värde för WebSockets readyState anger att anslutningen är öppen och redo att skicka?
Sammanfattning
Skapa anslutningar med new WebSocket(url), skicka JSON-strängifierade objekt via ws.send() och hantera händelserna onmessage, onerror och onclose. Kontrollera readyState innan du skickar och stäng ordnat med ws.close(1000).
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Grunderna i WebSocket i webbläsaren” gratis?
Ja – hela texten till ”Grunderna i WebSocket i webbläsaren” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Grunderna i WebSocket i webbläsaren”?
Öppna WebSocket-anslutningar, skicka meddelanden och hantera events med det inbyggda WebSocket-API:t. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Grunderna i WebSocket i webbläsaren”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Grunderna i WebSocket i webbläsaren
- Använda Socket.IO med React
- Bygga en realtidschattkomponent
- Återanslutning, felhantering och rensning