如何减慢fs.createReadStream的data事件触发速度以调试客户端进度条？

这问题我之前调试WebSocket文件传输进度条时也踩过坑！流的data事件触发太快，进度条直接拉满，根本没法验证交互效果。给你两个简单实用的办法来控制发送速度：

方法一：固定间隔发送chunk #

适合只想控制每次发送的时间间隔，比如每隔几百毫秒发一次，直观看到进度条变化：

const fs = require('fs');
const readStream = fs.createReadStream("./test.jpg", { encoding: "binary" });
const chunksQueue = [];
let isProcessing = false;
// 自定义延迟时间，比如500ms发送一个chunk
const SEND_DELAY = 500;

readStream.on("data", (chunk) => {
  chunksQueue.push(chunk);
  // 只有当前没有在发送时，才启动队列处理
  if (!isProcessing) {
    processChunkQueue();
  }
});

// 监听流结束事件，确保剩余chunk都发送完成
readStream.on("end", () => {
  while (chunksQueue.length > 0) {
    socket.emit("data-chunk", chunksQueue.shift());
  }
  // 可以给客户端发一个传输完成的信号
  socket.emit("transfer-finished");
});

function processChunkQueue() {
  if (chunksQueue.length === 0) {
    isProcessing = false;
    return;
  }
  isProcessing = true;
  const currentChunk = chunksQueue.shift();
  // 发送当前chunk到客户端
  socket.emit("data-chunk", currentChunk);
  // 延迟后继续处理下一个chunk
  setTimeout(() => {
    processChunkQueue();
  }, SEND_DELAY);
}

方法二：按固定速率发送（模拟真实网络） #

如果你想更贴近真实场景，比如模拟100KB/s的传输速度，可以根据每个chunk的大小动态计算延迟：

const fs = require('fs');
const readStream = fs.createReadStream("./test.jpg", { encoding: "binary" });
const chunksQueue = [];
let isProcessing = false;
// 设定传输速率，比如100KB每秒
const TRANSFER_RATE_KBPS = 100;

readStream.on("data", (chunk) => {
  chunksQueue.push(chunk);
  if (!isProcessing) {
    processChunkQueue();
  }
});

readStream.on("end", () => {
  while (chunksQueue.length > 0) {
    socket.emit("data-chunk", chunksQueue.shift());
  }
  socket.emit("transfer-finished");
});

function processChunkQueue() {
  if (chunksQueue.length === 0) {
    isProcessing = false;
    return;
  }
  isProcessing = true;
  const currentChunk = chunksQueue.shift();
  // 计算当前chunk的字节大小（binary编码下，length就是字节数）
  const chunkSizeBytes = currentChunk.length;
  const chunkSizeKB = chunkSizeBytes / 1024;
  // 计算需要的延迟时间：(chunk大小KB / 速率KBPS) * 1000 转换为毫秒
  const sendDelay = (chunkSizeKB / TRANSFER_RATE_KBPS) * 1000;

  socket.emit("data-chunk", currentChunk);

  setTimeout(() => {
    processChunkQueue();
  }, sendDelay);
}

注意事项 #

• 调试完成后记得移除这些限流代码，不然会降低生产环境的传输效率。
• 如果你的chunk大小差异很大，方法二的动态延迟会让进度条变化更平滑，更接近真实用户体验。

内容的提问来源于stack exchange，提问作者Baterka