웹 스트림과 Node.js 스트림 API의 차이점

웹 스트림과 Node.js 스트림 API의 차이점

스트림 개념에 익숙해지기 위해 파일 업로드 애플리케이션을 구축하고 있습니다.파일 목록 또는 블롭을 스트림으로 변환한 다음 백엔드에 업로드하여 파일 시스템에 저장하려고 합니다.

프런트엔드와 백엔드 구현에는 각각 문제가 없었지만 두 구현을 연결하는 데 어려움을 겪고 있습니다.저의 주된 문제는 웹 스트림 API와 Node.js 스트림 API의 차이점을 이해하지 못한다는 것입니다.브라우저에서 선택한 입력 파일의 블롭을 웹으로 변환하는 데 성공했습니다.ReadableStream하지만 내가 시도한 패키지들(axios요청의 경우,socket.io그리고.socket.io-streamWebSocket의 경우) Node.js 버전 스트림만 인수로 허용합니다.또한 WebReadableStream을 Node.js Writeable 또는 DuplexStream에 연결할 수 없습니다.메서드 이름도 다릅니다(예: pipeTo또는pipeThrough웹 API 및pipeNode.js API)에 포함됩니다.

Node.js와 브라우저 간에 구현 차이가 있다는 것을 알지만, 순진하게도 API가 비슷할 것이라고 생각했습니다.웹 스트림과 브라우저화된 Node.js 스트림 간에 어떻게든 사소한 변환을 할 수 있는데 누락된 것이 있습니까?웹 스트림 API를 사용할 가치가 있습니까?

웹 스트림을 수동으로 Node.js 스트림으로 변환하는 것은 그리 어려운 일이 아니지만, 당신은 정말로 Node.js 심을 슈호링하는 대신 네이티브 웹 스트림을 수용하는 라이브러리를 찾아야 합니다.stream브라우저에 내장되어 있습니다.

그러나 브라우저에서 Node.js 스트림 심을 사용해야 하는 경우에는stream-browserify다음과 같이 사용합니다.

import { Readable, Writable } from 'stream-browserify;'

// window.ReadableStream to Node.js Readable
const webRSToNodeRS = rs => {
  const reader = rs.getReader();
  const out = new Readable();
  reader.read().then(async ({ value, done }) => {
    while (!done) {
      out.push(value);
      ({ done, value } = await reader.read());
    }
    out.push(null);
  });
  return out;
}

// window.WritableStream to Node.js Writable
const webWSToNodeWS = ws => {
  const writer = ws.getWriter();
  const out = new Writable();
  out._write = (chunk, encoding, callback) => {
    writer.write(chunk);
    callback();
  };
  out._final = callback => {
    writer.close();
    callback();
  };
  return out;
}

이러한 메소드는 웹 스트림과 노드 스트림 간의 완전한 상호 작용을 수행하기에 충분합니다.예를 들어 Web ReadableStream을 Node.js Writable/Duplex에 파이프로 연결하려면 다음과 같이 하십시오.

const pipeWebRSToWritable = (rs, writable) => {
  // After converting you can use the normal pipe methods
  webRSToNodeRS(rs).pipe(writable);
}

그러나 클라이언트에서 서버로 데이터를 스트리밍하는 데 라이브러리가 필요하지 않다는 점을 언급하고 싶습니다.그fetchAPI는 기본적으로 웹 스트림을 지원하며 사용자가 가야 할 방법입니다.

// POST a ReadableStream (perhaps of a file) to the server
// Way easier and more performant than using a 3rd party library...
const postRSToServer = rs => fetch('/your/server/endpoint', {
  method: 'POST',
  body: rs
});

마지막 참고: 메소드를 직접 사용하고 있는지 확인합니다(예: 개체에 대해 이를 호출합니다).file.stream(),부터File확장된Blob) 를 얻는 몇 가지 방법이 있습니다.ReadableStream모든 파일을 브라우저의 메모리에 로드하는 것으로 끝나는 JS의 파일입니다.

문서에 따르면 버전 16부터 Node.js는 WebStreams API의 (아직 실험적인) 구현을 포함합니다.

그리고 이전의 Stream API는 (v.17 이후) 웹/FromWeb 메소드를 통해 두 가지를 모두 연결할 수 있게 되었습니다.

여기에 정보가 있습니다.

(으)ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄷㄴㄷㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴnode-fetchundici는 웹 호환 구현입니다.fetch그것은 결국 공식적인 노드 구현이 될 것입니다.

또한 Leonbloy의 답변 웹/from 웹 메소드 및 웹 스트림 API를 참조하십시오.

언급URL : https://stackoverflow.com/questions/61232291/difference-between-web-streams-and-node-js-stream-apis