모든 곳에서 웹 스트림 (및 Node.js를위한 가져 오기)

Jake Archibald의 2016 년 "웹 스트림의 해"에 대한 예측은 그 시간보다 약간 앞서 있었을 것입니다. 그러나 2014 년에 처음 제안 된 Streams Standard는 이제 현대적인 브라우저 (Firefox를 따라 잡는) 및 Node.js (및 Deno)에 걸쳐 지속적으로 구현되었습니다.

스트림 이해

스트리밍은 더 작은 "청크"로 나누고 순차적으로 처리하여 큰 데이터 리소스를 효율적으로 처리합니다. 이는 처리가 시작되기 전에 완전히 다운로드를 기다리지 않으므로 점진적인 데이터 처리가 가능합니다.

세 가지 주요 스트림 유형이 있습니다 : 읽기 가능, 쓰기 가능 및 변환 스트림. 읽기 쉬운 스트림은 데이터 청크 (파일 또는 HTTP 연결과 같은 소스)를 제공합니다. 스트림 변환 (선택 사항)이 청크를 수정합니다. 마지막으로, 쓰기 가능한 스트림은 처리 된 데이터를받습니다.

웹 스트림 : 크로스 플랫폼 일관성

Node.js는 처음에는 자체 스트림 구현을 가지고 있으며 종종 복잡한 것으로 간주되었습니다. Whatwg Web Standard for Streams는 Node.js 문서에서 "웹 스트림"이라고하는 상당한 개선을 제공합니다. 원래 node.js 스트림은 유지되지만 웹 표준 API는 공존하여 크로스 플랫폼 코드를 촉진하고 개발을 단순화합니다.

Node.js의 오리지널 저자가 만든 Deno는 웹 스트림, Browser API를 완전히 지원합니다. CloudFlare Workers와 Deno Deploy는 또한이 표준화 된 접근 방식을 활용합니다.

fetch() 및 읽기 쉬운 스트림

읽기 쉬운 스트림을 만드는 가장 일반적인 방법은 fetch() 사용하는 것입니다. fetch() 호출의 response.body 읽기 쉬운 스트림입니다.

 fetch ( 'data.txt')
.

콘솔 로그는 몇 가지 유용한 스트림 방법을 보여줍니다. 사양에서 알 수 있듯이, 읽기 쉬운 스트림은 pipeTo() 사용하여 쓰기 가능한 스트림으로 직접 파이프로 만들거나 pipeThrough() 사용하여 변환 스트림을 통해 파이프를 할 수 있습니다.

Node.js Core에는 내장 fetch 지원이 부족합니다. node-fetch (인기 라이브러리)는 Whatwg 스트림이 아닌 노드 스트림을 반환합니다. Node.js 팀의 새로운 HTTP/1.1 클라이언트 인 Undici 는 http.request 에 대한 현대적인 대안을 제공하여 response.body 웹 스트림을 반환 하는 fetch 구현을 제공합니다. Undici node.js에서 권장되는 HTTP 요청 핸들러가 될 것입니다. 일단 설치되면 ( npm install undici ) 브라우저 fetch 와 유사하게 작동합니다. 다음 예제는 변환 스트림을 통해 스트림을 파이프합니다.

 'undici'에서 {fetch} 가져 오기;
'노드 : 스트림/웹'에서 {textDecoderstream} 가져 오기;

Async 함수 fetchstream () {
  const response = await fetch ( 'https://example.com');
  const stream = response.body;
  const textstream = stream.pipethrough (new TextDecoderstream ());
  // ... 텍스트 스트림의 추가 처리 ...
}

response.body 몸체는 동기입니다. await 할 필요가 없습니다. 브라우저 코드는 거의 동일합니다. fetch 가 전 세계적으로 사용 가능하므로 TextDecoderStream import 문을 생략합니다. 데노는 또한 기본 지원을 가지고 있습니다.

비동기 반복

for-await-of 루프는 비동기 반복을 제공하여 for-of Loop의 기능을 비동기 반복 (스트림 및 약속의 배열)으로 확장합니다.

 비동기 함수 fetchandlogstream () {
  const response = await fetch ( 'https://example.com');
  const stream = response.body;
  const textstream = stream.pipethrough (new TextDecoderstream ());

  기다려야합니다 (텍스트 스트림의 const 덩어리) {
    Console.log (청크);
  }
}

fetchandlogstream ();

이것은 node.js, deno 및 최신 브라우저에서 작동합니다 (브라우저 스트림 지원이 여전히 개발 중임).

추가 읽기 쉬운 스트림 소스

fetch() 가 널리 퍼지지 만 다른 방법은 읽을 수있는 스트림을 만듭니다 : Blob.stream() 및 File.stream() ( import { Blob } from 'buffer'; node.js). 브라우저에서<input type="file"> 요소는 파일 스트림을 쉽게 제공합니다.

 const filestream = docum

node.js 17은 fs/promises.open() 에서 FileHandle.readableWebStream() 소개합니다.

 '노드 : fs/promises'에서 {open} 가져 오기;

// ... (파일 및 프로세스 스트림 열기) ...

스트림 및 약속 통합

스트림 후 완료 조치의 경우 약속이 유용합니다.

 SomereadableStream
.pipeto (somewritableStream)
. then (() => console.log ( "데이터 작성"))
.catch (error => console.error ( "error", error));

또는 await 사용 :

 SomereadableStream.pipeto를 기다리고 있습니다 (somewritableStream);

사용자 정의 변환 스트림 생성

TextDecoderStream (및 TextEncoderStream ) 외에도 TransformStream 사용하여 사용자 정의 변환 스트림을 만들 수 있습니다. 생성자는 선택적 start , transform 및 flush 메소드가있는 객체를 수락합니다. transform 데이터 변환을 수행합니다.

다음은 단순화 된 (예시적인 목적을 위해, 생산에서 TextDecoderStream 사용) 텍스트 디코더입니다.

 const decoder = new TextDecoder ();
const decodestream = new TransformStream ({
  변환 (청크, 컨트롤러) {
    controller.enqueue (decoder.decode (Chunk, {stream : true}));
  }
});

마찬가지로 ReadableStream 사용하여 사용자 정의 읽기 가능한 스트림을 만들 수 있으며 함수를 start , pull 및 cancel 수 있습니다. start 함수는 controller.enqueue 사용하여 청크를 추가합니다.

노드 스트림 상호 운용성

node.js는 노드 스트림과 웹 스트림 사이를 변환하기 위해 .fromWeb() 및 .toWeb() 메소드 (node.js 17)를 제공합니다.

결론

브라우저 및 Node.js API의 수렴은 계속되고 스트림은이 통일의 핵심 부분입니다. 전체 프론트 엔드 스트림 채택이 아직 진행 중이지만 (예 : MediaStream 아직 읽을 수있는 스트림이 아님) 향후 스트림 활용을 향한 미래는 지적합니다. 효율적인 I/O 및 크로스 플랫폼 개발의 가능성은 학습 웹 스트림을 가치있게 만듭니다.

위 내용은 모든 곳에서 웹 스트림 (및 Node.js를위한 가져 오기)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!