أصبحت TransformStream الآن متوافقة مع جميع المتصفحات

والآن بعد أن أصبحت أحداث البث المُحوَّلة متاحة في Chrome وSafari وFirefox، أصبحت هذه الميزة جاهزة للاستخدام في أوقات الذروة.

دعم المتصفح

  • Chrome: 67.
  • الحافة: 79.
  • Firefox: 102.
  • Safari: الإصدار 14.1.

المصدر

تتيح لك Streams API تقسيم مورد تريد استلامه أو إرساله أو تحويله إلى أجزاء صغيرة، ثم معالجة هذه الأجزاء قليلاً. في الآونة الأخيرة، بدأ الإصدار 102 من Firefox بإتاحة TransformStream، ما يعني أنّه يمكن الآن استخدام TransformStream أخيرًا في جميع المتصفّحات. تتيح لك أحداث تحويل البث توجيه البيانات من ملف ReadableStream إلى ملف WritableStream، أو تنفيذ عملية تحويل على الأجزاء، أو استخدام النتيجة المحوَّلة مباشرةً، كما هو موضّح في المثال التالي.

class UpperCaseTransformStream {
  constructor() {
    return new TransformStream({
      transform(chunk, controller) {
        controller.enqueue(chunk.toUpperCase());
      },
    });
  }
}

button.addEventListener('click', async () => {
  const response = await fetch('/script.js');
  const readableStream = response.body
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new UpperCaseTransformStream());

  const reader = readableStream.getReader();
  pre.textContent = '';
  while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      pre.textContent += value;
  }
});

عرض توضيحي