JavaScript Stream Reader: Asynkroninen datankulutus

Web Streams API tarjoaa tehokkaan mekanismin datavirtojen asynkroniseen käsittelyyn JavaScriptissä. Tämän API:n ytimessä on ReadableStream-rajapinta, joka edustaa datalähdettä, ja ReadableStreamReader-rajapinta, jonka avulla voit kuluttaa dataa ReadableStream-virrasta. Tämä kattava opas tutkii JavaScript Stream Readereihin liittyviä käsitteitä, käyttöä ja parhaita käytäntöjä keskittyen asynkroniseen datankulutukseen.

Web Streams- ja Stream Reader -rajapintojen ymmärtäminen

Mitä ovat Web Streams -rajapinnat?

Web Streams -rajapinnat ovat perustavanlaatuinen rakennuspalikka asynkroniselle datankäsittelylle nykyaikaisissa verkkosovelluksissa. Niiden avulla voit käsitellä dataa inkrementaalisesti sen tullessa saataville sen sijaan, että odottaisit koko datalähteen latautumista. Tämä on erityisen hyödyllistä suurten tiedostojen, verkkopyyntöjen ja reaaliaikaisten datasyötteiden käsittelyssä.

Web Streams -rajapintojen käytön keskeisiä etuja ovat:

• Parempi suorituskyky: Käsittele datapaketteja niiden saapuessa, mikä vähentää viivettä ja parantaa reagoivuutta.
• Muistitehokkuus: Käsittele suuria datajoukkoja lataamatta koko dataa muistiin.
• Asynkroniset operaatiot: Estämätön datankäsittely antaa käyttöliittymän pysyä reagoivana.
• Putkitus ja muunnos: Virtoja voidaan putkittaa ja muuntaa, mikä mahdollistaa monimutkaiset datankäsittelyketjut.

ReadableStream ja ReadableStreamReader

ReadableStream edustaa datalähdettä, josta voit lukea. Se voidaan luoda useista lähteistä, kuten verkkopyynnöistä (käyttäen fetch), tiedostojärjestelmän operaatioista tai jopa mukautetuista datageneraattoreista.

ReadableStreamReader on rajapinta, jonka avulla voit lukea dataa ReadableStream-virrasta. Saatavilla on erilaisia lukijatyyppejä, mukaan lukien:

• ReadableStreamDefaultReader: Yleisin tyyppi, jota käytetään tavuvirtojen lukemiseen.
• ReadableStreamBYOBReader: Käytetään "bring your own buffer" -lukemiseen, mikä mahdollistaa datan suoran täyttämisen annettuun puskuriin. Tämä on erityisen tehokasta nollakopio-operaatioissa.
• ReadableStreamTextDecoder (ei suora lukija, mutta liittyy aiheeseen): Käytetään usein yhdessä lukijan kanssa tekstidatan dekoodaamiseen tavuvirrasta.

ReadableStreamDefaultReaderin peruskäyttö

Aloitetaan perusesimerkillä datan lukemisesta ReadableStream-virrasta käyttäen ReadableStreamDefaultReader-lukijaa.

Esimerkki: Lukeminen Fetch-vastauksesta

Tämä esimerkki näyttää, kuinka dataa haetaan URL-osoitteesta ja luetaan se virtana:

            async function readStreamFromURL(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();

  try {
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      // Käsittele datapaketti (value on Uint8Array)
      console.log("Received chunk:", value);
    }
  } catch (error) {
    console.error("Error reading from stream:", error);
  } finally {
    reader.releaseLock(); // Vapauta lukko, kun valmis
  }
}

