Tiedostonsiirto WebRTC-datakanavien kautta
Oppikaa lähettämään tiedostoja vertaiselta vertaiselle WebRTC-datakanavien kautta, mukaan lukien paloittelu, backpressure, järjestys ja edistymisen seuranta.
Tiedostonsiirto WebRTC-datakanavien kautta on ilmainen Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssilla on yhteensä 4 oppituntia.
Chatia pidemmälle: tiedostojen lähettäminen
WebRTC:n data channels eivät rajoitu tekstikeskusteluun. Niillä voidaan siirtää mielivaltaista binaaridataa, mikä mahdollistaa vertaisverkon tiedostonsiirron ilman lataamista palvelimelle.
Näin suuret tiedostot pysyvät infrastruktuurinne ulkopuolella ja viive pienenee.
Binaarityypit kanavalla
Datakanava voi lähettää merkkijonoja tai binaaridataa. Tiedostoja varten asetatte binaryType-arvon niin, että vastaanotettu data saapuu ArrayBuffer-muodossa.
const channel = pc.createDataChannel('file');
channel.binaryType = 'arraybuffer';Miksi data on jaettava osiin
500 Mt:n tiedostoa ei voi lähettää yhtenä viestinä. Kanavilla on viestin enimmäiskoko (yleensä noin 256 kt). Lähettäkää tiedosto paloina.
- Jakakaa tiedosto samankokoisiin osiin.
- Lähettäkää jokainen osa järjestyksessä.
- Kootkaa osat uudelleen vastaanottajalla.
Tiedoston pilkkominen
Selaimen File-objekti tukee slice()-metodia, joka palauttaa Blob-objektin, jonka voi lukea ArrayBufferina.
const CHUNK = 16 * 1024;
let offset = 0;
function nextChunk(file) {
const slice = file.slice(offset, offset + CHUNK);
offset += CHUNK;
return slice.arrayBuffer();
}Metatietojen lähettäminen ensin
Lähettäkää ennen tavuja pieni JSON-otsake, jotta vastaanottaja tietää tiedoston nimen, tyypin ja kokonaiskoon. Näin se voi näyttää edistymisen ja muodostaa lopullisen blobin oikein.
channel.send(JSON.stringify({
name: file.name,
size: file.size,
type: file.type
}));Vuonhallinnan ongelma
Jos työnnätte paloja verkon käsittelynopeutta nopeammin, lähetyspuskuri kasvaa ja sivu voi kaatua. Seuratkaa arvoa bufferedAmount ja keskeyttäkää lähetys, kun arvo on suuri.
channel.bufferedAmountLowThreshold = 65536;
if (channel.bufferedAmount > 1 * 1024 * 1024) {
await new Promise(r =>
channel.addEventListener('bufferedamountlow', r, { once: true }));
}Järjestetty ja luotettava toimitus
Oletusarvoisesti datakanavat ovat järjestettyjä ja luotettavia (TCP:n tavoin), mikä sopii juuri tiedostonsiirtoon.
Älkää käyttäkö tiedostoille järjestämättömiä tai epäluotettavia asetuksia, jotka sopivat pelitilan siirtämiseen. Säilyttäkää oletusarvot.
Kokoaminen uudelleen vastaanottajalla
Vastaanottaja kerää jokaisen ArrayBufferin, kunnes vastaanotettujen tietojen kokonaismäärä vastaa ilmoitettua kokoa, ja muodostaa sitten Blob-objektin.
const parts = [];
let received = 0;
channel.onmessage = (e) => {
parts.push(e.data);
received += e.data.byteLength;
if (received === meta.size) {
const blob = new Blob(parts, { type: meta.type });
save(blob, meta.name);
}
};Edistymisen näyttäminen
Laskekaa prosenttiosuus suhteuttamalla lähetettyjen tai vastaanotettujen tavujen määrä kokonaiskokoon. Päivittäkää käyttöliittymä molemmissa päissä, jotta käyttäjät näkevät reaaliaikaisen edistymispalkin.
const percent = Math.round((received / meta.size) * 100);Latauksen käynnistäminen
Muutakaa valmis Blob ladattavaksi linkiksi käyttämällä objektin URL-osoitetta.
function save(blob, name) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = name; a.click();
URL.revokeObjectURL(url);
}Luotettavuus ja jatkaminen
Jos yhteys katkeaa kesken siirron, voitte jatkaa seuraamalla viimeksi vahvistettua siirtymää ja aloittamalla siitä. Yhdistäkää tähän tarkistussummat eheyden varmistamiseksi lopuksi.
Pikatesti
Testatkaa, miten hyvin ymmärrätte tiedostonsiirtoa datakanavalla.
Kertaus
P2P-tiedostonsiirto datakanavilla: lähettäkää metatiedot, pilkkokaa tiedosto paloiksi, huomioikaa vuonhallinta, säilyttäkää järjestetty ja luotettava toimitus, kootkaa tiedosto uudelleen Blob-objektiksi ja ladatkaa se.
Opi Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data) tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Tiedostonsiirto WebRTC-datakanavien kautta” ilmainen?
Kyllä – oppitunnin ”Tiedostonsiirto WebRTC-datakanavien kautta” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssin, päivitä CoddyKit PROhon. Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tiedostonsiirto WebRTC-datakanavien kautta”?
Oppikaa lähettämään tiedostoja vertaiselta vertaiselle WebRTC-datakanavien kautta, mukaan lukien paloittelu, backpressure, järjestys ja edistymisen seuranta. Harjoittelet Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Tiedostonsiirto WebRTC-datakanavien kautta”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppitunnilla?
Kyllä. Jokainen Reaaliaikaiset suoratoistojärjestelmät (WebRTC + reaaliaikainen data)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- WebRTC-metadatan synkronointi
- Reaaliaikainen keskustelu datakanavilla
- Sovellustilan jakaminen reaaliajassa
- Tiedostonsiirto WebRTC-datakanavien kautta