Can't connect via socket.io-client on react-native #1245

noahprince22 · 2018-10-30T23:04:10Z

You want to:

report a bug
request a feature

Current behaviour

I can't connect via socket io to my server, it times out.

Steps to reproduce (if the current behaviour is a bug)

In react-native:

import io from 'socket.io-client';


const BACKEND = 'my socketio server url'

const sock = io(BACKEND, { transports: ['websocket'], forceNew: true });
sock.on('connected', () => {
  debugger;
})

The debug logs look like:

socket.io-client:url parse <my url> +0ms
browser.js:133 socket.io-client ignoring socket cache for <my url> +0ms
browser.js:133 socket.io-client:manager readyState closed +0ms
browser.js:133 socket.io-client:manager opening <my url> +1ms
browser.js:133 engine.io-client:socket creating transport "websocket" +0ms
browser.js:133 engine.io-client:socket setting transport websocket +3ms
browser.js:133 socket.io-client:manager connect attempt will timeout after 20000 +6ms
browser.js:133 socket.io-client:manager readyState opening +2ms
socket.io-client:manager connect attempt timed out after 20000 +20s
browser.js:133 engine.io-client:socket socket close with reason: "forced close" +20s
browser.js:133 engine.io-client:socket socket closing - telling transport to close +2ms
browser.js:133 socket.io-client:manager connect_error +3ms
browser.js:133 socket.io-client:manager cleanup +1ms
browser.js:133 socket.io-client:manager will wait 899ms before reconnect attempt +1ms
browser.js:133 socket.io-client:manager attempting reconnect +912ms

Note: the best way (and by that we mean the only way) to get a quick answer is to provide a failing test case by forking the following fiddle.

Expected behaviour

I expect to be able to connect to my socketio server, the same way I am able to in a web browser.

Setup

OS: iOS iPhone 10 simulator
browser: React-native
socket.io version: 2.1.1

The text was updated successfully, but these errors were encountered:

noahprince22 · 2018-10-31T16:10:16Z

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.

rxhivzero · 2018-11-30T13:42:54Z

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

khloukrada · 2018-12-24T03:07:55Z

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

Yes it does work.

jr-k · 2019-01-03T21:36:35Z

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

linux08 · 2019-01-23T10:56:04Z

@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

ningacoding · 2019-03-01T03:10:20Z

any workaround?

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

linux08 · 2019-03-01T09:39:11Z

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'],
  });

SukumarSmart · 2019-06-06T08:06:03Z

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

Not working for me

LucasHimelfarb · 2019-07-10T20:42:18Z

any solution? I'm facing the same thing

noahprince22 · 2019-07-15T18:22:04Z

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.

russellgoldman · 2019-09-18T18:34:26Z

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

anttirauh · 2019-09-23T06:40:04Z

@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.

Ramesh21071993 · 2019-09-24T15:35:28Z

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?

anttirauh · 2019-09-25T05:55:40Z

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

Ramesh21071993 · 2019-09-25T06:00:29Z

@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

anttirauh · 2019-09-25T06:31:31Z

@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.

Ramesh21071993 · 2019-09-25T18:23:21Z

@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

rastapasta · 2019-09-26T00:02:14Z

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 😆

Ramesh21071993 · 2019-09-26T19:18:45Z

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

Please tell me what to do

rastapasta · 2019-09-26T19:44:18Z

@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

Ramesh21071993 · 2019-09-26T19:51:38Z

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

rastapasta · 2019-09-26T20:06:22Z

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)

Ramesh21071993 · 2019-09-26T20:10:09Z

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

Lizhooh · 2019-10-11T07:18:15Z

rastapasta · 2019-10-11T13:39:35Z

@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

deepakburnwal5 · 2019-11-09T07:18:36Z

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

deepakburnwal5 · 2019-11-09T07:30:44Z

@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:

removing and adding transports option
2.removing and add timeout
removing all parameters except path
adding pingTimeout and pingInterval in server socket configuration
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.

deepakburnwal5 · 2019-11-11T11:47:21Z

Does anyone have any idea for my above issue?

rastapasta · 2019-11-11T14:58:57Z

@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

HZSamir · 2019-12-08T15:26:54Z

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

rastapasta · 2019-12-09T19:27:05Z

@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

ashishonmobile · 2020-01-19T00:55:14Z

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.

paliwalsam · 2020-05-14T05:23:10Z

you must add this code in application tag
like below in AndroidManifest.xml
<Application . . android:usesCleartextTraffic="true"> . . .

avinashsahoo · 2020-07-04T11:38:26Z

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"

darrachequesne · 2020-07-09T11:09:25Z

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

chiragpurohit71085 · 2020-12-15T21:31:47Z

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

darrachequesne · 2020-12-17T10:00:04Z

@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?

HamedNN76 · 2021-06-19T01:55:58Z

Finally, after so much research, I find out that you need to pass two parameters to io(), as shown below:

import io, { Socket } from 'socket.io-client';
...
const socket: Socket = io('http://localhost:8080', {
    transports: ['websocket'],
    jsonp: false,
});

package.json file:

"react": "17.0.1",
"react-native": "0.64.2",
"socket.io-client": "2.1.1",

darrachequesne · 2021-06-19T04:45:52Z

@HamedNN76 if setting transports: ['websocket'] (that is, disabling HTTP long-polling) is required to fix your issue, it might be related to CORS:

const { Server } = require("socket.io");

const io = new Server({
  cors: {
    origin: ["http://localhost:19006"]
  }
});

