Next.js集成Socket.io部署Vercel出现308/404连接错误求助

问题核心原因 #

部署到Vercel后出现308和404错误，主要由三个问题导致：

• Vercel Serverless函数限制：默认Serverless函数是短生命周期、无状态的，不支持WebSocket长连接，Socket.io的长连接模式无法在此环境稳定运行。
• 服务端初始化参数错误：你将path和cors拆分为两个独立配置对象，但Socket.io的Server构造函数仅接受一个配置对象，导致cors配置失效、路径设置被忽略。
• 客户端与服务端路径不匹配：服务端配置的路径是/api/socket，但客户端请求的是/api/socketio，且Socket连接未指定路径，触发404错误。

修复步骤 #

1. 修正服务端代码参数错误 #

将path与cors合并到同一配置对象，同时修正CORS域名格式（去掉末尾斜杠）：

import { Server } from "socket.io";

const ioHandler = (req, res) => {
  if (!res.socket.server.io) {
    console.log("*First use, starting socket.io");

    // 合并path与cors到同一配置对象
    const io = new Server(res.socket.server, {
      path: "/api/socket",
      cors: {
        origin: "https://lets-chat-jet.vercel.app",
        methods: ["GET", "POST"],
        credentials: true
      }
    });

    io.on("connection", (socket) => {
      socket.broadcast.emit("a user connected");
      socket.on("hello", (msg) => {
        socket.emit("hello", "world!");
      });
    });

    res.socket.server.io = io;
  } else {
    console.log("socket.io already running");
  }
  res.end();
};

export const config = {
  api: {
    bodyParser: false,
  },
};

export default ioHandler;

2. 修正客户端连接逻辑 #

匹配服务端路径，移除不必要的fetch请求（Socket.io会自行初始化连接）：

import { useEffect } from 'react'
import io from 'socket.io-client'

const Socketio = () => {
  useEffect(() => {
    // 指定与服务端一致的连接路径
    const socket = io({
      path: "/api/socket",
      transports: ["websocket", "polling"] // 优先WebSocket，降级轮询
    })

    socket.on('connect', () => {
      console.log('connect')
      socket.emit('hello')
    })

    socket.on('hello', data => {
      console.log('hello', data)
    })

    socket.on('a user connected', () => {
      console.log('a user connected')
    })

    socket.on('disconnect', () => {
      console.log('disconnect')
    })

    // 组件卸载时断开连接
    return () => socket.disconnect()
  }, [])

  return <h1>Socket.io</h1>
}
export default Socketio

3. Vercel环境适配核心方案 #

上述修正仅解决路径与CORS问题，无法彻底解决Vercel Serverless函数不支持长连接的限制，可选两种方案：

• 改用Edge Runtime：在服务端代码顶部添加export const runtime = "edge";，Vercel Edge Runtime支持WebSocket，需同步调整代码适配Edge环境。
• 独立部署Socket.io服务：将Socket.io服务部署到支持WebSocket的平台（如Render、Railway），让Vercel前端直接连接该独立服务地址，避免在Vercel上运行Socket.io服务。

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