Socket.io-client: Can't connect via socket.io-client on react-native

Looks like this is react-native's issue. Earlier versions of RN seem to work with socket.io, but 0.0.57 does not. Closing.

Try "socket.io-client": "2.0.4"
This may be socket.io bug

Try "socket.io-client": "2.0.4"
This may be socket.io bug

Yes it does work.

With RN 0.52 and socket.io-client 2.0.4 I'm still facing this issue.

@noahprince22 can you please share your configuration ?
I am currently using this and the issue still persist.

"react-native": "0.55.4",
"react": "16.3.1",
"socket.io-client": "^2.0.4",
"socket.io: "^2.2.0" //server side

any workaround?

socket.io team please, this should work with RN, is a socket.io bug.

Hi @ningacoding , I managed to get it working with this configuration

"react-native": "0.55.4",
"react": "16.3.1",
"socket.io-client": "^2.0.4",
"socket.io: "^1.0.0" //server side

In your react-native app use this

const socket = io(BASE_URL, {
    secure: true,
    transports: ['websocket'],
  });

"react-native": "0.58.6",
"react": "16.6.3",
"socket.io-client": "^2.0.4",

Not working for me

any solution? I'm facing the same thing

I have long since stopped working on the project that I was having this issue with. If I remember correctly, I downgraded react-native to "solve' the problem.

Experiencing the same issue, has there been a fix yet? Anyone find any workarounds to implementing sockets in React Native?

@russellgoldman I had problems with RN 0.60.5 and socket.io. Release build did not connect to the server.

None of socket.io versions worked with RN 0.60.5: I tried versions 2.0.4, 2.1.1, 2.2.0.

Downgrading to RN 0.59.10 solved my problem.

Hi @anttirauh and @russellgoldman,
I tried with RN 0.59.10 and Socket 2.0.4, but its not connecting on release build.
Can you please help me?

@Ramesh21071993 I think you must upgrade socket.io to version 2.1.1.

@anttirauh, i tried with all these versions socket io (2.0.4, 2.1.1, 2.2.0) and react-native versions (0.60, 0.59.10, 0.59.4)
In server side also socket io 2.0.4.
still that same issue sir,

But it works on RN 0.55.4

@Ramesh21071993 My understanding (which is formed with heavy googling and own testing) is that:

• socket.io stopped working with react-native about around RN version 0.57.4
• socket.io or some other component was fixed later and I managed to get it working with version combo: RN 0.59.10 + socket.io 2.1.1
• RN version 0.60.x is not working with any version of socket.io

So my advice is only: try one time more with RN 0.59.10 and socket.io 2.1.1 and make sure that you clear build folder before building. And remove node_modules before yarn/npm.

@anttirauh Sir, below is my package.json. I did as what you told. But nothing happen. I remove build folder and node modules and again i install.
Please help me on this to work, Past one month am trying

App package.json

