TransformStream wird jetzt browserübergreifend unterstützt

Da Transform-Streams jetzt in Chrome, Safari und Firefox unterstützt werden, sind sie endlich bereit für den Einsatz in der Praxis.

Browser Support

  • Chrome: 67.
  • Edge: 79.
  • Firefox: 102.
  • Safari: 14.1.

Source

Mit der Streams API können Sie eine Ressource, die Sie empfangen, senden oder transformieren möchten, in kleine Chunks aufteilen und diese dann nach und nach verarbeiten. Seit Kurzem wird TransformStream von Firefox 102 unterstützt. Das bedeutet, dass TransformStream jetzt endlich browserübergreifend verwendet werden kann. Mit Transformationsstreams können Sie Daten von einem ReadableStream an ein WritableStream weiterleiten und dabei eine Transformation der Chunks ausführen oder das transformierte Ergebnis direkt nutzen, wie im folgenden Beispiel gezeigt.

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

Demo