I have a MERN app, i use socket.io for a web socket functionality. This is my code and cconfiguration:

// Import required modules
const express = require("express");
const cors = require("cors");
const connectToMongo = require("./mongo/dbConnection");
require("dotenv").config();
const cookieParser = require("cookie-parser");
const socketIo = require("socket.io");
const http = require("http");

// Create Express app
const app = express();
connectToMongo();

// Middleware
app.use(express.json());
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());

// ------- ROUTES -------
app.use('/api/', require('path to file'))

// Serving WS and Express servers together
const server = http.createServer(app);
global.io = socketIo(server, {
  cors: {
    origin: process.env.FRONTEND_DOMAIN,
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("Client connected:", socket.id);

  socket.on("disconnect", () => {
    console.log("Client disconnected:", socket.id);
  });
});

// Start the server
const PORT = process.env.PORT;

server.listen(PORT, () => {
  console.log(`Socket Server is running on port ${PORT}`);
});

[IMPORTED ROUTE IN INDEX.JS]
const express = require("express");
const router = express.Router();
const User = require("../../mongo/schema/userSchema");
const Request = require("../../mongo/schema/requestSchema");
const fetchUser = require("../userAuth/fetchUserMiddleware");

router.post("/history", fetchUser, async (req, res) => {
  const filterCount = 10;
  const trialFilterCount = 3;
  try {
    const userId = req.user.id;
    const user = await User.findById(userId);

    const historyData = await Request.find({ userId: userId })
      .select(["-_id", "-__v", "-userId"])
      .sort({ timestamp: -1 });

    if (
      historyData.length >= trialFilterCount &&
      user.subscriptionType === "trial"
    ) {
      await user.updateOne({ subscriptionType: "notSubscribed" });

      global.io.emit("subscriptionStatusChange", { subStatus: false });
    }
    const userHistory = historyData.slice(0, filterCount);

    res.status(200).send({ success: true, userHistory });
  } catch (error) {
    console.error("Error in Filter History fetchingn" + error);
    res.status(500).send("Internal Server Error!");
  }
});

module.exports = router;

[nginx conf]
server {
    server_name www.<app>.com;

    # Serve frontend files
    location / {
        root /var/www/<app>/;
        try_files $uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:5000/api/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /socket/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://localhost:5000;

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

The whole app works absolutely perfect on localhost but, it does not work at all on the server(VPS).
I have exhausted all my options, could anyone help me? The problem is that the web socket connection is not establishing at all. I am calling the socket.io client in frontend like this

import axios from "axios";
import React, { createContext, useEffect, useState } from "react";
import io from "socket.io-client";

const AuthContext = createContext();
const backendHost = import.meta.env.VITE_BACKEND_HOST;

const socket = io(`${import.meta.env.VITE_BACKEND_SOCKET_HOST}`);

socket.on('connect',()=>{
  console.log('Socket Connected')
})

export const AuthProvider = ({ children }) => {

  const [isSubscribed, setIsSubscribed] = useState(false);

  useEffect(() => {

    socket.on("subscriptionStatusChange", ({ subStatus }) => {
      setIsSubscribed(subStatus);
    });

    // Clean up
    // return () => {
    //   socket.off("subscriptionStatusChange");
    // };
  }, []);



  return (
    <AuthContext.Provider
      value={{
        isSubscribed,
        setIsSubscribed
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

Need urgent help.

More Info: I am using GCP VM instance. Firewall allows http connections.

I tried pinging the web socket as standlone instance on localhost on VPS it connects but, not through the website.

const net = require('net');

const HOST = '127.0.0.1'; // localhost
const PORT = 5000; // Port number to connect to

// Create a TCP socket client
const client = new net.Socket();

// Attempt to connect to the server
client.connect(PORT, HOST, () => {
    console.log(`Connected to ${HOST}:${PORT}`);

    // Once connected, send a message to the server
    client.write('Hello, server! I am a client.');
});

// Handle incoming data from the server
client.on('subscriptionStatusChange', (data) => {
    console.log(`Received data from server: ${data}`);

    // Close the connection after receiving data
    client.end();
});

// Handle connection closed by the server
client.on('close', () => {
    console.log('Connection closed by server');
});

// Handle connection errors
client.on('error', (err) => {
    console.error('Error:', err);
});