Documentation: https://socket.io/docs/v4/handling-cors/

I don't think disabling JSONP (jsonp: false) is required here, in any case.

It could also be related to the version of your client (2.1.1). Please check the compatibility table here: https://socket.io/docs/v4/client-installation/#Version-compatibility

arshadazaad3 · 2021-10-07T22:17:30Z

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

Works!

"react-native": "0.63.4",
"socket.io": "^4.0.0",
"socket.io-client": "^4.0.0",

Edit: Comment Outdated! - 24/04/2024

techiekarthick · 2023-01-25T07:59:14Z

Can anyone please suggest, not able to connect socket-io-client

"react": "18.1.0",
"react-native": "^0.70.6",
"socket.io-client": "^4.5.0",

It throwing 'connect_error' ? Any suggestion to resolve

darrachequesne · 2023-01-25T08:00:54Z

@techiekarthick hi! did you check our troubleshooting guide?

techiekarthick · 2023-01-25T08:09:54Z

@darrachequesne hi, yeah I'm already checked.

darrachequesne · 2023-01-25T08:27:37Z

@techiekarthick could you please share the details of the error object:

socket.on("connect_error", (error) => {
  console.log(error);
});

techiekarthick · 2023-01-25T09:11:04Z

@darrachequesne It showing only this [Error: websocket error]

techiekarthick · 2023-01-27T04:41:55Z

@darrachequesne Hi, I found the issue; there is no version problem. (WIFI) IP address mismatch between my laptop and my phone.

ilkanozen · 2024-04-23T20:56:02Z

npm install socket.io-client not installing supported version for socket.io(server-side)
when i tryed
npm install socket.io@latest (server-side)
npm install socket.io-client@latest(client-side)
it's worked for me

darrachequesne · 2024-04-24T08:51:23Z

For future readers:

Please check our React Native guide here: https://socket.io/how-to/use-with-react-native

noahprince22 closed this as completed Oct 31, 2018

noahprince22 mentioned this issue Oct 31, 2018

Somewhere between 0.0.55 and 0.0.57, socket.io stops working facebook/react-native#22043

Closed

3 tasks

jr-k mentioned this issue Jan 3, 2019

Unable to connect on React-Native (only in Debug Mode) #1259

Closed

2 tasks

ivanjiang5628 mentioned this issue Sep 30, 2020

[TEL-281] Telehealth waiting area/ practitioner tool (ios) janeapp/video-chat#18

Merged

12 tasks

Can't connect via socket.io-client on react-native #1245

Can't connect via socket.io-client on react-native #1245

Comments

noahprince22 commented Oct 30, 2018

You want to:

Current behaviour

Steps to reproduce (if the current behaviour is a bug)

Expected behaviour

Setup

noahprince22 commented Oct 31, 2018

rxhivzero commented Nov 30, 2018

khloukrada commented Dec 24, 2018

jr-k commented Jan 3, 2019

linux08 commented Jan 23, 2019

ningacoding commented Mar 1, 2019

linux08 commented Mar 1, 2019

SukumarSmart commented Jun 6, 2019

LucasHimelfarb commented Jul 10, 2019

noahprince22 commented Jul 15, 2019

russellgoldman commented Sep 18, 2019

anttirauh commented Sep 23, 2019 • edited

Ramesh21071993 commented Sep 24, 2019 • edited

anttirauh commented Sep 25, 2019

Ramesh21071993 commented Sep 25, 2019

anttirauh commented Sep 25, 2019

Ramesh21071993 commented Sep 25, 2019 • edited

App package.json

Server Package.json

rastapasta commented Sep 26, 2019

Ramesh21071993 commented Sep 26, 2019

rastapasta commented Sep 26, 2019

Ramesh21071993 commented Sep 26, 2019 • edited

rastapasta commented Sep 26, 2019

Ramesh21071993 commented Sep 26, 2019

Lizhooh commented Oct 11, 2019

rastapasta commented Oct 11, 2019

deepakburnwal5 commented Nov 9, 2019

deepakburnwal5 commented Nov 9, 2019 • edited

deepakburnwal5 commented Nov 11, 2019

rastapasta commented Nov 11, 2019

HZSamir commented Dec 8, 2019

rastapasta commented Dec 9, 2019

ashishonmobile commented Jan 19, 2020

paliwalsam commented May 14, 2020

avinashsahoo commented Jul 4, 2020

darrachequesne commented Jul 9, 2020

chiragpurohit71085 commented Dec 15, 2020

darrachequesne commented Dec 17, 2020

HamedNN76 commented Jun 19, 2021

darrachequesne commented Jun 19, 2021

arshadazaad3 commented Oct 7, 2021 • edited

techiekarthick commented Jan 25, 2023

darrachequesne commented Jan 25, 2023

techiekarthick commented Jan 25, 2023

darrachequesne commented Jan 25, 2023

techiekarthick commented Jan 25, 2023 • edited

techiekarthick commented Jan 27, 2023

ilkanozen commented Apr 23, 2024

darrachequesne commented Apr 24, 2024

anttirauh commented Sep 23, 2019 •

edited

Ramesh21071993 commented Sep 24, 2019 •

edited

Ramesh21071993 commented Sep 25, 2019 •

edited

Ramesh21071993 commented Sep 26, 2019 •

edited

deepakburnwal5 commented Nov 9, 2019 •

edited

arshadazaad3 commented Oct 7, 2021 •

edited

techiekarthick commented Jan 25, 2023 •

edited