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

【问题标题】：Failed to proxy to nodejs/express socket io server with nextjs无法使用 nextjs 代理到 nodejs/express 套接字 io 服务器
【发布时间】：2022-11-04 01:02:38
【问题描述】：

我正在尝试在我的 next/react 客户端与我的 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 的 app.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 的 next.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'] });

有人可以告诉我如何将套接字连接代理到外部快速服务器，因为我可以在简单地使用 create-react-app 时轻松代理请求，所以我确定这是 next.js 的问题。提前致谢。

【问题讨论】：

标签： express next.js socket.io proxy

【解决方案1】：

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

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

【讨论】：