بعد أن أصبحت مصادر التحويل متاحة في Chrome وSafari وFirefox، أصبحت الآن جاهزة للعرض في الوقت الفعلي.
تتيح لك 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;
}
});