Mengirim data antara dua browser untuk komunikasi, game, atau transfer file bisa menjadi proses yang cukup rumit. Hal ini memerlukan penyiapan dan pembayaran server untuk meneruskan data, dan mungkin menskalakannya ke beberapa pusat data. Dalam skenario ini, ada potensi latensi tinggi dan sulit untuk menjaga privasi data.
Masalah ini dapat diatasi dengan menggunakan RTCDataChannel API WebRTC untuk mentransfer data langsung dari satu peer ke peer lainnya. Artikel ini membahas dasar-dasar cara menyiapkan dan menggunakan saluran data, serta kasus penggunaan umum di web saat ini.
Mengapa perlu saluran data lain?
Kita memiliki WebSocket, AJAX, dan Server Sent Events. Mengapa kita memerlukan saluran komunikasi lain? WebSocket bersifat dua arah, tetapi semua teknologi ini dirancang untuk komunikasi ke atau dari server.
RTCDataChannel menggunakan pendekatan yang berbeda:
- API ini berfungsi dengan
RTCPeerConnectionAPI, yang memungkinkan konektivitas peer-to-peer. Hal ini dapat menghasilkan latensi yang lebih rendah - tidak ada server perantara dan lebih sedikit 'hop'. RTCDataChannelmenggunakan Stream Control Transmission Protocol (SCTP), yang memungkinkan konfigurasi pengiriman semantik yang dapat dikonfigurasi, pengiriman tidak berurutan, dan konfigurasi transmisi ulang.
RTCDataChannel kini tersedia dengan dukungan SCTP di desktop dan Android di Google Chrome, Opera, dan Firefox.
Peringatan: Sinyal, STUN, dan TURN
WebRTC memungkinkan komunikasi peer-to-peer, tetapi masih memerlukan server untuk pensinyalan guna bertukar media dan metadata jaringan untuk mem-bootstrap koneksi peer.
WebRTC mengatasi NAT dan firewall dengan:
- Framework ICE untuk membuat jalur jaringan terbaik antar-peer.
- Server STUN untuk memastikan IP dan port yang dapat diakses secara publik untuk setiap peer.
- Server TURN jika koneksi langsung gagal dan penerusan data diperlukan.
Untuk mengetahui informasi selengkapnya tentang cara kerja WebRTC dengan server untuk pensinyalan dan jaringan, lihat WebRTC di dunia nyata: STUN, TURN, dan pensinyalan.
Kemampuan
RTCDataChannel API mendukung serangkaian jenis data yang fleksibel. API ini dirancang untuk meniru WebSocket secara persis, dan RTCDataChannel mendukung string serta beberapa jenis biner di JavaScript, seperti Blob, ArrayBuffer, dan ArrayBufferView. Jenis ini dapat berguna saat bekerja dengan transfer file dan game multiplayer.
RTCDataChannel dapat berfungsi dalam mode tidak andal dan tidak berurutan (mirip dengan User Datagram Protocol atau UDP), mode andal dan berurutan (mirip dengan Transmission Control Protocol atau TCP), dan mode andal sebagian:
- Mode yang andal dan berurutan menjamin transmisi pesan dan juga urutan pengirimannya. Hal ini memerlukan overhead tambahan, sehingga berpotensi membuat mode ini lebih lambat.
- Mode tidak andal dan tidak berurutan tidak menjamin setiap pesan akan sampai ke sisi lain atau urutan kedatangannya. Hal ini menghilangkan overhead, sehingga mode ini dapat berfungsi jauh lebih cepat.
- Mode sebagian andal menjamin transmisi pesan dalam kondisi tertentu, seperti waktu tunggu transmisi ulang atau jumlah maksimum transmisi ulang. Pengurutan pesan juga dapat dikonfigurasi.
Performa untuk dua mode pertama hampir sama jika tidak ada kehilangan paket. Namun, dalam mode yang andal dan berurutan, paket yang hilang menyebabkan paket lain diblokir di belakangnya, dan paket yang hilang mungkin sudah tidak berlaku pada saat ditransmisikan ulang dan tiba. Tentu saja, Anda dapat menggunakan beberapa saluran data dalam aplikasi yang sama, yang masing-masing memiliki semantik yang andal atau tidak andal.
Berikut tabel bermanfaat dari High Performance Browser Networking oleh Ilya Grigorik:
| TCP | UDP | SCTP | |
| Keandalan | Andal | Tidak dapat dipercaya | Dapat Dikonfigurasi |
| Pengiriman | Dipesan | Tidak berurutan | Dapat Dikonfigurasi |
| Penularan | Berorientasi byte | Berorientasi pesan | Berorientasi pesan |
| Kontrol alur | Ya | Tidak | Ya |
| Kontrol kemacetan | Ya | Tidak | Ya |
Selanjutnya, Anda akan mempelajari cara mengonfigurasi RTCDataChannel untuk menggunakan mode yang andal dan berurutan atau tidak andal dan tidak berurutan.
Mengonfigurasi saluran data
Ada beberapa demo sederhana RTCDataChannel secara online:
Dalam contoh ini, browser membuat koneksi peer ke dirinya sendiri, lalu membuat saluran data dan mengirim pesan melalui koneksi peer. Kemudian, ia membuat saluran data dan mengirim pesan melalui koneksi peer. Terakhir, pesan Anda akan muncul di kotak di sisi lain halaman.
Kode untuk memulai ini singkat:
const peerConnection = new RTCPeerConnection();
// Establish your peer connection using your signaling channel here
const dataChannel =
peerConnection.createDataChannel("myLabel", dataChannelOptions);
dataChannel.onerror = (error) => {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage = (event) => {
console.log("Got Data Channel Message:", event.data);
};
dataChannel.onopen = () => {
dataChannel.send("Hello World!");
};
dataChannel.onclose = () => {
console.log("The Data Channel is Closed");
};
Objek dataChannel dibuat dari koneksi peer yang sudah dibuat. Objek ini dapat dibuat sebelum atau setelah sinyal terjadi. Kemudian, Anda meneruskan label untuk membedakan saluran ini dari saluran lainnya dan serangkaian setelan konfigurasi opsional:
const dataChannelOptions = {
ordered: false, // do not guarantee order
maxPacketLifeTime: 3000, // in milliseconds
};
Anda juga dapat menambahkan opsi maxRetransmits (jumlah percobaan sebelum gagal), tetapi Anda hanya dapat menentukan maxRetransmits atau maxPacketLifeTime, bukan keduanya. Untuk semantik UDP, tetapkan maxRetransmits ke 0 dan ordered ke false. Untuk mengetahui informasi selengkapnya, lihat RFC IETF berikut: Stream Control Transmission Protocol dan Stream Control Transmission Protocol Partial Reliability Extension.
ordered: apakah saluran data harus menjamin urutan atau tidakmaxPacketLifeTime: waktu maksimum untuk mencoba dan mengirim ulang pesan yang gagalmaxRetransmits: jumlah maksimum upaya untuk mengirim ulang pesan yang gagalprotocol: memungkinkan penggunaan subprotokol, yang memberikan informasi meta ke aplikasinegotiated: jika disetel ke benar (true), akan menghapus penyiapan otomatis saluran data di peer lain, sehingga Anda dapat membuat saluran data dengan ID yang sama di sisi lainid: memungkinkan Anda memberikan ID sendiri untuk channel yang hanya dapat digunakan bersama dengannegotiatedyang ditetapkan ketrue)
Satu-satunya opsi yang perlu digunakan oleh sebagian besar orang adalah tiga opsi pertama: ordered, maxPacketLifeTime, dan maxRetransmits. Dengan SCTP (sekarang digunakan oleh semua browser yang mendukung WebRTC), reliable dan ordered disetel ke benar (true) secara default. Anda dapat menggunakan opsi tidak andal dan tidak berurutan jika menginginkan kontrol penuh dari lapisan aplikasi, tetapi dalam sebagian besar kasus, keandalan parsial akan berguna.
Perhatikan bahwa, seperti WebSocket, RTCDataChannel memicu peristiwa saat koneksi dibuat, ditutup, atau terjadi error, dan saat menerima pesan dari peer lain.
Apakah tantangan ini aman?
Enkripsi wajib untuk semua komponen WebRTC. Dengan RTCDataChannel, semua data diamankan dengan Datagram Transport Layer Security (DTLS). DTLS adalah turunan dari SSL, yang berarti data Anda akan seaman menggunakan koneksi berbasis SSL standar. DTLS distandardisasi dan diintegrasikan ke semua browser yang mendukung WebRTC. Untuk mengetahui informasi selengkapnya, lihat wiki Wireshark.
Mengubah cara Anda berpikir tentang data
Menangani data dalam jumlah besar dapat menjadi masalah dalam JavaScript. Seperti yang ditunjukkan oleh developer Sharefest, hal ini memerlukan pemikiran tentang data dengan cara baru. Jika Anda mentransfer file yang lebih besar daripada jumlah memori yang tersedia, Anda harus memikirkan cara baru untuk menyimpan informasi ini. Di sinilah teknologi, seperti FileSystem API, berperan, seperti yang akan Anda lihat selanjutnya.
Membuat aplikasi berbagi file
Membuat aplikasi web yang dapat membagikan file di browser kini dapat dilakukan dengan RTCDataChannel. Membuat di atas RTCDataChannel berarti data file yang ditransfer dienkripsi dan tidak menyentuh server penyedia aplikasi. Fungsi ini, dikombinasikan dengan kemungkinan terhubung ke beberapa klien untuk berbagi yang lebih cepat, menjadikan berbagi file WebRTC sebagai kandidat yang kuat untuk web.
Beberapa langkah diperlukan agar transfer berhasil:
- Membaca file di JavaScript menggunakan File API.
- Buat koneksi peer antar-klien dengan
RTCPeerConnection. - Buat saluran data antara klien dengan
RTCDataChannel.
Ada beberapa hal yang perlu dipertimbangkan saat mencoba mengirim file melalui RTCDataChannel:
- Ukuran file: jika ukuran file cukup kecil dan dapat disimpan serta dimuat sebagai satu Blob, Anda dapat memuatnya ke dalam memori menggunakan File API, lalu mengirim file melalui saluran yang andal apa adanya (tetapi perlu diingat bahwa browser membatasi ukuran transfer maksimum). Seiring bertambahnya ukuran file, prosesnya akan menjadi lebih rumit. Jika mekanisme chunking diperlukan, potongan file akan dimuat dan dikirim ke peer lain, disertai dengan metadata
chunkIDsehingga peer dapat mengenalinya. Perhatikan bahwa dalam kasus ini, Anda juga perlu menyimpan potongan terlebih dahulu ke penyimpanan offline (misalnya, menggunakan FileSystem API) dan menyimpannya ke disk pengguna hanya jika Anda memiliki file secara keseluruhan. - Ukuran potongan: ini adalah "atom" data terkecil untuk aplikasi Anda. Pemotongan diperlukan karena saat ini ada batas ukuran pengiriman (meskipun akan diperbaiki di versi saluran data mendatang). Rekomendasi saat ini untuk ukuran potongan maksimum adalah 64 KiB.
Setelah file ditransfer sepenuhnya ke sisi lain, file dapat didownload menggunakan tag anchor:
function saveFile(blob) {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'File Name';
link.click();
};
Aplikasi berbagi file di PubShare dan GitHub menggunakan teknik ini. Keduanya bersifat open source dan memberikan dasar yang baik untuk aplikasi berbagi file berdasarkan RTCDataChannel.
Jadi, apa yang dapat Anda lakukan?
RTCDataChannel membuka peluang baru untuk membuat aplikasi untuk berbagi file, game multiplayer, dan pengiriman konten.
- Berbagi file peer-to-peer seperti yang dijelaskan sebelumnya
- Game multiplayer, yang dipadukan dengan teknologi lain, seperti WebGL, seperti yang terlihat di BananaBread Mozilla
- Pengiriman konten yang diubah oleh PeerCDN, sebuah framework yang mengirimkan aset web melalui komunikasi data peer-to-peer
Mengubah cara Anda membangun aplikasi
Anda kini dapat menyediakan aplikasi yang lebih menarik dengan menggunakan koneksi berlatensi rendah dan berperforma tinggi melalui RTCDataChannel. Framework, seperti PeerJS dan PubNub WebRTC SDK, mempermudah penerapan RTCDataChannel dan API kini memiliki dukungan luas di berbagai platform.
Munculnya RTCDataChannel dapat mengubah cara Anda memikirkan transfer data di browser.