Socket.io client connection not connecting to production server when pushed to heroku

Socket.io client connection not connecting to production server when pushed to heroku
0
#1

Hi

My situation is this:
I’m hosting two apps on heroku. One is my api for my vote app and the other is for the front end code for my vote app. The socket connection worked fine locally. but for some reason I can’t make the connection in production. This is the url to my client side code:

https://fierce-everglades-13309.herokuapp.com/ if you open the console you’ll see the error message I’m getting.

In my pollcontainer component, I’m trying to connect to my api like this:

const socket = io('https://tranquil-rocky-mountain-92476.herokuapp.com/')

As a result I’m getting this error

VM53:161 WebSocket connection to wss://tranquil-rocky-mountain-92476.herokuapp.com/socket.io/?EIO=3&transport=websocket&sid=5_PKISMeChdukMNZAAAG' failed: Error during WebSocket handshake: Unexpected response code: 400
WrappedWebSocket @ VM53:161

It seems like my server isn’t allowing a connection from my client. But I have no idea how to fix this. And I really have not been able to find a solution online for some reason. Can anybody help me understand why this isn’t working?

#2

Is this on GitHub? Could you post both repos?

I have had socket.io working between seperate front and back ends (surge for front, Heroku for back) and it worked fine in production, so I’d like to compare both our approaches to see if that helps me figure it out.

#3

hi yes
here’s the front end:

I’m making the socket connection in my client code inside src/components/poll-components/pollcontainer

and the api:

#4

Hmmm, nothing’s immediately jumping out at me - though to be fair, I have a 3 year old constantly harassing me while I’m trying to figure it out.

Here’s my client side socket.io thing (also a create-React-app so you should be able to find your way around ok). This might help you think yours through or try to spot significant differences.

Don’t worry, it’s not the vote app, so no significant spoilers :slight_smile:

https://github.com/JacksonBates/pair-frontend/blob/master/src/App.js

#5

the only difference I see between how I’m connecting to my api in my client socket connection compared to yours is that your front end code has a config file that imports a variable with your api’s url. How is that any different than what I’m doing?

#6

@JacksonBates turns out that error was from the preliminary connection I make on the client. I think because the socket continuously polls it made a successful connection on the second pass. I’m guessing that’s whats happening because when I submit my form, my updated data is being passed back and all the clients are receiving the correct data in real time.

I really really really despise socket.io’s documentation sometimes. I was banging my head for hours on that. But my app is working! A few more tweaks and I’ll be done.

#7

@kkindorf hey can you elaborate more on what exactly you did to fix the issue, cause I’m facing the same issue right now!