خواننده استریم جاوااسکریپت: مصرف ناهمزمان داده

API استریم‌های وب (Web Streams API) یک مکانیزم قدرتمند برای مدیریت ناهمزمان جریان‌های داده در جاوااسکریپت فراهم می‌کند. در مرکز این API، رابط ReadableStream قرار دارد که یک منبع داده را نمایندگی می‌کند، و رابط ReadableStreamReader که به شما اجازه می‌دهد داده را از یک ReadableStream مصرف کنید. این راهنمای جامع به بررسی مفاهیم، کاربرد و بهترین شیوه‌های مرتبط با خواننده‌های استریم جاوااسکریپت با تمرکز بر مصرف ناهمزمان داده می‌پردازد.

درک استریم‌های وب و خواننده‌های استریم

استریم‌های وب چیستند؟

استریم‌های وب یک بلوک سازنده بنیادی برای مدیریت ناهمزمان داده در برنامه‌های وب مدرن هستند. آنها به شما اجازه می‌دهند داده را به صورت تدریجی و همزمان با در دسترس قرار گرفتن پردازش کنید، به جای اینکه منتظر بمانید تا کل منبع داده بارگذاری شود. این ویژگی به خصوص برای مدیریت فایل‌های بزرگ، درخواست‌های شبکه و فیدهای داده زنده مفید است.

مزایای کلیدی استفاده از استریم‌های وب عبارتند از:

• عملکرد بهبود یافته: پردازش تکه‌های داده به محض رسیدن، که باعث کاهش تأخیر و بهبود پاسخگویی می‌شود.
• کارایی حافظه: مدیریت مجموعه داده‌های بزرگ بدون نیاز به بارگذاری کل داده در حافظه.
• عملیات ناهمزمان: پردازش داده به صورت غیر مسدود کننده (non-blocking) به رابط کاربری اجازه می‌دهد تا پاسخگو باقی بماند.
• پایپینگ و تبدیل: استریم‌ها می‌توانند به یکدیگر متصل (piped) و تبدیل شوند، که امکان ایجاد خطوط لوله پردازش داده پیچیده را فراهم می‌کند.

ReadableStream و ReadableStreamReader

یک ReadableStream یک منبع داده را نمایندگی می‌کند که می‌توانید از آن بخوانید. این استریم می‌تواند از منابع مختلفی مانند درخواست‌های شبکه (با استفاده از fetch)، عملیات سیستم فایل یا حتی تولیدکنندگان داده سفارشی ایجاد شود.

یک ReadableStreamReader یک رابط است که به شما امکان خواندن داده از یک ReadableStream را می‌دهد. انواع مختلفی از خواننده‌ها در دسترس هستند، از جمله:

• ReadableStreamDefaultReader: رایج‌ترین نوع، که برای خواندن جریان‌های بایت استفاده می‌شود.
• ReadableStreamBYOBReader: برای خواندن با بافر شخصی (bring your own buffer) استفاده می‌شود، که به شما اجازه می‌دهد یک بافر ارائه شده را مستقیماً با داده پر کنید. این روش به ویژه برای عملیات بدون کپی (zero-copy) کارآمد است.
• ReadableStreamTextDecoder (نه یک خواننده مستقیم، اما مرتبط): اغلب در کنار یک خواننده برای رمزگشایی داده‌های متنی از یک جریان بایت استفاده می‌شود.

کاربرد پایه ReadableStreamDefaultReader

بیایید با یک مثال ساده از خواندن داده از یک ReadableStream با استفاده از ReadableStreamDefaultReader شروع کنیم.

مثال: خواندن از یک پاسخ Fetch

این مثال نشان می‌دهد که چگونه می‌توان داده را از یک URL دریافت و به صورت یک استریم خواند:

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

      // Process the data chunk (value is a Uint8Array)
      console.log("Received chunk:", value);
    }
  } catch (error) {
    console.error("Error reading from stream:", error);
  } finally {
    reader.releaseLock(); // Release the lock when done
  }
}

