Avastage Web Streams API tõhusaks andmetöötluseks JavaScriptis. Õppige, kuidas luua, teisendada ja tarbida vooge parema jõudluse ja mälu haldamise jaoks.
Web Streams API: Tõhusad andmetöötlustorud JavaScriptis
Web Streams API pakub võimsat mehhanismi voogandmete käsitlemiseks JavaScriptis, võimaldades luua tõhusaid ja reageerimisvõimelisi veebirakendusi. Selle asemel, et laadida terveid andmekogumeid korraga mällu, võimaldavad vood teil andmeid töödelda järk-järgult, vähendades mälukasutust ja parandades jõudlust. See on eriti kasulik suurte failide, võrgupäringute või reaalajas andmevoogudega tegelemisel.
Mis on veebivood?
Oma olemuselt pakub Web Streams API kolme peamist tĂĽĂĽpi voogu:
- ReadableStream: Esindab andmeallikat, näiteks faili, võrguühendust või genereeritud andmeid.
- WritableStream: Esindab andmete sihtkohta, näiteks faili, võrguühendust või andmebaasi.
- TransformStream: Esindab teisendustoru ReadableStreami ja WritableStreami vahel. See saab andmeid voo läbimisel muuta või töödelda.
Need vootüübid töötavad koos, et luua tõhusaid andmetöötlustorusid. Andmed voolavad ReadableStreamist, läbi valikuliste TransformStreamide ja lõpuks WritableStreami.
Põhimõisted ja terminoloogia
- Tükid (Chunks): Andmeid töödeldakse diskreetsetes ühikutes, mida nimetatakse tükkideks. Tükk võib olla mis tahes JavaScripti väärtus, näiteks string, number või objekt.
- Kontrollerid (Controllers): Igal vootüübil on vastav kontrolleri objekt, mis pakub meetodeid voo haldamiseks. Näiteks ReadableStreamController võimaldab teil andmeid voogu järjekorda panna, samas kui WritableStreamController võimaldab teil käsitleda saabuvaid tükke.
- Torud (Pipes): Voogusid saab omavahel ĂĽhendada, kasutades meetodeid
pipeTo()
japipeThrough()
.pipeTo()
ĂĽhendab ReadableStreami WritableStreamiga, samas kuipipeThrough()
ühendab ReadableStreami TransformStreamiga ja seejärel WritableStreamiga. - Vastusurve (Backpressure): Mehhanism, mis võimaldab tarbijal tootjale märku anda, et ta ei ole valmis rohkem andmeid vastu võtma. See hoiab ära tarbija ülekoormamise ja tagab, et andmeid töödeldakse jätkusuutliku kiirusega.
ReadableStreami loomine
Saate luua ReadableStreami, kasutades konstruktorit ReadableStream()
. Konstruktor võtab argumendiks objekti, mis võib määratleda mitu meetodit voo käitumise kontrollimiseks. Neist kõige olulisemad on meetod start()
, mida kutsutakse välja voo loomisel, ja meetod pull()
, mida kutsutakse välja, kui voog vajab rohkem andmeid.
Siin on näide ReadableStreami loomisest, mis genereerib numbrite jada:
const readableStream = new ReadableStream({
start(controller) {
let counter = 0;
function push() {
if (counter >= 10) {
controller.close();
return;
}
controller.enqueue(counter++);
setTimeout(push, 100);
}
push();
},
});
Selles näites lähtestab meetod start()
loenduri ja defineerib funktsiooni push()
, mis paneb numbri voogu järjekorda ja kutsub end seejärel lühikese viivituse järel uuesti välja. Meetod controller.close()
kutsutakse välja, kui loendur jõuab 10-ni, andes märku, et voog on lõppenud.
ReadableStreami tarbimine
Andmete tarbimiseks ReadableStreamist saate kasutada ReadableStreamDefaultReader
'it. Lugeja pakub meetodeid tükkide lugemiseks voost. Neist kõige olulisem on meetod read()
, mis tagastab lubaduse (promise), mis laheneb objektiga, mis sisaldab andmetükki ja lippu, mis näitab, kas voog on lõppenud.
Siin on näide andmete tarbimisest eelmises näites loodud ReadableStreamist:
const reader = readableStream.getReader();
async function read() {
const { done, value } = await reader.read();
if (done) {
console.log('Stream complete');
return;
}
console.log('Received:', value);
read();
}
read();
Selles näites loeb funktsioon read()
voost tüki, logib selle konsooli ja kutsub end seejärel uuesti välja, kuni voog on lõppenud.
WritableStreami loomine
Saate luua WritableStreami, kasutades konstruktorit WritableStream()
. Konstruktor võtab argumendiks objekti, mis võib määratleda mitu meetodit voo käitumise kontrollimiseks. Neist kõige olulisemad on meetod write()
, mida kutsutakse välja, kui andmetükk on kirjutamiseks valmis, meetod close()
, mida kutsutakse välja voo sulgemisel, ja meetod abort()
, mida kutsutakse välja voo katkestamisel.
Siin on näide WritableStreami loomisest, mis logib iga andmetüki konsooli:
const writableStream = new WritableStream({
write(chunk) {
console.log('Writing:', chunk);
return Promise.resolve(); // Märgib edu
},
close() {
console.log('Stream closed');
},
abort(err) {
console.error('Stream aborted:', err);
},
});
Selles näites logib meetod write()
tĂĽki konsooli ja tagastab lubaduse, mis laheneb, kui tĂĽkk on edukalt kirjutatud. Meetodid close()
ja abort()
logivad sõnumeid konsooli vastavalt voo sulgemisel või katkestamisel.
WritableStreami kirjutamine
Andmete kirjutamiseks WritableStreami saate kasutada WritableStreamDefaultWriter
'it. Kirjutaja pakub meetodeid tükkide kirjutamiseks voogu. Neist kõige olulisem on meetod write()
, mis võtab argumendiks andmetüki ja tagastab lubaduse, mis laheneb, kui tükk on edukalt kirjutatud.
Siin on näide andmete kirjutamisest eelmises näites loodud WritableStreami:
const writer = writableStream.getWriter();
async function writeData() {
await writer.write('Hello, world!');
await writer.close();
}
writeData();
Selles näites kirjutab funktsioon writeData()
stringi "Hello, world!" voogu ja seejärel sulgeb voo.
TransformStreami loomine
Saate luua TransformStreami, kasutades konstruktorit TransformStream()
. Konstruktor võtab argumendiks objekti, mis võib määratleda mitu meetodit voo käitumise kontrollimiseks. Neist kõige olulisemad on meetod transform()
, mida kutsutakse välja, kui andmetükk on teisendamiseks valmis, ja meetod flush()
, mida kutsutakse välja voo sulgemisel.
Siin on näide TransformStreami loomisest, mis teisendab iga andmetüki suurtähtedeks:
const transformStream = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
},
flush(controller) {
// Valikuline: sooritage mis tahes viimased toimingud voo sulgemisel
},
});
Selles näites teisendab meetod transform()
tüki suurtähtedeks ja paneb selle kontrolleri järjekorda. Meetod flush()
kutsutakse välja voo sulgemisel ja seda saab kasutada mis tahes viimaste toimingute tegemiseks.
TransformStreamide kasutamine torudes
TransformStreamid on kõige kasulikumad, kui need on aheldatud andmetöötlustorude loomiseks. Saate kasutada meetodit pipeThrough()
, et ühendada ReadableStream TransformStreamiga ja seejärel WritableStreamiga.
Siin on näide toru loomisest, mis loeb andmeid ReadableStreamist, teisendab need TransformStreami abil suurtähtedeks ja kirjutab seejärel WritableStreami:
const readableStream = new ReadableStream({
start(controller) {
controller.enqueue('hello');
controller.enqueue('world');
controller.close();
},
});
const transformStream = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
},
});
const writableStream = new WritableStream({
write(chunk) {
console.log('Writing:', chunk);
return Promise.resolve();
},
});
readableStream.pipeThrough(transformStream).pipeTo(writableStream);
Selles näites ühendab meetod pipeThrough()
readableStream
'i transformStream
'iga ja seejärel ühendab meetod pipeTo()
transformStream
'i writableStream
'iga. Andmed voolavad ReadableStreamist läbi TransformStreami (kus need teisendatakse suurtähtedeks) ja seejärel WritableStreami (kus need logitakse konsooli).
Vastusurve
Vastusurve on Web Streams API-s ülioluline mehhanism, mis takistab kiirel tootjal aeglast tarbijat üle koormamast. Kui tarbija ei suuda andmete tootmise kiirusega sammu pidada, saab ta tootjale märku anda, et see aeglustaks. See saavutatakse voo kontrolleri ning lugeja/kirjutaja objektide kaudu.
Kui ReadableStreami sisemine järjekord on täis, ei kutsuta meetodit pull()
välja enne, kui järjekorras on vaba ruumi. Samamoodi võib WritableStreami meetod write()
tagastada lubaduse, mis laheneb alles siis, kui voog on valmis rohkem andmeid vastu võtma.
Vastusurvet õigesti käsitledes saate tagada, et teie andmetöötlustorud on vastupidavad ja tõhusad, isegi kui tegelete erinevate andmeedastuskiirustega.
Kasutusjuhud ja näited
1. Suurte failide töötlemine
Web Streams API on ideaalne suurte failide töötlemiseks ilma neid täielikult mällu laadimata. Saate lugeda faili tükkhaaval, töödelda iga tükki ja kirjutada tulemused teise faili või voogu.
async function processFile(inputFile, outputFile) {
const readableStream = fs.createReadStream(inputFile).pipeThrough(new TextDecoderStream());
const writableStream = fs.createWriteStream(outputFile).pipeThrough(new TextEncoderStream());
const transformStream = new TransformStream({
transform(chunk, controller) {
// Näide: teisenda iga rida suurtähtedeks
const lines = chunk.split('\n');
lines.forEach(line => controller.enqueue(line.toUpperCase() + '\n'));
}
});
await readableStream.pipeThrough(transformStream).pipeTo(writableStream);
console.log('File processing complete!');
}
// Kasutusnäide (nõuab Node.js-i)
// const fs = require('fs');
// processFile('input.txt', 'output.txt');
2. Võrgupäringute käsitlemine
Saate kasutada Web Streams API-d võrgupäringutest saadud andmete töötlemiseks, näiteks API vastuste või serverist saadetud sündmuste (server-sent events) puhul. See võimaldab teil alustada andmete töötlemist kohe, kui need saabuvad, selle asemel, et oodata kogu vastuse allalaadimist.
async function fetchAndProcessData(url) {
const response = await fetch(url);
const reader = response.body.getReader();
const decoder = new TextDecoder();
try {
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
const text = decoder.decode(value);
// Töötle vastuvõetud andmeid
console.log('Received:', text);
}
} catch (error) {
console.error('Error reading from stream:', error);
} finally {
reader.releaseLock();
}
}
// Kasutusnäide
// fetchAndProcessData('https://example.com/api/data');
3. Reaalajas andmevood
Veebivood sobivad ka reaalajas andmevoogude käsitlemiseks, näiteks aktsiahindade või andurite näitude puhul. Saate ühendada ReadableStreami andmeallikaga ja töödelda saabuvaid andmeid nende saabumisel.
// Näide: reaalajas andmevoo simuleerimine
const readableStream = new ReadableStream({
start(controller) {
let intervalId = setInterval(() => {
const data = Math.random(); // Simuleeri anduri näitu
controller.enqueue(`Data: ${data.toFixed(2)}`);
}, 1000);
this.cancel = () => {
clearInterval(intervalId);
controller.close();
};
},
cancel() {
this.cancel();
}
});
const reader = readableStream.getReader();
async function readStream() {
try {
while (true) {
const { done, value } = await reader.read();
if (done) {
console.log('Stream closed.');
break;
}
console.log('Received:', value);
}
} catch (error) {
console.error('Error reading from stream:', error);
} finally {
reader.releaseLock();
}
}
readStream();
// Peata voog 10 sekundi pärast
setTimeout(() => {readableStream.cancel()}, 10000);
Web Streams API kasutamise eelised
- Parem jõudlus: Töötle andmeid järk-järgult, vähendades mälukasutust ja parandades reageerimisvõimet.
- Täiustatud mälu haldamine: Väldi tervete andmekogumite mällu laadimist, mis on eriti kasulik suurte failide või võrguvoogude puhul.
- Parem kasutajakogemus: Alusta andmete töötlemist ja kuvamist varem, pakkudes interaktiivsemat ja reageerimisvõimelisemat kasutajakogemust.
- Lihtsustatud andmetöötlus: Loo modulaarseid ja korduvkasutatavaid andmetöötlustorusid, kasutades TransformStreame.
- Vastusurve tugi: Käsitle muutuvaid andmeedastuskiirusi ja hoia ära tarbijate ülekoormamine.
Kaalutlused ja parimad praktikad
- Vigade käsitlemine: Rakenda robustset veakäsitlust, et sujuvalt käsitleda voo vigu ja vältida rakenduse ootamatut käitumist.
- Ressursside haldamine: Vabasta ressursid nõuetekohaselt, kui voogusid enam ei vajata, et vältida mälulekkeid. Kasuta
reader.releaseLock()
ja veendu, et vood suletakse või katkestatakse, kui see on asjakohane. - Kodeerimine ja dekodeerimine: Kasuta
TextEncoderStream
jaTextDecoderStream
tekstipõhiste andmete käsitlemiseks, et tagada korrektne märgikodeering. - Brauseri ühilduvus: Kontrolli brauseri ühilduvust enne Web Streams API kasutamist ja kaalu vanemate brauserite jaoks polüfillide kasutamist.
- Testimine: Testi oma andmetöötlustorusid põhjalikult, et tagada nende korrektne toimimine erinevates tingimustes.
Kokkuvõte
Web Streams API pakub võimsat ja tõhusat viisi voogandmete käsitlemiseks JavaScriptis. Mõistes põhimõisteid ja kasutades erinevaid vootüüpe, saate luua vastupidavaid ja reageerimisvõimelisi veebirakendusi, mis saavad hõlpsasti hakkama suurte failide, võrgupäringute ja reaalajas andmevoogudega. Vastusurve rakendamine ning veakäsitluse ja ressursside haldamise parimate tavade järgimine tagab, et teie andmetöötlustorud on usaldusväärsed ja suure jõudlusega. Kuna veebirakendused arenevad ja käsitlevad üha keerukamaid andmeid, muutub Web Streams API oluliseks tööriistaks arendajatele kogu maailmas.