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

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

[rastapasta]

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 😆

[rxhivzero]

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