部署多人协作白板项目至Vercel时遇Socket.io后端问题求助

Vercel是Serverless平台，默认的Express+Socket.io部署方式不兼容，核心问题是普通Serverless函数不支持WebSocket长连接，同时部署结构不符合Vercel要求。以下是针对性修复步骤：

1. 调整后端部署结构 #

将后端代码移至项目根目录的api/文件夹下，命名为socket.js（Vercel会自动识别该目录下的文件为Serverless函数）。

2. 修改后端代码适配Vercel #

替换原后端代码为以下内容，移除app.listen（Vercel会自动处理端口和启动），改用HTTP Server包装Express实例并导出：

const express = require("express");
const { Server } = require("socket.io");
const http = require("http");

const app = express();
const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

io.on("connection", (socket) => {
  console.log("Made socket connection");
  socket.on("beginpath", (data) => {
    io.sockets.emit("beginpath", data);
  });
  socket.on("drawstroke", (data) => {
    io.sockets.emit("drawstroke", data);
  });
  socket.on("performUndoRedo", (data) => {
    io.sockets.emit("performUndoRedo", data);
  });
});

// 导出Vercel兼容的HTTP handler
module.exports = server;

3. 修正前端Socket连接路径 #

前端不再直接连接域名，改为连接Vercel的API路由：

<script>
  let socket = io.connect("/api/socket");
</script>

4. 配置Vercel支持WebSocket #

在项目根目录创建vercel.json文件，添加WebSocket支持配置：

{
  "functions": {
    "api/socket.js": {
      "runtime": "@vercel/node@20",
      "maxDuration": 60,
      "websocket": true
    }
  },
  "routes": [
    { "src": "/(.*)", "dest": "/public/$1" }
  ]
}

5. 调整前端静态文件托管 #

将原frontend文件夹下的所有前端文件移至public目录（Vercel会自动托管该目录的静态资源，无需用Express的static中间件），删除后端代码中的app.use(express.static("./frontend"))行。

额外注意事项 #

• Vercel免费层的WebSocket连接最长维持60秒，若需要更长连接需升级至付费方案，或在前端添加自动重连逻辑；
• 部署前确保所有依赖已添加至package.json，并在Vercel部署时选择正确的Node.js版本（建议18+）。

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