Problem

I have set up socket.io on node server following advice here and socketio docs. It was working successfully and i can see server log can print out connected when i run localhosted client. However connection unsuccessful when i run the remote hosted client react app,i.e. console.log(“connected”) is not printed in server log.

localhosted client-localhosted server-> socket.io connect successful
localhosted client-render hosted server-> socket.io connect successful
render hosted client-render hosted server-> socket.io connect unsuccessful

Setup

• Hosting server and client both on render.com
• Node server configured using express with rest api and socket.io (p.s. rest api is working)
• Client using react

Server code

const supabase = require("./configdb.js");
const express = require("express");

const app = express();
const cors = require("cors");
const port = 3000;

app.use(cors());

app.use(express.json());

//socket.io
const httpServer = require("http").createServer(app);
const options = {
  cors: {
    origin: ["http://localhost:3000", "https://project001-ejm9.onrender.com/"],// both development and production  path
    methods: ["GET", "POST"],
  },
};
const io = require("socket.io")(httpServer, options);

//set up socket connection to record online user
let onlineUsers = {};

io.on("connection", (socket) => {
  console.log("connected");
  socket.on("userEntered", (user) => {
    onlineUsers[socket.id] = user;
    io.emit("updateUserList", Object.values(onlineUsers));
    console.log(Object.values(onlineUsers));
    console.log(user);
  });

  socket.on("connect_error", (err) => {
    console.log(`connect_error due to ${err.message}`);
  });

  socket.on("disconnect", () => {
    delete onlineUsers[socket.id];
    io.emit("updateUserList", Object.values(onlineUsers));
    console.log("disconnect");
  });
});

// Set port, listen for requests.
httpServer.listen(port, () => {
  console.log(`Server is running on port ${port}.`);
});

// Add routes routes.
require("./routes/chat.routes.js")(express, app);

Client code

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

const socket = io("https://project001db-11.onrender.com/");

export const useSocket = () => {
  useEffect(() => {
    return () => {
      socket.disconnect();
    };
  }, []);

  return useSocket;
};

export const useRegisterOnlineUser = (username) => {
  const [onlineUsers, setOnlineUsers] = useState([]);

  useEffect(() => {
    if (!username) return;

    const user = { username: username };
    socket.emit("userEntered", user, () => {
      console.log("emitted event-userConnected");
    });

    socket.on("updateUserList", (users) => {
      setOnlineUsers(users);
      console.log("updateUserList event received", users);
    });

    // Clean up on component unmount
    return () => {
      socket.off("updateUserList");
    };
  }, [username]);

  return onlineUsers;
};

Checked on stack overflow and online resource for solutions:

• suspect this is SSL issue, but tried to do SSL test on “https://www.ssllabs.com/ssltest/analyze.html?d=project001db-11.onrender.com”
  but got grade A, seems my server is already configured to handle https request ?

• tried to connect server with postman, also not working

i feels like my server is not configured correctly but then i can connect with local host client..grateful for advice please