// Esimerkkikäyttö
readStreamFromURL("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Selitys:

1. fetch(url): Hakee datan määritetystä URL-osoitteesta.
2. response.body.getReader(): Hakee ReadableStreamDefaultReader-lukijan vastauksen rungosta.
3. reader.read(): Lukee asynkronisesti datapaketin virrasta. Palauttaa promisen, joka ratkeaa olioksi, jolla on done- ja value-ominaisuudet.
4. done: Boolean-arvo, joka ilmaisee, onko virta luettu kokonaan.
5. value: Uint8Array, joka sisältää datapaketin.
6. Silmukka: while-silmukka jatkaa datan lukemista, kunnes done on tosi.
7. Virheidenkäsittely: try...catch-lohko käsittelee mahdolliset virheet virran lukemisen aikana.
8. reader.releaseLock(): Vapauttaa lukijan lukon, mikä antaa muiden kuluttajien päästä käsiksi virtaan. Tämä on ratkaisevan tärkeää muistivuotojen estämiseksi ja resurssien asianmukaisen hallinnan varmistamiseksi.

Asynkroninen iteraatio for-await-of-silmukalla

Tiiviimpi tapa lukea ReadableStream-virrasta on käyttää for-await-of-silmukkaa:

            async function readStreamFromURL_forAwait(url) {
  const response = await fetch(url);
  const reader = response.body;

  try {
    for await (const chunk of reader) {
      // Käsittele datapaketti (chunk on Uint8Array)
      console.log("Received chunk:", chunk);
    }

    console.log("Stream complete");
  } catch (error) {
    console.error("Error reading from stream:", error);
  }
}

// Esimerkkikäyttö
readStreamFromURL_forAwait("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Tämä lähestymistapa yksinkertaistaa koodia ja parantaa luettavuutta. for-await-of-silmukka hoitaa automaattisesti virran asynkronisen iteroinnin ja päättämisen.

Tekstin dekoodaus ReadableStreamTextDecoderilla

Usein sinun täytyy dekoodata tekstidataa tavuvirrasta. TextDecoder-API:ta voidaan käyttää yhdessä ReadableStreamReader-lukijan kanssa tämän tehokkaaseen käsittelyyn.

Esimerkki: Tekstin dekoodaus virrasta

            async function readTextFromStream(url, encoding = 'utf-8') {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder(encoding);

  try {
    let accumulatedText = '';
    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      const textChunk = decoder.decode(value, { stream: true });
      accumulatedText += textChunk;
      console.log("Received and decoded chunk:", textChunk);
    }
    console.log("Accumulated Text: ", accumulatedText);
  } catch (error) {
    console.error("Error reading from stream:", error);
  } finally {
    reader.releaseLock();
  }
}

// Esimerkkikäyttö
readTextFromStream("https://example.com/text_data.txt", 'utf-8');

            

              
                Copy
              
            
          

Selitys:

1. TextDecoder(encoding): Luo TextDecoder-olion määritetyllä koodauksella (esim. 'utf-8', 'iso-8859-1').
2. decoder.decode(value, { stream: true }): Dekoodaa Uint8Array-taulukon (value) merkkijonoksi. { stream: true } -vaihtoehto on ratkaisevan tärkeä monibittisten merkkien käsittelyssä, jotka voivat jakautua eri pakettien välillä. Se ylläpitää dekooderin sisäistä tilaa kutsujen välillä.
3. Kerääminen: Koska virta voi toimittaa merkkejä paketeissa, dekoodatut merkkijonot kerätään accumulatedText-muuttujaan varmistaakseen, että kokonaiset merkit käsitellään.

Virheidenkäsittely ja virran peruuttaminen

Vankka virheidenkäsittely on olennaista virtojen kanssa työskennellessä. Näin voit käsitellä virheitä ja peruuttaa virtoja hallitusti.

Virheidenkäsittely

Edellisissä esimerkeissä oleva try...catch-lohko käsittelee virheitä, jotka tapahtuvat lukuprosessin aikana. Voit kuitenkin käsitellä myös virheitä, jotka saattavat ilmetä virtaa luotaessa tai datapaketteja käsiteltäessä.

Virran peruuttaminen

Voit peruuttaa virran pysäyttääksesi datan virtauksen. Tämä on hyödyllistä, kun et enää tarvitse dataa tai kun tapahtuu virhe, josta ei voi palautua.

            async function cancelStream(url) {
  const controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    const reader = response.body.getReader();

    setTimeout(() => {
      console.log("Cancelling stream...");
      controller.abort(); // Peruuta fetch-pyyntö
    }, 5000); // Peruuta 5 sekunnin kuluttua

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        console.log("Stream complete");
        break;
      }

      // Käsittele datapaketti
      console.log("Received chunk:", value);
    }
  } catch (error) {
    console.error("Error reading from stream:", error);
    if (error.name === 'AbortError') {
      console.log('Stream aborted by user');
    }
  } finally {
    // On hyvä käytäntö vapauttaa lukko aina
    // jopa virheen jälkeen.
    if(reader) {
      reader.releaseLock();
    }
  }
}

