Problem:

Setup of socket.io to backend node js server unsuccessful. connection from both postman and frontend react both unsuccessful

frontend terminal error message:

App.js:6 
 
 GET https://project001db-11.onrender.com/socket.io/?EIO=4&transport=polling&t=P1GAxrA 404 (Not Found)
create  @   polling.js:298
Request @   polling.js:237
request @   polling.js:190
doPoll  @   polling.js:215
poll    @   polling.js:96
doOpen  @   polling.js:56
open    @   transport.js:46
open    @   socket.js:170
Socket  @   socket.js:111
open    @   manager.js:108
Manager @   manager.js:38
lookup  @   index.js:29
./src/App.js    @   App.js:6
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:22
fn  @   hot module replacement:61
./src/index.js  @   TextDecoratorBgIMG.js:21
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:22
(anonymous) @   startup:7
(anonymous)

postman error message:

Error: Unexpected server response: 404
Handshake Details
Request URL: https://project001db-11.onrender.com/socket.io/?EIO=4&transport=websocket
Request Method: GET
Request Headers
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: V9DaaiwnspTbd2OaBv42BQ==
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Host: project001db-11.onrender.com

setup background

backend: node.js, express.js, socket.io, restapi

hosting server: render webservice

Server side code

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

//socket.io
const { Server } = require("socket.io");
const { createServer } = require("http");

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

app.use(cors());

app.use(express.json());

//set up socket connection to record online user
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "https://project001db-11.onrender.com",
  },
});

let onlineUser = {};

io.on("connection", (socket) => {
  socket.on("userConnected", (user) => {
    onlineUser[socket.id] = user;
    io.emit("updateUserList", Object.values(onlineUsers));
  });

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

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

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

Client side

import "./App.css";
import Chatroom from "./Chatroom";
import { io } from "socket.io-client";
import { useEffect } from "react";

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

function App() {
  useEffect(() => {
    socket.emit("userConnected", { username: "JohnDoe" });

    socket.on("updateUserList", (users) => {
      console.log("Updated user list:", users);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  return <Chatroom />;
}

export default App;

I tried to follow the socket.io document to set up the backend server and was expecting the connection to set up sucessfully so i can get list of online user stored in backend memory