// Example usage
readStreamFromURL("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

توضیح:

1. fetch(url): داده را از URL مشخص شده دریافت می‌کند.
2. response.body.getReader(): یک ReadableStreamDefaultReader از بدنه پاسخ (response body) دریافت می‌کند.
3. reader.read(): به صورت ناهمزمان یک تکه داده از استریم می‌خواند. یک promise برمی‌گرداند که به یک شیء با ویژگی‌های done و value حل می‌شود.
4. done: یک مقدار بولی (boolean) که نشان می‌دهد آیا استریم به طور کامل خوانده شده است یا خیر.
5. value: یک Uint8Array حاوی تکه داده.
6. حلقه: حلقه while تا زمانی که done برابر با true شود به خواندن داده ادامه می‌دهد.
7. مدیریت خطا: بلوک try...catch خطاهای احتمالی در حین خواندن استریم را مدیریت می‌کند.
8. reader.releaseLock(): قفل خواننده را آزاد می‌کند و به مصرف‌کنندگان دیگر اجازه می‌دهد به استریم دسترسی پیدا کنند. این کار برای جلوگیری از نشت حافظه و اطمینان از مدیریت صحیح منابع بسیار مهم است.

تکرار ناهمزمان با for-await-of

یک روش خلاصه‌تر برای خواندن از یک ReadableStream استفاده از حلقه for-await-of است:

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

  try {
    for await (const chunk of reader) {
      // Process the data chunk (chunk is a Uint8Array)
      console.log("Received chunk:", chunk);
    }

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

// Example usage
readStreamFromURL_forAwait("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

این رویکرد کد را ساده‌تر کرده و خوانایی آن را بهبود می‌بخشد. حلقه for-await-of به طور خودکار تکرار ناهمزمان و پایان استریم را مدیریت می‌کند.

رمزگشایی متن با ReadableStreamTextDecoder

اغلب، شما نیاز به رمزگشایی داده‌های متنی از یک جریان بایت دارید. API TextDecoder می‌تواند در کنار یک ReadableStreamReader برای مدیریت کارآمد این موضوع استفاده شود.

مثال: رمزگشایی متن از یک استریم

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

// Example usage
readTextFromStream("https://example.com/text_data.txt", 'utf-8');

            

              
                Copy
              
            
          

توضیح:

1. TextDecoder(encoding): یک شیء TextDecoder با انکدینگ مشخص شده (مانند 'utf-8', 'iso-8859-1') ایجاد می‌کند.
2. decoder.decode(value, { stream: true }): آرایه Uint8Array (value) را به یک رشته رمزگشایی می‌کند. گزینه { stream: true } برای مدیریت کاراکترهای چند بایتی که ممکن است بین تکه‌ها تقسیم شوند، حیاتی است. این گزینه حالت داخلی رمزگشا را بین فراخوانی‌ها حفظ می‌کند.
3. انباشت: از آنجا که استریم ممکن است کاراکترها را به صورت تکه‌ای تحویل دهد، رشته‌های رمزگشایی شده در متغیر accumulatedText جمع می‌شوند تا اطمینان حاصل شود که کاراکترهای کامل پردازش می‌شوند.

مدیریت خطاها و لغو استریم

مدیریت خطای قوی هنگام کار با استریم‌ها ضروری است. در اینجا نحوه مدیریت خطاها و لغو استریم‌ها به صورت صحیح توضیح داده شده است.

مدیریت خطا

بلوک try...catch در مثال‌های قبلی خطاهایی را که در طول فرآیند خواندن رخ می‌دهند مدیریت می‌کند. با این حال، شما همچنین می‌توانید خطاهایی را که ممکن است هنگام ایجاد استریم یا پردازش تکه‌های داده رخ دهند، مدیریت کنید.

لغو استریم

شما می‌توانید یک استریم را برای متوقف کردن جریان داده لغو کنید. این کار زمانی مفید است که دیگر به داده نیاز ندارید یا زمانی که خطایی رخ می‌دهد که قابل بازیابی نیست.

            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(); // Cancel the fetch request
    }, 5000); // Cancel after 5 seconds

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

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

      // Process the data chunk
      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 {
    // It's good practice to always release the lock
    // even after an error.
    if(reader) {
      reader.releaseLock();
    }
  }
}

// Example usage
cancelStream("https://example.com/large_data.txt");

            

              
                Copy
              
            
          

توضیح:

