404 not found when using socket.io-client with react

Question

I am implementing socket.io-client package in my react app. My react app is using express and webpack. When using following code:

import io from 'socket.io-client';

const socket = io('http://localhost');

in any component, I am getting following error:

polling-xhr.js:264 POST http://localhost/socket.io/?EIO=3&transport=polling&t=Lrprs_y 404 (Not Found)

Same error is coming when using http://localhost:80.

And when using 127.0.0.1 at the place of 'localhost`, its throwing following error:

XMLHttpRequest cannot load http://127.0.0.1/socket.io/?EIO=3&transport=polling&t=Lrq3G9W. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Try to specify the port on which your application is running like io('http://localhost:8080') and make sure that server is running — Shubham Khatri
@ShubhamKhatri Its running on default 80. When using io('http://localhost:80') still the same error. And when using 127.0.0.1 instead of localhost its throwing CORS error — Triyugi Narayan Mani

V. Lipunov V. Lipunov · Accepted Answer · 2018-07-26T22:22:14

I think all you need to do is put your code into componentDidMount. Do something like this:

// Client
componentDidMount() {
    const socket = io('http://localhost:8000');
    socket.on('message', message => {
      console.log(message);
    });
}

// Server
const io = require('socket.io')();

io.on('connection', (client) => {
   console.log('a user connected:', client);
});
io.listen(8000);
console.log('socket io is listening on port ', 8000);
setInterval(() => {
  io.send('hello world');
}, 1000);

Then run npm run build and npm run prod (or whatever your command is to start the node js server). P.S. you can also use express with socket io

404 not found when using socket.io-client with react

1 Answers