I'm new in Socket.io;

connection successful, "emit" fires and "on" listens successfully from both sides. but when i reload my frontend, then the connection lost; i found repeatedly in the frontend console this-

  code: 'WS_ERR_EXPECTED_FIN',
  [Symbol(status-code)]: 1002
},
[Symbol(kMessage)]: 'Invalid WebSocket frame: FIN must be set'

}, context: undefined, type: 'TransportError' }

if restart my backend node.js server then again connection(new) established. i think this is my backend server problem, what can i do?

my backend index.js-

const http = require("http");
const { initializeSocket } = require("./config/socket");
init();
async function init() {
  try {
    db = await mongoose();
    console.log("MongoDB Connected!");
  } catch (err) {
    logger.verbose("[index/init]" + err);
    console.log(33, err);
  }
  global.settings = await Settings.findOne();
...
  initializeSocket(httpServer);
  httpServer.listen(process.env.PORT, () => {
    console.log(`Server running on ${process.env.APP_URL}${process.env.PORT}`);
  });
}

and my backend config/socket.js

const socketIO = require("socket.io");
const { createAdapter } = require("@socket.io/redis-adapter");
let io = null;
const initializeSocket = (httpServer) => {
  const allowedOrigins = [
    "http://localhost:3000",
    "http://localhost:3002",
    "http://localhost:4005",
    "null", //for native apps (Android/iOS)
  ];
  io = socketIO(httpServer, {
    transports: ["polling", "websocket"],
    allowUpgrades: true,

    pingTimeout: 20000,
    pingInterval: 25000,
    cors: {
      origin: (origin, callback) => {
        console.log("origin", origin);
        console.log(
          !origin || origin === "null" || allowedOrigins.includes(origin)
        );
        if (!origin || origin === "null" || allowedOrigins.includes(origin)) {
          callback(null, true);
        } else {
          callback(new Error("Not allowed by CORS"));
        }
      },
      methods: ["GET", "POST", "OPTIONS"],
      credentials: true,
    },
    perMessageDeflate: true,
  });
  // Attach Redis adapter
  // io.adapter(createAdapter(pubClient, subClient));
  io.engine.on("connection_error", (err) => {
    console.log("ENGINE CONNECTION ERROR");
    logger.error("ENGINE CONNECTION ERROR", err);
    console.log(err);
  });
  io.on("connection", function (socket) {
    const origin = socket.handshake.headers.origin;
    console.log(`[socket] Client connected: ${socket.id} from ${origin}`);

    socket.conn.on("upgrade", () => {
      console.log("UPGRADED TO", socket.conn.transport.name);
    });

    // Operator connects
    socket.on("operatorConnected", (operatorId) => {
      const roomName = `operator_${operatorId}`;
      socket.join(roomName);
      console.log(`Operator ${operatorId} connected: ${socket.id}`);
      socket.on("disconnect", () => {
        socket.leave(roomName);
        console.log(`Socket ${socket.id} left room ${roomName}`);
      });
    });
    socket.on("disconnect", () => {
      console.log(`[socket] ${socket.id} disconnected`);
    });
  });
  console.log("Socket running on same Server !");
};
module.exports = {
  initializeSocket,
  getIO: () => io,}

and this is my frontend next.js hooks-

import { useEffect, useContext } from "react";
import { socket } from "../../utils/socket";
import { AppContext } from "../context/AppContext";
export default function useOperatorSocket() {
  const { authUser, setOperatorDrivers } = useContext(AppContext);
  // CONNECT
  useEffect(() => {
    if (!socket.connected) {
      socket.connect();
    }
    return () => {};
  }, []);

and my next.js utils/socket.js

import { io } from "socket.io-client";
//ROOT_URL: "http://localhost:9005"
const socket = io(process.env.ROOT_URL, {
  transports: ["websocket"],
  reconnection: true,
  reconnectionAttempts: Infinity,
});
//Connection event handlers
socket.on("connect", () => {
  console.log("Connected to server");
});
socket.on("disconnect", () => {
  console.log("Disconnected from server");
});

// Error handling
socket.on("connect_error", (error) => {
  console.log("20");
  console.dir(error, { depth: null });
});