[Fixed] while loading react app error , polling-xhr.js:203 GET https://localhost:8001/socket.io/?EIO=4&transport=polling&t=NZJdzB8 net::ERR_CONNECTION_REFUSED

Issue

I am beginner and trying to build a simple chat application with socket.io but when I am connecting socket.io-client with the backend it is reproducing the above mentioned error. I am unable to understand the meaning of the above error so please help me debug my code and understand the meaning and cause of error.

server-side code

const express = require("express");
const socketIo = require("socket.io");
const http = require("http");
const router = require("./router");
const PORT = 8001;
const cors = require("cors");

const app = express();

const server = http.createServer(app);

//middlewares
app.use(router);
app.use(cors());

const io = socketIo(server);
// var so = io("https://yourDomain:3000", { transport: ["websocket"] });
//socket.io
io.on("connection", (socket) => {
  console.log("We have a new connection!!!");

  socket.on("join", ({ name, room }) => {
    console.log(name, room);
  });
  socket.on("disconnect", () => {
    console.log("User has left!!!");
  });
});

//listening on server
server.listen(8000, (err) => {
  if (err) {
    console.log(`Error: ${err}`);
    return;
  }
  console.log(`Server started on port: ${PORT}`);
});

package.json for server-side

{
  "name": "real-chat-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "nodemon": "^2.0.7",
    "query-string": "^7.0.0",
    "react-emoji": "^0.5.0",
    "react-router": "^5.2.0",
    "react-scroll-to-bottom": "^4.1.0",
    "socket.io": "^4.0.1",
    "socket.io-client": "^4.0.1"
  }
}

my chat component client-side where i am using socket.io-client

import React, { useEffect, useState } from 'react';
import queryString from 'query-string';
import io from 'socket.io-client';

import './Chat.css';
let socket;
function Chat({ location }) {
  //state hook
  // eslint-disable-next-line
  const [name, setName] = useState('');
  const [room, setRoom] = useState('');
  const ENDPOINT = 'https://localhost:8001';
  useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    // const data = queryString.parse(location.search);
    // console.log('location', location);
    // console.log('location.search: ', location.search);
    // console.log('data: ', data);
    setName(name);
    setRoom(room);
    socket = io(ENDPOINT);
    console.log(socket);
    socket.emit('join', { name, room });
    console.log(socket);
  }, [ENDPOINT, location.search]);
  return <div>Chat page</div>;
}

export default Chat;

package.json for client-side

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "socket.io-client": "^4.0.1",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Solution

You are starting the server on PORT 8000 but the client is trying to connect to PORT 8081.

Change this line,

const ENDPOINT = 'https://localhost:8001';

to

const ENDPOINT = 'http://localhost:8000';

Whenever you face ERR_CONNECTION_REFUSED, it means the server is not accessible or to be precise the server is denying connections on the port for some reason.

ERR_SSL_PROTOCOL_ERROR could be happening because of "https". Use "http" instead.