Streaming-systemer i realtid (WebRTC og live-data) · Lektion

Afsendelse og modtagelse af data

Implementer kodeeksempler til at sende og modtage forskellige datatyper (tekst, binære data) over en etableret WebRTC Data Channel.

Lektion 2 af 411 trin

Afsendelse og modtagelse af data er en gratis Streaming-systemer i realtid (WebRTC og live-data)-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Streaming-systemer i realtid (WebRTC og live-data), og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.

Beskeder med datakanaler

WebRTCs RTCDataChannel bruges ikke kun til forbindelser; den kan også sende beskeder! Det giver peers mulighed for at udveksle vilkårlige data direkte.

Tænk på det som en ekstremt hurtig og sikker chatlinje mellem to browsere, men til alle former for oplysninger, du vil dele.

Afsendelse af data med `send()`

Du sender data ved at bruge send()-metoden på et RTCDataChannel-objekt. Det er enkelt og kan håndtere forskellige datatyper.

Syntaks: dataChannel.send(data);
data kan være en String, Blob, ArrayBuffer eller ArrayBufferView.

Kanalen skal være i tilstanden 'open' for at kunne sende beskeder.

Tekstbeskeder er nemme

De enkleste data at sende er almindelig tekst. Det er velegnet til chatbeskeder, kommandoer eller små mængder strukturerede data som JSON-strenge.

Når du sender en JavaScript-String til send(), bliver den sendt som tekstdata.

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

Prøv at sende en tekstbesked

Lad os simulere afsendelsen af en enkel tekstbesked. I en virkelig situation ville den blive sendt til en forbundet peer. Her logger vi, hvad vi "sender".

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.");
}

Håndtering af indgående beskeder

Du modtager data ved at lytte efter message-hændelsen på dit RTCDataChannel-objekt. Hændelsen udløses, hver gang en peer sender data.

Hændelseshåndteringen angives typisk via dataChannel.onmessage.
Hændelsesobjektet (MessageEvent) har en data-egenskab, som indeholder den modtagne besked.

Typen af event.data afhænger af, hvad der blev sendt (String eller Blob/ArrayBuffer).

Afsendelse og modtagelse af tekst

Her er et samlet eksempel. Én "peer" sender en besked, og en anden "peer" (simuleret her) modtager den ved hjælp af 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!");

Mere end tekst: binære data

Strenge er gode til tekst, men RTCDataChannel understøtter også effektiv afsendelse af binære data. Det er afgørende til ting som fildeling, opdateringer af spiltilstand eller billeddata.

Du kan sende:

Blob: Repræsenterer uforanderlige rådata. Velegnet til filer.
ArrayBuffer: En buffer med rå binære data og fast længde.
ArrayBufferView: En visning af en ArrayBuffer (f.eks. Uint8Array).

Når binære data modtages, er event.data en ArrayBuffer eller Blob, afhængigt af kanalens egenskab binaryType.

Brug af ArrayBuffer til binære data

ArrayBuffer er en almindelig måde at håndtere rå binære data på i JavaScript. Du kan oprette visninger (f.eks. Uint8Array) for at manipulere indholdet.

// 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);

Modtageren får denne ArrayBuffer og kan derefter fortolke den.

Binære data i praksis

Lad os simulere afsendelsen af en ArrayBuffer og derefter fortolke den hos modtageren. Vi konverterer de modtagne bytes tilbage til tegn, så de kan vises.

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

Test af datakanaler

Du har lært at sende og modtage forskellige typer data. Lad os teste din forståelse!

Besvar den i den interaktive lektion

Opsummering af afsendelse og modtagelse af data

Godt gået! Du har styr på det grundlæggende i at sende og modtage data via WebRTC-datakanaler.

Vi bruger dataChannel.send(data) til at overføre oplysninger.
Hændelseslytteren onmessage håndterer indgående data fra peers.
Datakanaler understøtter både tekst (String) og forskellige binære typer (Blob, ArrayBuffer).

Denne funktion åbner for mange muligheder for samarbejde i realtid og direkte dataudveksling!

Gratis at komme i gang

Lær Streaming-systemer i realtid (WebRTC og live-data) 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: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Afsendelse og modtagelse af data” gratis?

Ja — hele teksten til “Afsendelse og modtagelse af data” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Streaming-systemer i realtid (WebRTC og live-data)-kurset, skal du opgradere til CoddyKit PRO. Streaming-systemer i realtid (WebRTC og live-data)-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Afsendelse og modtagelse af data”?

Implementer kodeeksempler til at sende og modtage forskellige datatyper (tekst, binære data) over en etableret WebRTC Data Channel. Du øver dig i Streaming-systemer i realtid (WebRTC og live-data) 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å Streaming-systemer i realtid (WebRTC og live-data)?

Der kræves ingen tidligere erfaring. Streaming-systemer i realtid (WebRTC og live-data) 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 2 af 4.

Hvor lang tid tager lektionen “Afsendelse og modtagelse af data”?

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 Streaming-systemer i realtid (WebRTC og live-data)-lektion?

Ja. Alle Streaming-systemer i realtid (WebRTC og live-data)-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 Streaming-systemer i realtid (WebRTC og live-data)