{
"name": "Track",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.10",
"socket.io": "2.1.1"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"babel-jest": "^24.9.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}

Server Package.json

{
"name": "TRACK-Socket",
"version": "0.0.1",
"dependencies": {
"amqplib": "^0.5.1",
"config": "^3.2.2",
"express": "^4.15.3",
"socket.io": "^2.1.1",
"ws": "^7.1.2"
}
}

Thanks

Finally found a solution for React Native >= 0.60 after a couple of coffees and digging deep into engine.io - additional to a version conflict (with RN) there seems to be an issue with passing in the URI. When I pass an URI into socketIO, it gets turncated to the host and 'socket.io' appened. So socketIO("https://foo.bar/my/endpoint/socket.io") will lead to socketIO trying to connect to https://foo.bar/socket.io without showing it in the logs when throwing the xhr pull / socket error.

Here we go, how to get socket.io running on current versions of React Native:

• use socket.io-client version _2.1.1_

// package.json
{
  "dependencies": {
     "socket.io-client": "2.1.1"
   }
}

• when setting up the client, define a host and a path

const socket = socketIO('https://your.host.com/', {
  path: '/path/to/socket.io/'
})

• and suddenly everything works as smooth as planed

Hope to have saved you the time I spent on this issue 😆

@rastapasta , i got an error like “CLEARTEXT communication not permitted by network security policy”,

Please tell me what to do

@Ramesh21071993 if you can't use your endpoint via https (please consider it), add their hostnames to the exception lists.

for iOS: https://stackoverflow.com/a/30732693
for Android: https://stackoverflow.com/a/50834600

Sir, I tried that also but not able to do. If you don't mind can you please give me any demo source files
For long time I struck with this.

Am using ip and port sir

follow the directions of above documentations and adapt this implementation:

import socketIO from 'socket.io-client'
const socket = socketIO('http://8.8.8.8:3000/', {
  path: '/your/path/to/socket.io/'
  reconnectionDelay: 1000,
  reconnection: true,
  reconnectionAttempts: Infinity,
  jsonp: false
})

socket.on('connect', () => console.log('connected'))
socket.on('error', console.error)
socket.on('connect_error', console.error)

Sir, in server side am using socket io 2.1.1, is it ok or anything need to change

@Lizhooh hacky way of finding out whazzup on rn: monkey patch a console.log(err) before the self.onError in your node_modules engine.io-client/blob/master/lib/transports/polling-xhr.js #L131

@Ramesh21071993 Is your issue resolved? I am facing the same issue. Tried everything mentioned in above comments.

@rastapasta I followed what you have suggested above. My socket connection happens and then immediately disconnects. I get timeout error infinitely. However, whenever I click on some component which makes a network call, the socket connects and immediately disconnects. If I don't do any network call after first socket disconnect, it would stay in the same state. Please, could you help?

socket = io('http://IP:31515', {
path: '/socketio', //I have given this is the path in my socket server as well as my kubernetes ingress file to route to that port
transports: ['websocket'],
reconnectionDelay: 1000,
reconnection: true,
reconnectionAttempts: Infinity,
// timeout: 30000,
jsonp: false
});

things that I have tried:

1. removing and adding transports option
   2.removing and add timeout
2. removing all parameters except path
3. adding pingTimeout and pingInterval in server socket configuration
4. removing path from server and client and only keeping it in my kubernetes ingress file to route to that deployment/pod.

Note: the same server and kubernetes conf work for any node.js socket client as well as my react js web app. I am only facing this issue for React Native app in debug as well as release mode.

Does anyone have any idea for my above issue?

@calqlum123
Please make sure to

• add your host to the transport exception list (s. here)
• try it without manually defining the transports
• monkey patch the console.log (s. here) and check the error

Can anyone please share a complete working example for both client and server? Because this is confusing.

@Unforgiven-wanda

foodsharing.network's socket io:

• server @ https://gitlab.com/foodsharing-dev/foodsharing/blob/master/chat/server.js
• react native client @ https://github.com/rastapasta/foodsharing/blob/master/src/sagas/websocket.tsx

I am using "react-native": "0.61.5" and "socket.io-client": "^2.1.1",

below is my code

const socket = SocketIOClient('http://192.168.0.101:1234',{reconnect: true}); socket.connect(); socket.once("connect", () => { console.log("[CLIENT] Connected to remote server, identificating."); // this.sendIdentification(); }); socket.on('connect', () => { console.log('connected to socket server'); });

The code is not able to connect to the server and I am also looking for the solution. I don't want to downgrade my react-native version.

you must add this code in application tag
like below in AndroidManifest.xml
. . .

I am using "react-native": "0.61.5" and "socket.io-client": "^2.1.1",

below is my code

const socket = SocketIOClient('http://192.168.0.101:1234',{reconnect: true}); socket.connect(); socket.once("connect", () => { console.log("[CLIENT] Connected to remote server, identificating."); // this.sendIdentification(); }); socket.on('connect', () => { console.log('connected to socket server'); });

The code is not able to connect to the server and I am also looking for the solution. I don't want to downgrade my react-native version.

Can you try "ws://192.168.0.101:1234", instead of "http://192.168.0.101:1234"

@Unforgiven-wanda an example with React Native has been added here: https://github.com/socketio/socket.io/tree/master/examples/react-native

Not able to connect with "socket.io-client": "^3.0.4" in react native

@chiragpurohit71085 have you checked the example there: https://github.com/socketio/socket.io/tree/master/examples/react-native?

I think that this is a problem of URL, could you please check if your server is reachable at http://192.168.x.y:z?