JavaScript Academy · Lektion

Åbning af en WebSocket-forbindelse

Opret forbindelse til en WebSocket-server.

Lektion 1 af 413 trin

Åbning af en WebSocket-forbindelse er en gratis JavaScript 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 JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er WebSockets?

WebSockets giver en vedvarende fulddupleksforbindelse mellem browseren og serveren over en enkelt TCP-forbindelse. I modsætning til HTTP-anmodning/svar kan begge sider sende meddelelser når som helst — hvilket er ideelt til chat, live-opdateringer og spil.

Skemaerne ws og wss

WebSocket-URL'er bruger ws:// (ukrypteret) eller wss:// (TLS-krypteret). Foretræk altid wss:// i produktion, ligesom https.

const url = "wss://example.com/socket";

Oprette en forbindelse

Opret en socket med new WebSocket(url). Håndtrykket starter med det samme, men forbindelsen er først klar, når den åbnes.

const socket = new WebSocket("wss://example.com/socket");
console.log(socket.url);

Hændelsen onopen

onopen udløses, når håndtrykket er fuldført. Først derefter er det sikkert at sende data.

socket.onopen = (event) => {
  console.log("Connection established");
  socket.send("Hello server");
};

Alternativet addEventListener

Du kan bruge addEventListener i stedet for on*-egenskaberne til at tilknytte flere handlere.

socket.addEventListener("open", () => {
  console.log("open via listener");
});

Forbindelsens readyState

readyState angiver livscyklussen: CONNECTING (0), OPEN (1), CLOSING (2), CLOSED (3).

if (socket.readyState === WebSocket.OPEN) {
  socket.send("ready!");
}

Underprotokoller

Et andet argument forhandler en underprotokol. Serveren vælger en, og du kan læse socket.protocol, når forbindelsen er åbnet.

const s = new WebSocket("wss://example.com", ["chat", "v2.chat"]);
s.onopen = () => console.log("Using", s.protocol);

Samme oprindelse og blandet indhold

En side, der er indlæst via https, må kun åbne wss://-forbindelser — åbning af ws:// blokeres som blandet indhold. Planlæg dine URL'er derefter.

Binær type

Indstil binaryType til "blob" (standard) eller "arraybuffer" for at styre, hvordan binære frames modtages.

socket.binaryType = "arraybuffer";

En minimal klient

Sæt det hele sammen: åbn, log status, og ryd op.

const socket = new WebSocket("wss://example.com/socket");
socket.onopen = () => console.log("opened");
socket.onclose = () => console.log("closed");

Tidsudløb for forbindelsen

WebSockets har ikke et indbygget tidsudløb for forbindelsen. Brug en timer, der lukker socketen, hvis onopen ikke er blevet udløst i tide.

const socket = new WebSocket(url);
const timer = setTimeout(() => {
  if (socket.readyState !== WebSocket.OPEN) socket.close();
}, 5000);
socket.onopen = () => clearTimeout(timer);

Hurtigt tjek

Test det grundlæggende om forbindelser.

Besvar den i den interaktive lektion

Opsummering: Åbning af en forbindelse

Du lærte om ws/wss-skemaerne, oprettede en socket med new WebSocket, håndterede onopen, kontrollerede readyState, forhandlede underprotokoller og tilføjede et tidsudløb for forbindelsen. Næste emne: afsendelse og modtagelse af meddelelser.

Gratis at komme i gang

Lær JavaScript 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: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Åbning af en WebSocket-forbindelse” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Åbning af en WebSocket-forbindelse”, 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. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Åbning af en WebSocket-forbindelse”?

Opret forbindelse til en WebSocket-server. Du øver dig i JavaScript 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å JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript 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 “Åbning af en WebSocket-forbindelse”?

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 JavaScript Academy-lektion?

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

← Tilbage til JavaScript Academy