لنبدأ بشرح كيفية إرسال البيانات عبر الويب. ولا يتم إرساله كدفق مستمر واحد؛ بدلا من ذلك، يتم تقسيمها إلى قطع أصغر. على الطرف المتلقي، يكون المستهلك أو التطبيق مسؤولاً عن إعادة تجميع هذه القطع بالترتيب والتنسيق الصحيح بمجرد استلام جميع البيانات. تحدث هذه العملية تلقائيًا بالنسبة للصور ومقاطع الفيديو وأنواع البيانات الكبيرة نسبيًا الأخرى.

إذن ما تقدمه Streams API هو وسيلة بدلاً من انتظار توفر بياناتك الكاملة

1. تعامل مع البيانات في الوقت الفعلي حيث يتم تلقيها كأجزاء خلال مرحلة المستهلك وهذا مفيد جدًا وضروري عند التعامل مع كميات كبيرة من البيانات مثل الأمثلة التي سأعرضها في هذه المقالة.
2. كما يسمح لك بمعاملة بياناتنا كتدفق وهو أمر مفيد على الجانب الخلفي عندما تريد إرسال نوع معين من القطع وفي الواجهة الأمامية عند استخدام العمال المشابهين لإرسال ملفات كبيرة عبر الشبكة"

نص منقح: "ما تقدمه Streams API هو وسيلة للتعامل مع البيانات فور وصولها، بدلاً من انتظار إتاحة مجموعة البيانات بأكملها. فيما يلي فائدتان رئيسيتان:

1. معالجة البيانات في الوقت الفعلي: تتيح لك معالجة البيانات في الوقت الفعلي حيث يتم استلامها على شكل أجزاء. تعتبر هذه الإمكانية حاسمة عند التعامل مع كميات كبيرة من البيانات، مثل الأمثلة التي سأناقشها في هذه المقالة. (تركز هذه المقالة على الجزء الأول)
2. إدارة البيانات المستندة إلى الدفق: تمكنك Streams API من التعامل مع البيانات كتدفق مستمر. يعد هذا مفيدًا على الواجهة الخلفية لإرسال البيانات في أجزاء محددة وعلى الواجهة الأمامية لاستخدام العاملين على الويب لتحميل الملفات الكبيرة بكفاءة.

لنبدأ بمقارنة الطريقة التقليدية لتلقي البيانات باستخدام Fetch API مع نهج Streams API الجديد.

النهج التقليدي مع Fetch API

fetch("url") .then((response) => {
// Note that there is a middle step before we receive the final data
// Let's see what we actually receive
console.log(response.body); return response.text(); }) .then((data) => { // Perform operations with the data
});

في هذا المثال، Response.body هو كائن ReadableStream:

ReadableStream { locked: false, state: 'readable', supportsBYOB: true }

هنا، نواجه المكون الأول لواجهة برمجة تطبيقات Streams: ReadableStream. يقوم مُنشئ ReadableStream بإنشاء وإرجاع كائن دفق قابل للقراءة، مما يسمح لنا بالتعامل مع بيانات الدفق بشكل أكثر كفاءة. يمكننا استخدام هذا المُنشئ لإدارة البيانات في أجزاء بدلاً من انتظار توفر مجموعة البيانات بأكملها.

{ arrayBuffer(): Promise; blob(): Promise; formData(): Promise; json(): Promise; text(): Promise; }

نحتاج إلى تنفيذ وظيفة تتعامل مع الكائن للوصول إلى البيانات أثناء إرسالها في الوقت الفعلي. يجب أن تكون هذه الوظيفة:
1 احصل على ReadableStream كوعد.

1. انتظر حتى يتم استلام كافة أجزاء البيانات.
2. دمج القطع في مجموعة البيانات الكاملة. قم بإرجاع البيانات الكاملة كوعد.

الغوص في الدفق القابل للقراءة

interface ReadableStream {
  readonly locked: boolean;
  cancel(reason?: any): Promise;
  getReader(options: { mode: "byob" }): ReadableStreamBYOBReader;
  getReader(): ReadableStreamDefaultReader;
  getReader(options?: ReadableStreamGetReaderOptions): ReadableStreamReader;
  pipeThrough(
    transform: ReadableWritablePair,
    options?: StreamPipeOptions
  ): ReadableStream;
  pipeTo(
    destination: WritableStream,
    options?: StreamPipeOptions
  ): Promise;
  tee(): [ReadableStream, ReadableStream];
}

interface ReadableStreamDefaultReader
  extends ReadableStreamGenericReader {
  read(): Promise>;
  releaseLock(): void;
}

للعمل مع الدفق، نستخدم getReader() الذي يقوم بإرجاع ReadableStreamDefaultReader.

إليك مثال حيث قمنا بتقديم طلب إلى واجهة برمجة تطبيقات Lichess.org للألعاب بتنسيق PGN (فكر في الأمر كنص) لمستخدم معين. يجب أن تكون النتيجة النهائية نصية.

