基于Express与Socket.io的聊天应用大图片传输连接重置问题

问题根源 #

Socket.io 默认限制单条消息的最大字节数为 1MB（1000000字节），当图片超过这个阈值时，会触发服务端的连接重置逻辑，同时因为重连机制，聊天日志会被重新发送。此外如果搭配 Express 使用，Express 的 body 解析中间件也可能存在大小限制，双重限制导致问题出现。

解决方案 #

1. 调整服务端 Socket.io 消息大小限制

修改 Socket.io 初始化配置，增大 maxHttpBufferSize 参数：

const io = require('socket.io')(server, {
  maxHttpBufferSize: 10 * 1024 * 1024, // 按需设置，比如10MB
  cors: {
    origin: "你的前端域名", // 替换为实际前端地址
    methods: ["GET", "POST"]
  }
});

2. 同步调整 Express 中间件限制（如果使用 Express）

如果你的项目基于 Express，需要同步调整 body 解析中间件的大小限制，避免被 Express 拦截大请求：

const express = require('express');
const app = express();

// 调整JSON和URL编码请求的大小限制
app.use(express.json({ limit: '10mb' }));
app.use(express.urlencoded({ limit: '10mb', extended: true }));

3. 大文件分片传输（推荐）

即使调大了限制，大文件一次性传输仍可能因网络波动导致重连，更稳定的方案是分片传输：

客户端分片发送代码

// 客户端分片发送图片
function sendImageByChunk(socket, file) {
  const chunkSize = 512 * 1024; // 每片512KB，可按需调整
  let currentOffset = 0;
  const reader = new FileReader();

  function readNextChunk() {
    const slice = file.slice(currentOffset, currentOffset + chunkSize);
    reader.readAsArrayBuffer(slice);
  }

  reader.onload = (e) => {
    socket.emit('image-chunk', {
      data: e.target.result,
      filename: file.name,
      totalSize: file.size,
      offset: currentOffset,
      isLast: currentOffset + chunkSize >= file.size
    });

    currentOffset += chunkSize;
    if (currentOffset < file.size) {
      setTimeout(readNextChunk, 50); // 小延迟避免网络拥塞
    }
  };

  readNextChunk();
}

服务端分片接收与拼接代码

// 服务端存储分片的临时缓存
const imageChunkCache = new Map();

io.on('connection', (socket) => {
  socket.on('image-chunk', (chunk) => {
    // 初始化文件缓存
    if (!imageChunkCache.has(chunk.filename)) {
      imageChunkCache.set(chunk.filename, {
        totalSize: chunk.totalSize,
        chunks: new Map(),
        filename: chunk.filename
      });
    }

    const fileCache = imageChunkCache.get(chunk.filename);
    fileCache.chunks.set(chunk.offset, chunk.data);

    // 检查是否所有分片接收完成
    const isAllChunksReceived = chunk.isLast || 
      Array.from(fileCache.chunks.keys()).reduce((sum, offset) => sum + chunkSize, 0) >= fileCache.totalSize;

    if (isAllChunksReceived) {
      // 按偏移量排序并拼接分片
      const sortedChunks = Array.from(fileCache.chunks.entries())
        .sort((a, b) => a[0] - b[0])
        .map(item => item[1]);
      const finalBlob = new Blob(sortedChunks);

      // 这里可以处理最终文件：保存到服务器/广播给其他客户端
      io.emit('received-image', { filename: chunk.filename, blob: finalBlob });

      // 清理缓存
      imageChunkCache.delete(chunk.filename);
    }
  });
});

注意事项 #

• maxHttpBufferSize 不要设置过大，避免单个大消息占用过多服务器内存。
• 分片传输建议添加分片校验机制，比如给每个分片加哈希值，防止分片丢失或损坏。
• 生产环境中要处理客户端断开重连后的分片续传逻辑，避免重新发送全部分片。

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