I'm currently facing an issue with establishing a connection between my Next.js/React client and my Express/Socket.io backend (not running as a Next.js custom server). When I attempt to proxy regular HTTP requests using rewrites in the next.config.js file, everything works smoothly. However, when trying to connect to the server via websockets (using Socket.io), I encounter this error message in the terminal:
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'
}
Here's the content of my app.js located at ./backend/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);
// Connecting to MongoDB database
connect();
// Setting up middleware
app.use(express.json());
app.use(cookies());
app.use(cors());
app.use(require("./middleware/logger"));
// Defining API routes
app.use("/v1", require("./api/v1"));
// Setting up websocket entry point
io.on("connection", require("./api/socket.io-v1"));
// Starting the server
server.listen(process.env.PORT, () => {
console.log(`[STATUS]: Server started at port ${process.env.PORT}`);
});
This is my configuration in next.config.js located at ./frontend/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,
};
};
Finally, the instance where socket is defined within one of the component files (outside of the component itself):
const socket = io("http://localhost:3000", { transports : ['websocket'] });
If anyone could provide guidance on how to properly proxy the socket connection to the external Express server since proxying requests has worked fine while using create-react-app, I would greatly appreciate it. Thank you.