Node.js를 사용하여 서버에서 클라이언트로 데이터를 스트리밍하는 방법은 무엇입니까?

Originally posted here!

데이터를 작은 청크로 전송하는 것이 서버에서 클라이언트로 파일을 전송하는 가장 좋은 방법입니다. 전체 데이터가 한 번에 메모리에 로드되지 않기 때문에 많은 메모리를 절약하고 인터넷을 통해 매우 쉽게 전송할 수 있습니다.

예를 들어 비디오에 대한 끝점이 있고 비디오 데이터를 스트리밍하려고 한다고 가정해 보겠습니다.

이 문제를 해결하기 위해 Node.js의 Streams를 사용할 수 있습니다.

간단하게 Express.js를 사용하여 엔드포인트를 빌드해 보겠습니다.

// endpoint for /video
app.get("/video", (req, res) => {
  // code goes here
});

이제 필요한 비디오 파일이 videos이라는 디렉토리에 있고 비디오 파일의 이름이 hello.mp4이라고 가정합니다. 비디오를 스트리밍하려면 다음과 같이 비디오 파일의 읽기 스트림을 만들 수 있습니다.

// get the filesystem module
const fs = require("fs");

// endpoint for /video
app.get("/video", (req, res) => {
  // create a read stream for the video hello.mp4
  const rs = fs.createReadStream("./videos/hello.mp4");
});

읽기 스트림을 생성한 후 스트리밍 중인 비디오에 대한 일부 정보를 클라이언트에 알리기 위해 일부 헤더를 설정해야 합니다.

기본 정보에는 파일 크기와 파일 형식이 포함됩니다. 이러한 정보는 다음과 같이 응답의 헤더에 설정됩니다.

// get the filesystem module
const fs = require("fs");

// endpoint for /video
app.get("/video", (req, res) => {
  // create a read stream for the video hello.mp4
  const rs = fs.createReadStream("./videos/hello.mp4");

  // get size of the video file
  const { size } = fs.statSync("./videos/hello.mp4");

  // set header
  // including size of file and type of file
  res.setHeader("Content-Type", "video/mp4");
  re.setHeader("Content-Length", size);
});

여기에서 콘텐츠 유형을 video/mp4으로 설정하고 속성 size을 사용하여 파일 크기를 설정합니다.

이제 응답 헤더를 설정한 후 pipe() 개체 ReadableStream에서 사용할 수 있는 rs 메서드를 사용하여 비디오 스트리밍을 시작할 수 있습니다.

// get the filesystem module
const fs = require("fs");

// endpoint for /video
app.get("/video", (req, res) => {
  // create a read stream for the video hello.mp4
  const rs = fs.createReadStream("./videos/hello.mp4");

  // get size of the video file
  const { size } = fs.statSync("./videos/hello.mp4");

  // set header
  // including size of file and type of file
  res.setHeader("Content-Type", "video/mp4");
  res.setHeader("Content-Length", size);

  // start streaming the video
  // using the pipe() method
  rs.pipe(res);
});

이제 서버를 시작하고 브라우저에서 위 끝점으로 이동하면 비디오가 브라우저에서 스트리밍을 시작하는 것을 볼 수 있습니다.

응답 😃 유용하셨다면 공유해 주세요.