Next.js Handler中调用useSession报错的解决方案（WebSocket场景）

错误原因 #

useSession是React Hook，必须严格遵循Hook规则：仅能在首字母大写的React函数组件或以use开头的自定义Hook中调用。而API路由的handler是普通Node.js函数，不符合Hook的调用场景，因此触发ESLint错误。

正确解决方案 #

在Next.js的API路由中，需使用Next-Auth提供的**getServerSession**方法获取Session（该方法运行在服务器端，无需依赖React Hook），同时修正原代码中Socket.IO连接的用户关联逻辑（原逻辑会把初始化IO时的用户Email复用给所有后续连接，存在严重逻辑错误）。

步骤1：调整依赖导入 #

导入getServerSession和你的Next-Auth配置文件（通常是auth.ts或[...nextauth].ts）：

import { Server, Socket } from 'socket.io'
import { txsDisplay } from '../worker-callback/route';
import { getServerSession } from 'next-auth/next';
import { authOptions } from './auth'; // 替换为你的Next-Auth配置实际路径

步骤2：修改API路由代码 #

const handler = async (req: Request, res: Response) => {
  // 1. 在服务器端获取当前请求的Session
  const session = await getServerSession(authOptions);
  const email = session?.user?.email;

  // 无有效Session则直接返回未授权
  if (!email) {
    return res.status(401).end('Unauthorized');
  }

  // 2. 初始化Socket.IO服务器（确保全局仅初始化一次）
  if ((res as any).socket.server.io) {
    console.log('Socket is already running');
  } else {
    console.log('Socket is initializing');
    const io = new Server((res as any).socket.server, {
      // 配置CORS，适配你的前端域名
      cors: {
        origin: process.env.NEXT_PUBLIC_APP_URL,
        credentials: true
      }
    });
    (res as any).socket.server.io = io;

    // 3. 为每个Socket连接单独验证用户身份
    io.on('connection', async (socket: Socket) => {
      // 从Socket握手信息中获取请求上下文，验证当前连接的用户Session
      const socketSession = await getServerSession(
        { req: socket.handshake as unknown as Request },
        authOptions
      );
      const userEmail = socketSession?.user?.email;

      // 无有效Session则强制断开连接
      if (!userEmail) {
        socket.disconnect(true);
        return;
      }

      // 将当前Socket与用户关联
      txsDisplay.addWebSocket(socket, userEmail);

      // 监听断开连接事件，清理关联关系
      socket.on('disconnect', () => {
        txsDisplay.removeWebSocket(socket, userEmail);
      });
    });
  }

  (res as any).end();
}

export default handler;

核心说明 #

• getServerSession的作用：直接在服务器端验证Session，无需依赖React Hook，完全适配API路由的Node.js运行环境。
• Socket连接的独立验证：原代码中IO初始化时绑定的Email是触发handler的第一个请求用户，会导致所有后续连接复用该用户身份，这是错误的。正确逻辑是每个Socket连接进来时，单独验证该连接的用户身份。
• CORS配置：必须配置Socket.IO的CORS规则，允许你的前端域名访问，避免跨域连接失败。

额外注意事项 #

• 确保你的Next-Auth配置文件（authOptions）包含正确的session策略、providers等配置项。
• 若使用Next.js App Router，API路由的写法略有差异，但getServerSession的使用逻辑保持一致。

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