Node.js WebSocket文件创建进度推送异常及优化方案咨询

问题描述 #

向服务器发送请求触发文件创建操作，客户端收到响应后文件创建持续执行。尝试通过WebSocket每创建一个文件就推送一条进度消息，但客户端只能收到第一条，后续无响应。怀疑是消息数量过多导致，想知道如何通过批量推送或延迟等方式正确优化。

服务端原代码 #

//send value of ZipFinished until client gets true value 
const sentData = { progressCreatePDFs: true, 
                     PDFNumber: PDFNumber, 
                     totalPDFs: totalPDFs }; 

webSocket.send(JSON.stringify(sentData)); 
console.log('server webSocket sent number of created PDF ' + PDFNumber + ' of ' + totalPDFs); 

客户端原代码 #

webSocket.onmessage = (event) => {
   //get message object
   const messageObject = JSON.parse(event.data);

   if (isAboutProgressCreatePDFs(messageObject)) {
      //handle getting progress of creation PDFs
      console.log('ws client got progress of creatiuon PDFs');

      infoPara.style.display = 'block';
      infoPara.innerHTML = '' + messageObject.PDFNumber + ' of ' + messageObject.totalPDFs +  ' PDFs created';
        infoPara.style.color = colorProgressCreatePDFs;
      }

    };

问题原因分析 #

1. 高频消息积压：短时间内大量小消息会占满服务端发送缓冲区，导致后续消息无法及时推送；同时客户端频繁接收消息，主线程被占用，无法处理后续消息。
2. 服务端阻塞：如果文件创建是同步操作，且和WebSocket发送在同一个线程，文件创建的耗时会阻塞消息发送，导致进度推送中断。
3. 客户端DOM操作瓶颈：每收到一条消息就更新DOM，DOM操作本身开销大，高频更新会让浏览器主线程卡顿，无法处理后续WebSocket消息。

优化方案与实现 #

1. 批量推送进度（最常用方案） #

不用每创建一个文件就发消息，而是累计到指定数量（如10或20个）再发送一次，或者在文件创建完成时补发送最后一批进度，减少消息总数量。

修改后的服务端代码：

// 配置批量推送的阈值
const batchSize = 10;
let batchCounter = 0;

// 假设在文件创建循环中
function processPDFCreation() {
  // ... 执行单个PDF创建逻辑
  PDFNumber++;
  batchCounter++;

  // 达到阈值或创建完成时发送进度
  if (batchCounter >= batchSize || PDFNumber === totalPDFs) {
    const sentData = { 
      progressCreatePDFs: true, 
      PDFNumber: PDFNumber, 
      totalPDFs: totalPDFs 
    }; 
    webSocket.send(JSON.stringify(sentData)); 
    console.log(`server webSocket sent progress: ${PDFNumber} of ${totalPDFs}`);
    batchCounter = 0; // 重置计数器
  }
}

2. 客户端优化DOM更新 #

避免每收到消息就立即更新DOM，用requestAnimationFrame批量处理DOM更新，利用浏览器重绘周期减少不必要的操作。

修改后的客户端代码：

// 缓存最新进度，避免频繁DOM操作
let latestProgress = { PDFNumber: 0, totalPDFs: 0 };

webSocket.onmessage = (event) => {
  const messageObject = JSON.parse(event.data);
  
  if (isAboutProgressCreatePDFs(messageObject)) {
    latestProgress = messageObject;
    // 在下一次浏览器重绘时更新DOM
    requestAnimationFrame(() => {
      infoPara.style.display = 'block';
      // 用textContent代替innerHTML更安全高效
      infoPara.textContent = `${latestProgress.PDFNumber} of ${latestProgress.totalPDFs} PDFs created`;
      infoPara.style.color = colorProgressCreatePDFs;
      console.log(`ws client received progress: ${latestProgress.PDFNumber}/${latestProgress.totalPDFs}`);
    });
  }
};

3. 服务端异步处理（可选） #

如果是Node.js环境，确保文件创建和WebSocket发送不阻塞事件循环。可以用异步文件API，或者把文件创建任务放到工作线程中，让主线程专注于WebSocket消息推送。

4. 可选：添加进度确认机制 #

如果对进度准确性要求极高，可以让客户端收到进度消息后回复一个确认信号，服务端收到确认后再发送下一批进度。不过会增加复杂度，按需使用。

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