// Esimerkkikäyttö
cancelStream("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

Selitys:

1. AbortController: Luo AbortController-olion, jonka avulla voit lähettää peruutuspyynnön signaalin.
2. signal: AbortController-olion signal-ominaisuus välitetään fetch-kutsuun asetuksissa.
3. controller.abort(): Kutsumalla abort()-metodia lähetetään peruutusignaali.
4. Virheidenkäsittely: catch-lohko tarkistaa, onko virhe AbortError, mikä osoittaa, että virta peruutettiin.
5. Lukon vapauttaminen: `finally`-lohko varmistaa, että `reader.releaseLock()` kutsutaan, vaikka virhe tapahtuisi, estääkseen muistivuodot.

ReadableStreamBYOBReader: Tuo oma puskurisi

ReadableStreamBYOBReader mahdollistaa datan suoran täyttämisen annettuun puskuriin virrasta. Tämä on erityisen hyödyllistä nollakopio-operaatioissa, joissa halutaan välttää tarpeetonta datan kopiointia. Huomaa, että BYOB-lukijat vaativat virran, joka on erityisesti suunniteltu tukemaan niitä, eivätkä ne välttämättä toimi kaikkien `ReadableStream`-lähteiden kanssa. Niiden käyttö tarjoaa yleensä paremman suorituskyvyn binääridatalle.

Tarkastellaan tätä (hieman keinotekoista) esimerkkiä `ReadableStreamBYOBReader`:n käytöstä:

            async function readWithBYOB(url) {
  const response = await fetch(url);

  // Tarkista, onko virta BYOB-yhteensopiva.
  if (!response.body.readable || !response.body.readable.pipeTo) {
    console.error("Stream is not BYOB-compatible.");
    return;
  }

  const stream = response.body.readable;

  // Luo Uint8Array datan säilyttämistä varten.
  const bufferSize = 1024; // Määritä sopiva puskurin koko.
  const buffer = new Uint8Array(bufferSize);

  const reader = stream.getReader({ mode: 'byob' });

  try {
    while (true) {
      const { done, value } = await reader.read(buffer);

      if (done) {
        console.log("BYOB Stream complete.");
        break;
      }

      // 'value' on sama Uint8Array, jonka välitit 'read'-metodille.
      // Vain tämän lukuoperaation täyttämä osa puskurista
      // sisältää taatusti validia dataa. Tarkista `value.byteLength`
      // nähdäksesi, kuinka monta tavua todella kirjoitettiin.

      console.log(`Read ${value.byteLength} bytes into the buffer.`);
      // Käsittele puskurin täytetty osa. Esimerkiksi:
      // for (let i = 0; i < value.byteLength; i++) {
      //   console.log(value[i]); // Käsittele jokainen tavu
      // }


    }
  } catch (error) {
    console.error("Error during BYOB stream reading:", error);
  } finally {
    reader.releaseLock();
  }
}

// Esimerkkikäyttö
readWithBYOB("https://example.com/binary_data.bin");
            

              
                Copy
              
            
          

Tämän esimerkin keskeiset näkökohdat:

1. BYOB-yhteensopivuus: Kaikki virrat eivät ole yhteensopivia BYOB-lukijoiden kanssa. Tarvitset tyypillisesti palvelimen, joka ymmärtää ja tukee datan lähettämistä tälle kulutustavalle optimoidulla tavalla. Esimerkissä on perustoiminen tarkistus.
2. Puskurin varaaminen: Luot Uint8Array-taulukon, joka toimii puskurina, johon data luetaan suoraan.
3. BYOB-lukijan hankkiminen: Käytä `stream.getReader({mode: 'byob'})` luodaksesi `ReadableStreamBYOBReader`-lukijan.
4. reader.read(buffer): Sen sijaan, että käyttäisit `reader.read()`, joka palauttaa uuden taulukon, kutsut `reader.read(buffer)` ja välität sille ennalta varatun puskurisi.
5. Datan käsittely: `reader.read(buffer)`-metodin palauttama `value` *on* sama puskuri, jonka sille välitit. Tiedät kuitenkin vain, että puskurin osa `value.byteLength`-pituuteen asti sisältää validia dataa. Sinun on pidettävä kirjaa siitä, kuinka monta tavua todella kirjoitettiin.

Käytännön käyttötapauksia

1. Suurten lokitiedostojen käsittely

Web Streams -rajapinnat ovat ihanteellisia suurten lokitiedostojen käsittelyyn lataamatta koko tiedostoa muistiin. Voit lukea tiedostoa rivi riviltä ja käsitellä jokaisen rivin sen tullessa saataville. Tämä on erityisen hyödyllistä palvelinlokien, sovelluslokien tai muiden suurten tekstitiedostojen analysoinnissa.

2. Reaaliaikaiset datasyötteet

Web Streams -rajapintoja voidaan käyttää reaaliaikaisten datasyötteiden, kuten osakekurssien, sensoridatan tai sosiaalisen median päivitysten, kuluttamiseen. Voit muodostaa yhteyden datalähteeseen ja käsitellä saapuvaa dataa sen saapuessa, päivittäen käyttöliittymää reaaliajassa.

3. Videon suoratoisto

Web Streams -rajapinnat ovat nykyaikaisten videon suoratoistoteknologioiden ydinkomponentti. Voit hakea videodataa paketeissa ja dekoodata jokaisen paketin sen saapuessa, mikä mahdollistaa sujuvan ja tehokkaan videotoiston. Tätä käyttävät suositut videon suoratoistoalustat, kuten YouTube ja Netflix.

4. Tiedostojen lataukset

Web Streams -rajapintoja voidaan käyttää tiedostojen latausten tehokkaampaan käsittelyyn. Voit lukea tiedoston dataa paketeissa ja lähettää jokaisen paketin palvelimelle sen tullessa saataville, mikä vähentää muistin käyttöä asiakaspäässä.

Parhaat käytännöt

1. Vapauta lukko aina: Kutsu reader.releaseLock(), kun olet valmis virran kanssa, estääksesi muistivuodot ja varmistaaksesi resurssien asianmukaisen hallinnan. Käytä finally-lohkoa taataksesi, että lukko vapautetaan, vaikka virhe tapahtuisi.
2. Käsittele virheet hallitusti: Toteuta vankka virheidenkäsittely mahdollisten virheiden nappaamiseksi ja käsittelemiseksi virran lukemisen aikana. Tarjoa käyttäjälle informatiivisia virheilmoituksia.
3. Käytä TextDecoderia tekstidatalle: Käytä TextDecoder-API:ta tekstidatan dekoodaamiseen tavuvirroista. Muista käyttää { stream: true } -vaihtoehtoa monibittisille merkeille.
4. Harkitse BYOB-lukijoita binääridatalle: Jos työskentelet binääridatan kanssa ja tarvitset maksimaalista suorituskykyä, harkitse ReadableStreamBYOBReader-lukijan käyttöä.
5. Käytä AbortControlleria peruutukseen: Käytä AbortController-oliota virtojen hallittuun peruuttamiseen, kun et enää tarvitse dataa.
6. Valitse sopivat puskurikoot: Kun käytät BYOB-lukijoita, valitse sopiva puskurin koko odotetun datapaketin koon perusteella.
7. Vältä estäviä operaatioita: Varmista, että datankäsittelylogiikkasi ei ole estävä, jotta vältät käyttöliittymän jäätymisen. Käytä async/await-syntaksia asynkronisten operaatioiden suorittamiseen.
8. Ole tarkkana merkistökoodausten kanssa: Kun dekoodaat tekstiä, varmista, että käytät oikeaa merkistökoodausta välttääksesi sekaantunutta tekstiä.

Yhteenveto

JavaScript Stream Readerit tarjoavat tehokkaan ja suorituskykyisen tavan käsitellä asynkronista datankulutusta nykyaikaisissa verkkosovelluksissa. Ymmärtämällä tässä oppaassa esitetyt käsitteet, käytön ja parhaat käytännöt voit hyödyntää Web Streams -rajapintoja parantaaksesi sovellustesi suorituskykyä, muistitehokkuutta ja reagoivuutta. Suurten tiedostojen käsittelystä reaaliaikaisten datasyötteiden kuluttamiseen, Web Streams -rajapinnat tarjoavat monipuolisen ratkaisun laajaan valikoimaan datankäsittelytehtäviä. Web Streams API:n jatkaessa kehittymistään, se tulee epäilemättä olemaan yhä tärkeämmässä roolissa verkkokehityksen tulevaisuudessa.