vercel 的 serverless 架构不支持长期维持 websocket 连接，因此基于 socket.io 的实时协作后端无法直接部署在其平台上；必须将实时通信服务迁移至支持长连接的独立托管环境。
vercel 的 serverless 架构不支持长期维持 websocket 连接，因此基于 socket.io 的实时协作后端无法直接部署在其平台上；必须将实时通信服务迁移至支持长连接的独立托管环境。
Vercel 是一款出色的静态站点与无服务器函数（Serverless Functions）托管平台，但其底层设计决定了它不适用于运行需要持久化连接的 WebSocket 服务。正如 Vercel 官方文档明确指出：“Serverless Functions 是无状态的，且有执行时长限制（最大 30 秒），因此无法维持 WebSocket 连接。”这意味着你当前的白板协作项目——依赖 socket.io 实现多用户实时同步绘图——其 Node.js 后端根本无法在 Vercel 上正常运行。
你的前端代码中这一行是问题的关键所在：
<script>
let socket = io.connect("https://white-board-zeta.vercel.app/");
</script>
它试图连接到 Vercel 域名下的 WebSocket 服务，但该域名背后并无持续运行的 Socket.IO 服务器；Vercel 收到 /socket.io/ 请求后，会尝试将其路由至一个短暂执行的 Serverless Function，而该函数在几毫秒内即退出，导致连接立即中断，表现为浏览器控制台反复报错：
WebSocket connection to 'wss://...' failed 或 GET https://.../socket.io/?EIO=4&transport=polling net::ERR_CONNECTION_REFUSED。
WebSocket 8.18.2 是该协议规范的一个重要迭代版本，主要优化了连接稳定性与数据传输效率。它通过全双工通信机制，允许客户端与服务器在单一长连接上实时交换数据，大幅降低传统 HTTP 轮询的开销。该版本增强了心跳保活、自动重连及二进制帧传输能力，适用于即时通讯、在线游戏及金融行情推送等低延迟场景，为开发者提供更可靠的实时网络交互基础。
✅ 正确解法：前后端分离部署 + 独立 WebSocket 托管
你需要将项目拆分为两个独立部署单元：
- ✅ 前端（静态资源）：继续托管在 Vercel（推荐），构建输出 dist/ 或 build/ 目录即可；
- ✅ 后端（Socket.IO 服务）：必须迁移到支持长连接的平台，例如：
迁移后端示例（以 Railway 为例）：
- 将后端代码整理为标准 Node.js 项目（含 package.json, server.js）；
- 在 server.js 中显式监听环境变量端口，并启用 CORS（生产环境需指定 origin）：
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');
const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
cors: {
origin: "https://white-board-zeta.vercel.app", // ✅ 仅允许你的 Vercel 前端
methods: ["GET", "POST"],
}
});
app.use(cors({ origin: "https://white-board-zeta.vercel.app" }));
app.use(express.static('./frontend')); // 仅用于本地调试；生产中前端已由 Vercel 提供
io.on('connection', (socket) => {
console.log('Client connected:', socket.id);
socket.on('beginpath', (data) => io.emit('beginpath', data));
socket.on('drawstroke', (data) => io.emit('drawstroke', data));
socket.on('performUndoRedo', (data) => io.emit('performUndoRedo', data));
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
console.log(`Socket server running on port ${PORT}`);
});
- 前端中更新 Socket.IO 连接地址为新后端地址（如 https://your-app.up.railway.app）：
<script>
// 替换为你的实际后端域名（支持 HTTPS + WebSocket）
const socket = io.connect("https://your-app.up.railway.app", {
transports: ['websocket', 'polling'], // 显式优先 WebSocket
});
</script>
⚠️ 注意事项：
- 不要尝试用 Vercel Serverless Function “模拟” WebSocket（如轮询或 fetch 模拟），这违背实时性本质，且无法实现服务端广播；
- 生产环境务必配置 cors.origin 为具体域名，禁用 *（尤其当涉及身份认证时）；
- 使用 wss://（WebSocket Secure）而非 ws://，确保与 HTTPS 前端同源安全策略兼容；
- 可通过 socket.io-client 的 reconnectionAttempts 和 timeout 选项增强连接鲁棒性。
总结：Vercel 是静态前端与 API 路由的理想选择，但不是全栈实时应用的后端基础设施。理解平台边界，合理拆分架构——让 Vercel 专注交付极致前端体验，让专业平台承载实时通信逻辑——这才是现代协作应用稳健上线的核心实践。
