NextJs and Socket IO is not connecting - next.js

Question

I am trying to create a SocketIO solution with NextJS as below:
folder: api/socket.js
import { Server } from "socket.io";
const ioHandler = (req, res) => {
if (!res.socket.server.io) {
console.log("*First use, starting socket.io");
const io = new Server(res.socket.server);
io.on("connection", (socket) => {
console.log("Connected socket.io");
socket.broadcast.emit("a user connected");
socket.on("hello", (msg) => {
socket.emit("hello", "world!");
});
});
res.socket.server.io = io;
} else {
console.log("socket.io already running");
}
res.end();
};
export const config = {
api: {
bodyParser: false,
},
};
export default ioHandler;
folder: api/test.js
import io from "socket.io-client";
fetch("http://localhost:3000/api/socket");
const socket = io();
console.log(socket.connection);
socket.on("connect", () => {
console.log("connected");
});
But when I run api/test.js the SocketIO is not connected as below:
Socket {
connected: false,
receiveBuffer: [],
sendBuffer: [],
ids: 0,
acks: {},
flags: {},
io: Manager {
nsps: { '//undefined//undefined': [Circular *1] },
subs: [
[Function: subDestroy],
[Function: subDestroy],
[Function: subDestroy]
],
opts: {
path: '/socket.io',
hostname: 'undefined',
secure: false,
port: '80'
},
setTimeoutFn: [Function: bound setTimeout],
clearTimeoutFn: [Function: bound clearTimeout],
_reconnection: true,
_reconnectionAttempts: Infinity,
_reconnectionDelay: 1000,
_reconnectionDelayMax: 5000,
_randomizationFactor: 0.5,
backoff: Backoff {
ms: 1000,
max: 5000,
factor: 2,
jitter: 0.5,
attempts: 0
},
_timeout: 20000,
_readyState: 'opening',
uri: 'undefined//undefined//undefined',
encoder: Encoder { replacer: undefined },
decoder: Decoder { reviver: undefined },
_autoConnect: true,
engine: Socket {
setTimeoutFn: [Function: bound setTimeout],
clearTimeoutFn: [Function: bound clearTimeout],
secure: false,
hostname: 'undefined',
port: '80',
transports: [Array],
readyState: 'opening',
writeBuffer: [],
prevBufferLen: 0,
opts: [Object],
id: null,
upgrades: null,
pingInterval: null,
pingTimeout: null,
pingTimeoutTimer: null,
transport: [Polling],
_callbacks: [Object]
},
skipReconnect: false,
_callbacks: {
'$open': [Array],
'$packet': [Array],
'$error': [Array],
'$close': [Array]
}
},
nsp: '//undefined//undefined',
subs: [
[Function: subDestroy],
[Function: subDestroy],
[Function: subDestroy],
[Function: subDestroy]
]
}
Any suggestions?

Answer 1

According to documentation socket server options here socket.io v4
you need to specify a path same as client path
in your case
const io = new Server(res.socket.server, {path:'/api/socket'});