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

5,797
6
44
63

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

socket.io connect failed on production, working in localhost

1 Answers1