title: error: websocket.js:84 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&transport=websocket' failed:
body: <p>I am building a realtime chat application using <strong>reactJs</strong>, <strong>node</strong> and <strong>socket.io</strong> . But i am getting the error that <strong>websocket connection has failed</strong>. This is the error which i am getting  in the console <code>websocket.js:84 WebSocket connection to 'ws://localhost:5000/socket.io/?EIO=4&amp;transport=websocket' failed:</code></p>
  <p>This is <strong>client</strong> side code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   
  let socket;
  
  const Chat = ({ location }) =&gt; {
    
    useEffect(() =&gt; {
      const { name, room } = queryString.parse(location.search);
      socket = io(ENDPOINT, { transports: ['websocket'] })
      setName(name);
      setRoom(room);
  
      socket.emit('join', { name, room }, () =&gt; {
  
      })
      return () =&gt; {
        socket.emit('disconnect');
  
        socket.off();
      }
    
    }, [ENDPOINT, location.search])
  
    useEffect(() =&gt; {
      socket.on('message', (message) =&gt; {
        setMessages([...messages, message]);
      })
    }, [messages]);
  
  
    const sendMessage = (event) =&gt; {
      event.preventDefaut();
      if (message) {
        socket.emit('sendMessage', message, () =&gt; setMessage(''));
      }
    }
    console.log(message, messages);
    return (
      &lt;div className="outerContainer"&gt;
        &lt;div className="container" &gt;
          &lt;input value={message} onChange={(event) =&gt; setMessage(event.target.value)} onKeyPress={event =&gt; event.key === 'Enter' ? sendMessage(event) : null} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  
  export default Chat;</code></pre>
  </div>
  </div>
  </p>
  <p>and this is server side code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { addUsers, removeUser, getUser, getUsersInRoom } = require('./users')
  
  const PORT = process.env.PORT || 5000
  
  const router = require('./router');
  
  const app = express();
  
  const server = http.createServer(app);
  const io = socketio(server);
  
  io.on('connection', (socket) =&gt; {
    socket.on('join', ({ name, room }, callback) =&gt; {
  
      const { error, user } = addUsers({ id: socket.id, name, room });
  
      if (error) return callback(error);
  
      socket.emit('message', { user: 'admin', text: `${user.name} , welcome to room ${user.room}` });
      socket.broadcast.to(user.room).emit('message', { user: 'admin', text: `${user.name} has joined` });
  
      socket.join(user.room);
  
      callback();
    })
  
    socket.on('sendMessage', (message, callback) =&gt; {
      const user = getUser(socket.id);
  
      io.to(user.room).emit('message', { user: user.name, text: message });
  
      callback();
    })
  
    socket.on('disconnect', () =&gt; {
      console.log("user have left");
    })
  })</code></pre>
  </div>
  </div>
  
  I tried to solve this but could not find anything in official documentaion.
  How to fix this issue?</p>