NextJS 13 App目录下如何在app/api/socket/route.js中初始化Socket.io？

在App Router的app/api/socket/route.js中初始化Socket.io，核心是适配新的API路由模型（返回NextResponse而非传统http.ServerResponse），同时确保使用Node.js运行时（Socket.io暂不支持Edge Runtime）。以下是具体实现步骤和代码：

步骤1：安装依赖 #

确保已安装Socket.io：

npm install socket.io
# 或
yarn add socket.io

步骤2：编写API路由代码 #

创建app/api/socket/route.js，内容如下：

import { Server } from "socket.io";
import { NextResponse } from "next/server";

// 指定使用Node.js运行时（Socket.io依赖Node.js API）
export const runtime = "nodejs";

export async function GET(req) {
  // 检查是否已初始化过Socket.io实例，避免重复创建
  if (req.socket.server.io) {
    console.log("Socket.io服务已在运行");
    return NextResponse.json({ status: "running" });
  }

  console.log("正在初始化Socket.io服务");
  // 创建Socket.io服务器并挂载到当前HTTP服务器
  const io = new Server(req.socket.server, {
    path: "/api/socket", // 必须与API路由路径一致，确保客户端能正确连接
    addTrailingSlash: false,
  });

  // 将io实例挂载到服务器对象，供后续请求复用
  req.socket.server.io = io;

  // 监听客户端连接事件
  io.on("connection", (socket) => {
    console.log("客户端已连接，ID：", socket.id);

    // 监听客户端断开连接事件
    socket.on("disconnect", () => {
      console.log("客户端已断开连接，ID：", socket.id);
    });

    // 可在此添加更多业务逻辑，比如监听自定义事件、广播消息等
  });

  return NextResponse.json({ status: "initialized" });
}

关键差异说明 #

和Pages Router的pages/api/socket.js相比，核心区别在于：

• 必须显式指定runtime: "nodejs"，因为Socket.io依赖Node.js的底层网络API，Edge Runtime不支持。
• 从req.socket.server获取HTTP服务器实例（而非Pages Router中的res.socket.server）。
• 返回NextResponse对象作为响应，替代传统的res.end()。

内容的提问来源于stack exchange，提问作者Anıl Aksu