Strömningssystem i realtid (WebRTC + live-data) · Lektion

Skicka och ta emot data

Implementera kodexempel för att skicka och ta emot olika typer av data (text och binärdata) över en etablerad WebRTC Data Channel.

Lektion 2 av 411 steg

Skicka och ta emot data är en gratis lektion i Strömningssystem i realtid (WebRTC + live-data) på CoddyKit. Detta är lektion 2 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 Strömningssystem i realtid (WebRTC + live-data), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Strömningssystem i realtid (WebRTC + live-data) innehåller totalt 4 lektioner.

Meddelanden med datakanaler

WebRTC:s RTCDataChannel används inte bara för anslutningar, utan även för att skicka meddelanden! Det gör att peers kan utbyta godtyckliga data direkt.

Föreställ dig en supersnabb och säker chattlinje mellan två webbläsare, men för vilken typ av information som helst som du vill dela.

Skicka data med `send()`

För att skicka data använder du metoden send() på ett RTCDataChannel-objekt. Det är enkelt och metoden kan hantera flera olika datatyper.

Syntax: dataChannel.send(data);
data kan vara en String, Blob, ArrayBuffer eller ArrayBufferView.

Kanalen måste vara i tillståndet 'open' för att meddelanden ska kunna skickas.

Textmeddelanden är enkla

Den enklaste typen av data att skicka är vanlig text. Det passar utmärkt för chattmeddelanden, kommandon eller små mängder strukturerade data, till exempel JSON-strängar.

När du skickar en JavaScript-String till send() skickas den som textdata.

// Assuming 'dataChannel' is an open RTCDataChannel
dataChannel.send("Hello from CoddyKit!");
dataChannel.send(JSON.stringify({ type: "chat", message: "Hi!" }));

Prova att skicka ett textmeddelande

Låt oss simulera hur ett enkelt textmeddelande skickas. I ett verkligt scenario skulle det skickas till en ansluten peer. Här loggar vi det vi "skickar".

const dataChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("DataChannel sending:", data);
    } else {
      console.error("DataChannel not open.");
    }
  }
};

if (dataChannel.readyState === "open") {
  dataChannel.send("Welcome to real-time data!");
  dataChannel.send("Your first message sent!");
} else {
  console.log("Data channel is not yet open.");
}

Hantera inkommande meddelanden

För att ta emot data lyssnar du efter händelsen message på ditt RTCDataChannel-objekt. Händelsen utlöses varje gång en peer skickar data.

Händelsehanteraren anges vanligtvis via dataChannel.onmessage.
Händelseobjektet (MessageEvent) har egenskapen data, som innehåller det mottagna meddelandet.

Typen för event.data beror på vad som skickades (String eller Blob/ArrayBuffer).

Skicka och ta emot text

Här är ett kombinerat exempel. En "peer" skickar ett meddelande och en annan "peer" (simulerad här) tar emot det med hjälp av onmessage.

const senderChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("Sender sent:", data);
      receiverChannel.onmessage({ data: data });
    }
  }
};

const receiverChannel = {
  readyState: "open",
  onmessage: function(event) {
    console.log("Receiver received:", event.data);
  }
};

senderChannel.send("Hello from sender!");

Bortom text: binära data

Strängar passar utmärkt för text, men RTCDataChannel stöder även effektiv överföring av binära data. Det är viktigt för exempelvis fildelning, uppdateringar av spellägen eller bilddata.

Du kan skicka:

Blob: Representerar råa, oföränderliga data. Lämpligt för filer.
ArrayBuffer: En buffert med råa binära data och fast längd.
ArrayBufferView: En vy över en ArrayBuffer (till exempel Uint8Array).

När binära data tas emot är event.data en ArrayBuffer eller Blob, beroende på kanalens egenskap binaryType.

Använda ArrayBuffer för binära data

ArrayBuffer är ett vanligt sätt att hantera råa binära data i JavaScript. Du kan skapa vyer (till exempel Uint8Array) för att bearbeta innehållet.

// Create an ArrayBuffer
const buffer = new ArrayBuffer(4); // 4 bytes
const view = new Uint8Array(buffer);

// Put some data into the view
view[0] = 65; // ASCII 'A'
view[1] = 66; // ASCII 'B'
view[2] = 67; // ASCII 'C'
view[3] = 68; // ASCII 'D'

// Send the ArrayBuffer
dataChannel.send(buffer);

Mottagaren får denna ArrayBuffer och kan sedan tolka den.

Binära data i praktiken

Låt oss simulera hur en ArrayBuffer skickas och sedan tolkas på mottagarsidan. Vi omvandlar de mottagna byten till tecken igen för visning.

const senderBinaryChannel = {
  readyState: "open",
  send: function(data) {
    if (this.readyState === "open") {
      console.log("Sender sent binary data.");
      receiverBinaryChannel.onmessage({ data: data });
    }
  }
};

const receiverBinaryChannel = {
  readyState: "open",
  onmessage: function(event) {
    console.log("Receiver received binary data.");
    const receivedBuffer = event.data;
    if (receivedBuffer instanceof ArrayBuffer) {
      const view = new Uint8Array(receivedBuffer);
      let receivedChars = "";
      for (let i = 0; i < view.length; i++) {
        receivedChars += String.fromCharCode(view[i]);
      }
      console.log("Decoded binary:", receivedChars);
    }
  }
};

const buffer = new ArrayBuffer(3);
const view = new Uint8Array(buffer);
view[0] = 72; // H
view[1] = 73; // I
view[2] = 33; // !

senderBinaryChannel.send(buffer);

Kontroll av datakanaler

Du har lärt dig att skicka och ta emot olika typer av data. Nu testar vi din förståelse!

Besvara frågan i den interaktiva lektionen

Sammanfattning: Skicka och ta emot data

Bra jobbat! Du behärskar nu grunderna i att skicka och ta emot data via WebRTC-datakanaler.

Vi använder dataChannel.send(data) för att överföra information.
Händelselyssnaren onmessage hanterar inkommande data från peers.
Datakanaler stöder både text (String) och flera binära typer (Blob, ArrayBuffer).

Den här funktionen öppnar många möjligheter för realtidssamarbete och direkt datautväxling!

Gratis att börja

Lär dig Strömningssystem i realtid (WebRTC + live-data) 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: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skicka och ta emot data” gratis?

Ja – hela texten till ”Skicka och ta emot data” 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 Strömningssystem i realtid (WebRTC + live-data), kan Ni uppgradera till CoddyKit PRO. Kursen i Strömningssystem i realtid (WebRTC + live-data) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skicka och ta emot data”?

Implementera kodexempel för att skicka och ta emot olika typer av data (text och binärdata) över en etablerad WebRTC Data Channel. Ni övar på Strömningssystem i realtid (WebRTC + live-data) 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 Strömningssystem i realtid (WebRTC + live-data)?

Du behöver inga förkunskaper. Utbildningen i Strömningssystem i realtid (WebRTC + live-data) 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 2 av 4.

Hur lång tid tar lektionen ”Skicka och ta emot data”?

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 Strömningssystem i realtid (WebRTC + live-data)-lektionen?

Ja. Varje Strömningssystem i realtid (WebRTC + live-data)-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

Introduktion till RTCDataChannel
Skicka och ta emot data
Praktiska användningsområden för Data Channels
Tillförlitliga och otillförlitliga datakanaler

← Tillbaka till Strömningssystem i realtid (WebRTC + live-data)