1. AbortController: یک AbortController ایجاد می‌کند که به شما اجازه می‌دهد یک درخواست لغو را سیگنال دهید.
2. signal: ویژگی signal از AbortController به گزینه‌های fetch ارسال می‌شود.
3. controller.abort(): فراخوانی abort() لغو را سیگنال می‌دهد.
4. مدیریت خطا: بلوک catch بررسی می‌کند که آیا خطا از نوع AbortError است یا خیر، که نشان دهنده لغو شدن استریم است.
5. آزاد کردن قفل: بلوک `finally` اطمینان می‌دهد که `reader.releaseLock()` حتی در صورت بروز خطا فراخوانی می‌شود تا از نشت حافظه جلوگیری شود.

ReadableStreamBYOBReader: بافر خود را بیاورید

ReadableStreamBYOBReader به شما اجازه می‌دهد تا یک بافر ارائه شده را مستقیماً با داده‌های استریم پر کنید. این روش به ویژه برای عملیات بدون کپی (zero-copy) مفید است، جایی که می‌خواهید از کپی کردن غیرضروری داده‌ها جلوگیری کنید. توجه داشته باشید که خواننده‌های BYOB به استریمی نیاز دارند که به طور خاص برای پشتیبانی از آنها طراحی شده باشد و ممکن است با همه منابع `ReadableStream` کار نکند. استفاده از آنها معمولاً عملکرد بهتری برای داده‌های باینری فراهم می‌کند.

این مثال (تا حدودی ساختگی) را برای نشان دادن استفاده از `ReadableStreamBYOBReader` در نظر بگیرید:

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

  // Check if the stream is BYOB-compatible.
  if (!response.body.readable || !response.body.readable.pipeTo) {
    console.error("Stream is not BYOB-compatible.");
    return;
  }

  const stream = response.body.readable;

  // Create a Uint8Array to hold the data.
  const bufferSize = 1024; // Define an appropriate buffer size.
  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' is the same Uint8Array you passed to 'read'.
      // Only the section of the buffer filled by this read
      // is guaranteed to contain valid data. Check `value.byteLength`
      // to see how many bytes were actually written.

      console.log(`Read ${value.byteLength} bytes into the buffer.`);
      // Process the filled portion of the buffer. For example:
      // for (let i = 0; i < value.byteLength; i++) {
      //   console.log(value[i]); // Process each byte
      // }


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

// Example Usage
readWithBYOB("https://example.com/binary_data.bin");
            

              
                Copy
              
            
          

جنبه‌های کلیدی این مثال:

1. سازگاری با BYOB: همه استریم‌ها با خواننده‌های BYOB سازگار نیستند. شما معمولاً به یک سرور نیاز دارید که ارسال داده‌ها را به روشی بهینه برای این نوع مصرف درک کرده و پشتیبانی کند. این مثال یک بررسی اولیه دارد.
2. تخصیص بافر: شما یک Uint8Array ایجاد می‌کنید که به عنوان بافری عمل می‌کند که داده‌ها مستقیماً در آن خوانده می‌شوند.
3. دریافت خواننده BYOB: از `stream.getReader({mode: 'byob'})` برای ایجاد یک `ReadableStreamBYOBReader` استفاده کنید.
4. `reader.read(buffer)`: به جای `reader.read()` که یک آرایه جدید برمی‌گرداند، شما `reader.read(buffer)` را فراخوانی می‌کنید و بافر از پیش تخصیص داده شده خود را به آن ارسال می‌کنید.
5. پردازش داده‌ها: `value` بازگشتی از `reader.read(buffer)` *همان* بافری است که شما ارسال کرده‌اید. با این حال، شما فقط می‌دانید که *بخشی* از بافر تا `value.byteLength` حاوی داده‌های معتبر است. شما باید ردیابی کنید که واقعاً چند بایت نوشته شده است.

موارد استفاده عملی

۱. پردازش فایل‌های لاگ بزرگ

استریم‌های وب برای پردازش فایل‌های لاگ بزرگ بدون بارگذاری کل فایل در حافظه ایده‌آل هستند. شما می‌توانید فایل را خط به خط بخوانید و هر خط را به محض در دسترس قرار گرفتن پردازش کنید. این روش به ویژه برای تحلیل لاگ‌های سرور، لاگ‌های برنامه یا سایر فایل‌های متنی بزرگ مفید است.

۲. فیدهای داده زنده

