TransformStream अब क्रॉस-ब्राउज़र का इस्तेमाल करता है

अब Chrome, Safari, और Firefox में स्ट्रीम बदलने की सुविधा काम करती है. इसलिए, अब ये सुविधाएं मुख्य तौर पर इस्तेमाल की जा सकती हैं!

Streams API की मदद से, आप जिस संसाधन को पाना चाहते हैं, भेजना या उसे छोटे-छोटे हिस्सों में बदलना चाहते हैं, उसे एक-एक करके प्रोसेस कर सकते हैं. हाल ही में, Firefox 102 ने 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;
  }
});

डेमो