将 Socket.io 与 Next.js 14 /api 路由集成

Question

我目前正在使用 Next.js 14 开发一个项目，并且面临着将 Socket.io 与 /api 路由集成的挑战。我已经探索了各种资源，但还没有找到关于如何使用最新版本的 Next.js 专门设置 Socket.io 的清晰简洁的指南。

如果有人可以提供分步指南或分享他们成功实现 Socket.io 与 Next.js 14 /api 路由结合的经验，我将不胜感激。此外，任何演示集成的代码片段或示例都会非常有帮助。

预先感谢您的协助！

我尝试了旧的方法，但没有任何效果。有时是 500 内部服务器错误，有时是 405 和 404。我也在终端中收到这些错误...

⨯ Detected default export in 'F:\Projects\NextJs\chat_u\chat_u\app\api\socket\route.js'. Export a named export for 
each HTTP method instead.
 ⨯ No HTTP methods exported in 'F:\Projects\NextJs\chat_u\chat_u\app\api\socket\route.js'. Export a named export for each HTTP method.

Answer 1

我认为最好有一个单独的服务器运行，因为 next.js 是一个无服务框架。

Answer 2

这是我的代码行。

/api/socket.ts

import type { Server as HTTPServer } from "http"
import type { Socket as NetSocket } from "net"
import type { NextApiRequest, NextApiResponse } from "next"
import type { Server as IOServer } from "socket.io"
import { Server } from "socket.io"

interface SocketServer extends HTTPServer {
  io?: IOServer | undefined
}

interface SocketWithIO extends NetSocket {
  server: SocketServer
}

interface NextApiResponseWithSocket extends NextApiResponse {
  socket: SocketWithIO
}

export async function GET(_req: NextApiRequest, res: NextApiResponseWithSocket) {
  if (res.socket?.server?.io) {
    res.status(200).json({ success: true, message: "Socket is already running", socket: `:${PORT}` })
    return
  }

  console.log("Starting Socket.IO server on port:", PORT)

  const io = new Server({ path: "/api/socket", addTrailingSlash: false, cors: { origin: "*" } }).listen(PORT)

  io.on("connect", socket => {
    const _socket = socket
    console.log("socket connect", socket.id)
    _socket.broadcast.emit("welcome", `Welcome ${_socket.id}`)
    socket.on("disconnect", async () => {
      console.log("socket disconnect")
    })
  })

  res.socket.server.io = io
  res.status(201).json({ success: true, message: "Socket is started", socket: `:${4000}` })
}

//客户端代码

import { Socket, io } from "socket.io-client"

export const Test= () => {
  const data: any = {}
  const socket = io(`:PORT`, { path: "/api/socket", addTrailingSlash: false })
  socket.on("connect", () => {
    console.log("Connected")
  })
  socket.on("disconnect", () => {
    console.log("Disconnected")
  })
  socket.on("connect_error", async err => {
    console.log(`connect_error due to ${err.message}`)
    await fetch("/api/socket")
  })
}

希望对您有帮助。