socket.io connect failed on production, working in localhost

Question

I have this in server.js

//socket io config
const server = require('http').createServer(app)
const io = require('socket.io')(server)
io.on('connection', function (socket) {
  socket.on('SOCKET_COMMENT_RECEIVED', ({ notification }) => {
    io.emit(`SOCKET_COMMENT_RECEIVED`, notification)
  })
  //and many more
})

In my client (react)

import io from 'socket.io-client'
const socket = io('localhost:3001') // working in localhost

in my prod I do this checking

let socket = io('localhost:3001')
if(process.env.NODE_ENV === 'production') { socket = 
  io('https://api.example.com:3001') 
}

Why is it so? I don't think it's cors issue because I already did

app.use(cors({
  origin: true,
  credentials: true
}))

my package.json deps

"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",

@SantoshShinde yeah that's what I did. Do I have to setup reverse proxy or anything like that in node.js? — Alisa T Morgan, Sep 18 '18 at 04:01
https://github.com/react-boilerplate/react-boilerplate/issues/1413 — Santosh Shinde, Sep 18 '18 at 04:02

Santosh Shinde · Answer 1 · 2018-09-18T12:42:13.103

0

In your server code please add the following line

io.set('origins', '*:*');

So your code will be

  //socket io config
  const server = require('http').createServer(app)
  const io = require('socket.io')(server)
  io.set('origins', '*:*');
  io.on('connection', function (socket) {
    socket.on('SOCKET_COMMENT_RECEIVED', ({ notification }) => {
      io.emit(`SOCKET_COMMENT_RECEIVED`, notification)
    })
    //and many more
  })

For more help to follow this tutorial & this question.

The source code is available here.

Hope this will help you !!

edited Sep 18 '18 at 12:42

answered Sep 18 '18 at 04:15

Santosh Shinde

6,045
7
44
68

Why `io.set('origins', '*:*')` is different from `app.use(cors({ origin: true, credentials: true }))` ?? – Alisa T Morgan Sep 18 '18 at 04:17
same error I got. In firefox I see this error `Cross-Origin Request Blocked: The Same Origin Policy disallow` – Alisa T Morgan Sep 18 '18 at 04:40
Can you please just use app.use(cors()) – Santosh Shinde Sep 18 '18 at 04:41
the strange part is I have no issue running it on local, have you tried to publish ur repo to production? – Alisa T Morgan Sep 18 '18 at 04:42
Yes it's working but I simply use cors without extra config – Santosh Shinde Sep 18 '18 at 04:43
tried bunch of things, nothing worked, not sure it's my ssl issue. – Alisa T Morgan Sep 18 '18 at 07:00
Maybe, do you have repo then give me access or just try with demo on production – Santosh Shinde Sep 18 '18 at 08:27
I deployed your code https://github.com/TutorialEdge/react-typescript-real-time-chat with netlify, having the exact same problem with mine, do you familiar with netlify? I don't think it's code level issue now. – Alisa T Morgan Sep 18 '18 at 12:29
Okay Can you please share that url with me ? – Santosh Shinde Sep 18 '18 at 12:31
sure. https://mystifying-fermat-004141.netlify.com/ in chrome the error message is different than in firefox, in firefox the error msg is cros related. – Alisa T Morgan Sep 18 '18 at 12:37
Have you update the code io.set('origins', '*:*'); ? – Santosh Shinde Sep 18 '18 at 12:41
https://stackoverflow.com/questions/24058157/socket-io-node-js-cross-origin-request-blocked – Santosh Shinde Sep 18 '18 at 12:42
I did not touch your code, it is there: https://github.com/TutorialEdge/react-typescript-real-time-chat/blob/master/backend/src/app.ts#L9. I really suspect something is wrong with netlify, it has't been so hard with cors issue, previously I have no problem setup socket.io with reverse proxy in nginx. – Alisa T Morgan Sep 18 '18 at 12:43
Actually this is not my repo I just shared sample which I have referred for me, and you have to update the code which I have mentied in my answer – Santosh Shinde Sep 18 '18 at 12:44
What else I need to do? You said `io.set('origins', '*:*');` which is already here https://github.com/TutorialEdge/react-typescript-real-time-chat/blob/master/backend/src/app.ts#L9 – Alisa T Morgan Sep 18 '18 at 12:47
I think this has nothing to do with CORS- it was a problem with the security certificate. – Santosh Shinde Sep 18 '18 at 12:49
You mean the SSL? previously I also have SSL but I didn't do extra step to make it work, the only different is previously I host my client using nginx reverse proxy, this time I try netlify. – Alisa T Morgan Sep 18 '18 at 12:56
Maybe you're right because in my localhost it doesn't use ssl. – Alisa T Morgan Sep 18 '18 at 13:01

Lalo19 · Answer 2 · 2023-08-22T19:06:54.240

To know which route you should point in the api, access to the address "/socket.io/". For example, if you are runing on localhost:3001 should be "http://localhost:3001/socket.io/" and the response

{"code":0,"message":"Transport unknown"}

Be sure you are declaring the same server name and route in production. If you use a kind of proxy or sub route like /api you have to add it. This is an example.

SERVER ROUTE DECLARATION

const httpServer = require("http").createServer(app);
const options = {
    path: "/api/socket.io",
    cors: {
        origin: "*"
    }
};
const io = require("socket.io")(httpServer, options);

io.on('connect', function (socket) {
    socket.on('SOCKET_COMMENT_RECEIVED', ({ notification }) => {
        io.emit(`SOCKET_COMMENT_RECEIVED`, notification)
    })
});

CLIENT DECLARATION LISTENER (FOR REACT HOOKS)

  let socket = io("https://www.yoursite.com", { path: '/api/socket.io/' });

  React.useEffect(() => {
    socket.on('SOCKET_COMMENT_RECEIVED', function (data) {
      console.log(`RECEIVED`);
    });
    return () => {
      socket.disconnect();
    }
  }, []);

socket.io connect failed on production, working in localhost

2 Answers2