Can someone help me figure out why my React + Socket.io app does not work on mobile using Chrome/Safari?

Hello Guys! I’ve been experimenting React + Socket.io and I have here a test site: https://keen-lovelace-68a475.netlify.com/

Problem:
Logging in my username on the desktop will take me on the chatroom but logging in using mobile browser (chrome/safari), it doesnt take me to the chatroom. Any advise or idea to fix this?
Adding the netlify demo: https://keen-lovelace-68a475.netlify.com/ and the repo: https://github.com/KBPsystem777/react-websocket

this is the error i am getting when i submit my name.

1 Like

Following on from what @Hassanbhb says, I think your error is here: https://github.com/KBPsystem777/react-websocket/blob/bd518465ecb289f830d332f53af4265d9a999de9/src/FrontEnd/Layout.js#L7, where there is an [http] localhost url

Thanks @DanCouper! I understand that the localhost is the dummy port when developing locally. But in the case that I deploy it, should be the socketUrl needs to be updated to the netlify address which is https://keen-lovelace-68a475.netlify.com/ ? regards

I think this is correct:

It needs to connect to the host that is serving the page: if you specify the URL as localhost, it’ll try to connect to the current user’s own machine. All the examples use localhost, and it’s a bit confusing - better examples maybe here:

It’s important to note the line that says var socket = io.connect(window.location.hostname); . In the socket.io docs they usually tell you to connect to localhost but since we’re on heroku we’ll need to instead connect to whatever our custom domain is.

And in the socket.io docs, hidden away in the tutorial (which uses localhost everywhere else:

var socket = io(); // TIP: io() with no args does auto-discovery
1 Like

Thanks man! Will definitely review these docs :slight_smile: