Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) · Pelajaran

Menghantar dan Menerima Data

Laksanakan contoh kod untuk menghantar dan menerima pelbagai jenis data (teks, binari) melalui Saluran Data WebRTC yang telah diwujudkan.

Pelajaran 2 daripada 411 langkah

Menghantar dan Menerima Data ialah pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Pemesejan dengan Saluran Data

RTCDataChannel WebRTC bukan hanya untuk sambungan; ia juga digunakan untuk menghantar mesej! Ini membolehkan rakan bertukar data sewenang-wenangnya secara terus.

Bayangkan ia seperti talian sembang yang sangat pantas dan selamat antara dua pelayar, tetapi untuk apa-apa jenis maklumat yang ingin anda kongsikan.

Menghantar Data dengan `send()`

Untuk menghantar data, anda menggunakan kaedah send() bagi objek RTCDataChannel. Kaedah ini mudah digunakan dan boleh mengendalikan pelbagai jenis data.

Sintaks: dataChannel.send(data);
data boleh berupa String, Blob, ArrayBuffer atau ArrayBufferView.

Saluran mestilah berada dalam keadaan 'open' untuk menghantar mesej.

Mesej Teks Mudah Dihantar

Data paling mudah untuk dihantar ialah teks biasa. Teks ini sesuai untuk mesej sembang, arahan atau cebisan kecil data berstruktur seperti rentetan JSON.

Apabila anda menghantar String JavaScript kepada send(), data tersebut dihantar sebagai data teks.

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

Cuba Menghantar Mesej Teks

Mari kita simulasikan penghantaran mesej teks ringkas. Dalam situasi sebenar, mesej ini akan dihantar kepada rakan yang bersambung. Di sini, kita merekodkan perkara yang sedang "dihantar".

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

Mengendalikan Mesej Masuk

Untuk menerima data, anda mendengar peristiwa message pada objek RTCDataChannel anda. Peristiwa ini berlaku setiap kali rakan menghantar data.

Pengendali peristiwa biasanya ditetapkan melalui dataChannel.onmessage.
Objek peristiwa (MessageEvent) mempunyai sifat data, yang mengandungi mesej yang diterima.

Jenis event.data bergantung pada data yang dihantar (String atau Blob/ArrayBuffer).

Menghantar dan Menerima Teks

Berikut ialah contoh gabungan. Satu "rakan" menghantar mesej dan satu lagi "rakan" (yang disimulasikan di sini) menerimanya menggunakan 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!");

Melangkaui Teks: Data Binari

Walaupun rentetan sangat sesuai untuk teks, RTCDataChannel juga menyokong penghantaran data binari dengan cekap. Ini penting untuk perkara seperti perkongsian fail, kemas kini keadaan permainan atau data imej.

Anda boleh menghantar:

Blob: Mewakili data mentah tidak boleh ubah. Sesuai untuk fail.
ArrayBuffer: Penimbal data binari mentah dengan panjang tetap.
ArrayBufferView: Paparan ke dalam ArrayBuffer (contohnya, Uint8Array).

Apabila data binari diterima, event.data akan berupa ArrayBuffer atau Blob, bergantung pada sifat binaryType saluran.

Menggunakan ArrayBuffer untuk Data Binari

ArrayBuffer ialah cara yang biasa digunakan untuk mengendalikan data binari mentah dalam JavaScript. Anda boleh mencipta paparan (seperti Uint8Array) untuk memanipulasi kandungannya.

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

Penerima akan menerima ArrayBuffer ini dan kemudiannya boleh mentafsirkannya.

Data Binari dalam Tindakan

Mari kita simulasikan penghantaran ArrayBuffer dan kemudian mentafsirkannya pada bahagian penerima. Kita akan menukar bait yang diterima kembali kepada aksara untuk dipaparkan.

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

Semakan Saluran Data

Anda telah mempelajari cara menghantar dan menerima pelbagai jenis data. Mari uji pemahaman anda!

Jawab dalam pelajaran interaktif

Ulang Kaji Penghantaran dan Penerimaan Data

Tahniah! Anda telah menguasai asas penghantaran dan penerimaan data melalui Saluran Data WebRTC.

Kami menggunakan dataChannel.send(data) untuk menghantar maklumat.
Pendengar peristiwa onmessage mengendalikan data masuk daripada rakan.
Saluran Data menyokong teks (String) dan pelbagai jenis binari (Blob, ArrayBuffer).

Keupayaan ini membuka pelbagai kemungkinan untuk kerjasama masa nyata dan pertukaran data secara terus!

Percuma untuk bermula

Pelajari Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menghantar dan Menerima Data” percuma?

Ya — teks penuh “Menghantar dan Menerima Data” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), tingkat taraf kepada CoddyKit PRO. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menghantar dan Menerima Data”?

Laksanakan contoh kod untuk menghantar dan menerima pelbagai jenis data (teks, binari) melalui Saluran Data WebRTC yang telah diwujudkan. Anda berlatih Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menghantar dan Menerima Data” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) ini?

Ya. Setiap pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Pengenalan kepada RTCDataChannel
Menghantar dan Menerima Data
Kes Penggunaan Saluran Data Secara Praktikal
Saluran Data Boleh Dipercayai berbanding Tidak Boleh Dipercayai

← Kembali ke Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)