fetch("https://lichess.org/api/games/user/gg").then((response) => {
  console.log(response);
  const readablestream = response.body;
  console.log(readablestream);
  const reader = readablestream.getReader();
  console.log(reader);
});

الإخراج:

ReadableStream { locked: false, state: 'readable', supportsBYOB: true } ReadableStreamDefaultReader { stream: ReadableStream { locked: true, state: 'readable', supportsBYOB: true }, readRequests: 0, close: Promise {  } }

لاحظ أنه لا يمكن أن يكون لديك عدة قراء في نفس الوقت لأن getReader() سوف يلقي خطأ إذا كان ReadableStream.locked = صحيح، لذلك إذا كنت تريد تغيير القارئ عليك أولاً تحرير القفل باستخدام ReadableStreamDefaultReader. إطلاق القفل ()

fetch("https://lichess.org/api/games/user/gg").then((response) => {
  const readablestream = response.body;
  console.log(readablestream);
  const reader = readablestream.getReader();
  console.log(reader);
  try {
    reader.releaseLock();
    const reader2 = readablestream.getReader(); 
// won't throw an error
    const reader3 = readablestream.getReader(); 
// will throw an error
  } catch (e) {
    console.error(e.message); 
// Invalid state: ReadableStream is locked
  }
});

الآن نستخدم دالة القراءة داخل القارئ والتي تحتوي على متغيرين

• قيمة: تحتوي على محتوى القطعة الحالي في UintArray والذي يمكننا تحويله إلى سلسلة عن طريق تحويل كل int إلى char ودمج أو ببساطة باستخدام TextDecoder().decode()

let string = result.push(
  value.reduce((p, c) => {
    return p   c.fromCharCode();
  }, "")
); // or
let string = new TextDecoder().decode(value); 
// both achieve the same thing converting Uint8Array to string

مثال الكود الكامل

• إليك مثال كامل للتعامل مع الدفق ودمج الأجزاء:

fetch("https://lichess.org/api/games/user/gg")
  .then((response) => {
    return new Promise((resolve, reject) => {
      const readablestream = response.body;
      const reader = readablestream.getReader();
      let result = [];
      reader.read().then(function handlechunks({ done, value }) {
        if (done) {
          resolve(result);
          return;
        }
        const pgn = new TextDecoder().decode(value);
        result.push(pgn);
        reader.read().then(handlechunks);
      });
    });
  })
  .then((result) => {
    console.log(result);
  });

// console.log(value)
Uint8Array(551) [
     91,  69, 118, 101, 110, 116,  32,  34,  82,  97, 116, 101,
    100,  32,  98, 108, 105, 116, 122,  32, 103,  97, 109, 101,
     34,  93,  10,  91,  83, 105, 116, 101,  32,  34, 104, 116,
    116, 112, 115,  58,  47,  47, 108, 105,  99, 104, 101, 115,
    115,  46, 111, 114, 103,  47,  90, 122,  78,  66,  90, 119,
    100,  71,  34,  93,  10,  91,  68,  97, 116, 101,  32,  34,
     50,  48,  50,  48,  46,  48,  49,  46,  49,  48,  34,  93,
     10,  91,  87, 104, 105, 116, 101,  32,  34,  86, 101, 101,
    118, 101, 101,  50,
    ... 451 more items
  ]
// console.log(new TextDecoder().decode(value))
[Event "Rated blitz game"]
[Site "https://lichess.org/ZzNBZwdG"]
[Date "2020.01.10"]
[White "Veevee222"]
[Black "gg"]
[Result "0-1"]
[UTCDate "2020.01.10"]
[UTCTime "20:21:02"]
[WhiteElo "1858"]
[BlackElo "1863"]
[WhiteRatingDiff "-6"]
[BlackRatingDiff " 35"]
[Variant "Standard"]
[TimeControl "180 0"]
[ECO "C00"]
[Termination "Normal"]

1. e4 e6 2. d4 d6 3. c4 Nf6 4. Nc3 c5 5. f4 cxd4 6. Qxd4 Nc6 7. Qd1 b6 8. g3 Bb7 9. Bg2 Rc8 10. Nf3 Be7 11. O-O O-O 12. b3 Nb4 13. Bb2 a5 14. Re1 Qc7 15. a3 Na6 16. Rc1 Nc5 17. Qd4 Nxb3 18. Qd1 Nxc1 19. e5 0-1

على سبيل المثال الرابط

على سبيل المثال، الكود الكامل يذهب

الآن، يمكننا الوصول إلى شبكات PGN الخاصة بالألعاب بشكل تدريجي حيث يتم إرسالها عبر الشبكة. على سبيل المثال، إذا كنا نستخدم الألعاب المحملة في واجهة مستخدم موقع ويب، فلن يضطر المستخدم إلى الانتظار أمام شاشة فارغة أو شاشة تحميل حتى يتم تحميل جميع الألعاب. وبدلاً من ذلك، يمكن عرض البيانات تدريجيًا، وهو أفضل بكثير من وجهة نظر تجربة المستخدم.
على سبيل المثال الكود الكامل اذهب هنا