استریم‌های وب می‌توانند برای مصرف فیدهای داده زنده مانند قیمت سهام، داده‌های حسگرها یا به‌روزرسانی‌های رسانه‌های اجتماعی استفاده شوند. شما می‌توانید یک اتصال به منبع داده برقرار کرده و داده‌های ورودی را به محض رسیدن پردازش کنید و رابط کاربری را در زمان واقعی به‌روز کنید.

۳. پخش ویدئو

استریم‌های وب جزء اصلی فناوری‌های مدرن پخش ویدئو هستند. شما می‌توانید داده‌های ویدئو را به صورت تکه‌ای دریافت کرده و هر تکه را به محض رسیدن رمزگشایی کنید، که امکان پخش ویدئوی روان و کارآمد را فراهم می‌کند. این روش توسط پلتفرم‌های محبوب پخش ویدئو مانند یوتیوب و نتفلیکس استفاده می‌شود.

۴. آپلود فایل

استریم‌های وب می‌توانند برای مدیریت کارآمدتر آپلود فایل‌ها استفاده شوند. شما می‌توانید داده‌های فایل را به صورت تکه‌ای بخوانید و هر تکه را به محض در دسترس قرار گرفتن به سرور ارسال کنید، که باعث کاهش ردپای حافظه در سمت کلاینت می‌شود.

بهترین شیوه‌ها

1. همیشه قفل را آزاد کنید: پس از اتمام کار با استریم، reader.releaseLock() را فراخوانی کنید تا از نشت حافظه جلوگیری کرده و مدیریت صحیح منابع را تضمین کنید. از یک بلوک finally برای تضمین آزاد شدن قفل حتی در صورت بروز خطا استفاده کنید.
2. خطاها را به درستی مدیریت کنید: مدیریت خطای قوی برای شناسایی و مدیریت خطاهای احتمالی در حین خواندن استریم پیاده‌سازی کنید. پیام‌های خطای آموزنده به کاربر ارائه دهید.
3. از TextDecoder برای داده‌های متنی استفاده کنید: از API TextDecoder برای رمزگشایی داده‌های متنی از جریان‌های بایت استفاده کنید. به یاد داشته باشید که از گزینه { stream: true } برای کاراکترهای چند بایتی استفاده کنید.
4. خواننده‌های BYOB را برای داده‌های باینری در نظر بگیرید: اگر با داده‌های باینری کار می‌کنید و به حداکثر عملکرد نیاز دارید، استفاده از ReadableStreamBYOBReader را در نظر بگیرید.
5. از AbortController برای لغو استفاده کنید: از AbortController برای لغو صحیح استریم‌ها در زمانی که دیگر به داده‌ها نیاز ندارید، استفاده کنید.
6. اندازه‌های بافر مناسب را انتخاب کنید: هنگام استفاده از خواننده‌های BYOB، یک اندازه بافر مناسب بر اساس اندازه تکه داده مورد انتظار انتخاب کنید.
7. از عملیات مسدود کننده اجتناب کنید: اطمینان حاصل کنید که منطق پردازش داده شما غیر مسدود کننده است تا از فریز شدن رابط کاربری جلوگیری شود. از async/await برای انجام عملیات ناهمزمان استفاده کنید.
8. به انکدینگ کاراکترها توجه کنید: هنگام رمزگشایی متن، اطمینان حاصل کنید که از انکدینگ کاراکتر صحیح استفاده می‌کنید تا از نمایش متن به هم ریخته جلوگیری شود.

نتیجه‌گیری

خواننده‌های استریم جاوااسکریپت یک راه قدرتمند و کارآمد برای مدیریت مصرف ناهمزمان داده در برنامه‌های وب مدرن فراهم می‌کنند. با درک مفاهیم، کاربرد و بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید از استریم‌های وب برای بهبود عملکرد، کارایی حافظه و پاسخگویی برنامه‌های خود استفاده کنید. از پردازش فایل‌های بزرگ گرفته تا مصرف فیدهای داده زنده، استریم‌های وب یک راه‌حل چندمنظوره برای طیف گسترده‌ای از وظایف پردازش داده ارائه می‌دهند. با ادامه تکامل API استریم‌های وب، بدون شک نقش مهم‌تری در آینده توسعه وب ایفا خواهد کرد.