无法使用nextjs代理到nodejs/express套接字io服务器

Question

我正试图在我的下一个/rect客户端与我的express/socket.io后端之间创建一个连接(它不是作为nextjs自定义服务器运行的(。当使用next.config.js文件中的重写来代理常规http请求时，它工作得非常好。然而，当我尝试通过websockets(使用socket.io(连接到服务器时，它在终端中给出了以下错误：

Failed to proxy http://localhost:8000/socket.io?EIO=4&transport=websocket Error: socket hang up
at connResetException (node:internal/errors:705:14)
at Socket.socketOnEnd (node:_http_client:518:23)
at Socket.emit (node:events:525:35)
at endReadableNT (node:internal/streams/readable:1358:12)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
code: 'ECONNRESET'
}

这是我在./backend/app.js:上的应用程序.js

require("dotenv").config();
const express = require("express");
const cookies = require("cookie-parser");
const cors = require("cors");
const http = require("http");
const { Server } = require("socket.io");
const connect = require("./models/database");
const app = express();
const server = http.createServer(app);
const io = new Server(server);
// Connection to MongoDB database
connect();
// Defining middleware
app.use(express.json());
app.use(cookies());
app.use(cors());
app.use(require("./middleware/logger"));
// Defining api route
app.use("/v1", require("./api/v1"));
// Defining websocket entry point
io.on("connection", require("./api/socket.io-v1"));
// starting server
server.listen(process.env.PORT, () => {
console.log(`[STATUS]: Server started at port ${process.env.PORT}`);
});

这是我在./frontend/next.config.js:上的下一个config.js

/** @type {import('next').NextConfig} */
module.exports = () => {
const rewrites = () => {
return [
{
source: "/v1/:path*",
destination: "http://localhost:8000/v1/:path*",
},
{
source: "/socket.io/:path*",
destination: "http://localhost:8000/socket.io/:path*",
},
];
};
return {
rewrites,
};
};

最后，socket实例在其中一个组件文件(但重要的是在组件之外(中定义如下：

const socket = io("http://localhost:3000", { transports : ['websocket'] });

有人能告诉我如何将套接字连接代理到外部express服务器吗？因为我只需使用create-react应用程序就可以轻松地代理请求，所以我确信next.js有问题。提前感谢。

Answer 1

我仍然想看看是否有人能回答这个问题，但目前我刚刚直接将socket.io连接url更改为服务器的确切地址：

const socket = io("http://localhost:8000", { transports : ['websocket'] });

Answer 2

我也遇到过类似的问题。

http://localhost:8000/socket.io?EIO=4&transport

卷曲问题相同：

curl "http://localhost:3010/socket.io?EIO=4&transport=polling&t=OHwXDb-"

但只适用于前锋斜线：

curl "http://localhost:3010/socket.io/?EIO=4&transport=polling&t=OHwXDb-"

Nextjs重写目标总是丢失的斜杠。我删除了：路径*，然后工作：

{
source: '/socket.io',
destination: `${process.env.NEST_API}/socket.io/`,
}

或者你可以使用路径

{
source: '/socket.io/events/:path*',
destination: `${process.env.NEST_API}/socket.io/events/:path*`,
}

Than将使用：路径*。