一對一影片app開發，如何分塊載入大檔案？

一對一影片app開發，如何分塊載入大檔案？

後端：使用 Koa2 實現分塊傳輸

const Koa = require("koa");
const fs = require("fs");
const app = new Koa();
app.use(async (ctx) => {
  const filePath = "./large-article.txt"; // 你的大檔案路徑
  const CHUNK_SIZE = 10000; // 設定每個分塊的大小（例如，1 萬字）
  const fileSize = fs.statSync(filePath).size;
  // 設定響應頭以支援分塊傳輸編碼
  ctx.set("Content-Type", "text/plain");
  ctx.set("Transfer-Encoding", "chunked");
  ctx.set("Content-Length", fileSize);
  // 透過 Koa 的 Readable Stream 逐個傳送分塊
  ctx.body = fs.createReadStream(filePath, { highWaterMark: CHUNK_SIZE });
});
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

前端：使用 React 實現分塊載入

import React, { useEffect, useState } from "react";
const CHUNK_SIZE = 10000; // 1萬字
const articleUrl = "替換為你的後端地址
function LargeArticle() {
  const [articleContent, setArticleContent] = useState("");
  useEffect(() => {
    fetchArticleInChunks();
  }, []);
  async function fetchArticleInChunks() {
    const response = await fetch(articleUrl);
    if (!response.body) {
      throw new Error("ReadableStream not yet supported in this browser.");
    }
    const reader = response.body.getReader();
    let result = "";
    let receivedLength = 0;
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      receivedLength += value.length;
      const chunk = new TextDecoder("utf-8").decode(value);
      // 處理新接收到的文章部分
      processChunk(chunk);
      // 更新進度
      console.log(`Received ${receivedLength} of ${response.headers.get("Content-Length")} bytes`);
      // 如果已經載入了足夠的內容，你可以根據需要停止載入
      if (receivedLength >= CHUNK_SIZE) {
        reader.cancel();
        break;
      }
    }
  }
  function processChunk(chunk) {
    // 在這裡處理接收到的文章部分，例如，將其插入到 DOM 中
        setArticleContent((prevContent) => prevContent + chunk);
  }
  return (
    <div>
      <h1>Large Article</h1>
      <div>{articleContent}</div>
    </div>
  );
}
export default LargeArticle;

以上就是一對一影片app開發，如何分塊載入大檔案？， 更多內容歡迎關注之後的文章