Socket.io-client: version 2.2 does not work with react native

experienced the same issue on both platform (simulator) 2.1.1, it only works with turning debugger on.

I am also facing this issue. I upgraded to see if it fixes my first connect latency issue.

I am also facing the same. issue

Reverting to 2.1.1 works for me.

I am still facing same issue reverting 2.1.1 also not working for me.

It should be fixed by https://github.com/socketio/engine.io-client/pull/607.

@benhjames could you confirm your fix has fixed the issue in React Native?

Yep, I'm currently running [email protected] (which has pulled in [email protected]) on React Native without issue.

It's worth checking to make sure your engine.io-client is 3.3.2, as this contains the React Native fix for websockets. 😃

@benhjames @darrachequesne I have used socket.[email protected] (which has pulled in [email protected]) and also verify the changes in node_modules still, it's not working for me.

`import io from 'socket.io-client';

export default class HomeScreen extends React.Component {
constructor(props){
super(props);
this.socket = io('ws://192.168.0.107:8080/endpoint',{
reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']
});
this.socket.on('connect_error', (err) => {
console.log(err)
});
}
`

I am getting the error as below :
Error: websocket error at WS.Transport.onError (transport.js:67) at WebSocket.ws.onerror (websocket.js:157) at WebSocket.dispatchEvent (event-target.js:172) at WebSocket.js:289 at RCTDeviceEventEmitter.emit (EventEmitter.js:190) at MessageQueue.__callFunction (MessageQueue.js:349) at MessageQueue.js:106 at MessageQueue.__guard (MessageQueue.js:297) at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105) at debuggerWorker.js:72

That looks to me like the endpoint is incorrect - it should be a http or https protocol link, not a ws one. 👍

@benhjames I earlier tried with WebSocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API and it was working perfectly fine with the same protocol.

socket.io (unlike the WebSocket API) only accepts a HTTP(S) protocol URI for the client (see the docs here), but it does _use_ the WS protocol behind the scenes.

So if you do io('http://192.168.0.107:8080/endpoint', ...) it should work!

@benhjames thanks for the update!

I think the ws:// should work properly, but the /endpoint means you want to connect to the endpoint namespace (that's the current implementation, as of v2.x). You may want to use:

this.socket = io('ws://192.168.0.107:8080', {
  path: '/endpoint',
  reconnection: true,
  reconnectionDelay: 500,
  jsonp: false,
  reconnectionAttempts: Infinity,
  transports: ['websocket']
});

@darrachequesne I have tried above implementation but it's still not working.

Perhaps it might be useful seeing what the SocketIO server code looks like, just to make sure it's using the right namespace and settings etc. 🙂

It's working perfectly fine with WebSocket API but when I try to connect with Socket.io API I am getting an error as below:

websocket error

Stack trace:
  null:null in WS.Transport.onError
  node_modules/engine.io-client/lib/transports/websocket.js:178:8 in WebSocket.ws.onerror
  node_modules/event-target-shim/lib/event-target.js:172:38 in WebSocket.dispatchEvent
  node_modules/react-native/Libraries/WebSocket/WebSocket.js:289:13 in <unknown>
  node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:32 in RCTDeviceEventEmitter.emit
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:41 in MessageQueue.__callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:11 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:8 in MessageQueue.__guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:9 in MessageQueue.callFunctionReturnFlushedQueue
  http://192.168.0.103:19001/debugger-ui/debuggerWorker.js:72:58 in <unknown>

If it works with the WebSocket API with no custom logic to unserialise socket.io payloads, then that implies that the server isn't using socket.io.

Is there any chance you could provide some code from the server to verify if this is the case?

@benhjames That's right we are using https://docs.oracle.com/javaee/7/api/javax/websocket/package-summary.html for backend code.

That explains it then! Socket.io needs to be used on _both_ the client and server to work. 👍

@benhjames @darrachequesne Now I am using socket.io in the backend, it's working fine on the frontend with vanilla javascript using socket.io but when I try to connect socket.io through React Native I am getting the error:

Vanilla JS(Working Perfectly fine) :

```

    <script>


            var socket =  io.connect('http://localhost:9092');

            socket.on('connect', function() {
                    output('<span class="connect-msg">Client has connected to the server!</span>');
            });

**React Native code: (Not working)**

this.socket = io.connect('http://localhost:9092',{
reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']});
this.socket.on('connect',function(e){
console.log("on Connect");
})

this.socket.on('connect_error', (err) => {
  console.log(err)
});

**Error:**

17:15
websocket error

Stack trace:
node_modules/engine.io-client/lib/transport.js:67:22 in onError
node_modules/engine.io-client/lib/transports/websocket.js:157:17 in onerror
node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
node_modules/react-native/Libraries/WebSocket/WebSocket.js:290:10 in
node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:191:12 in emit
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue

```

I am using https://github.com/mrniko/netty-socketio in backend.

It may be needed to connect to a non-localhost URL (i.e. your computer's IP) within React Native: certainly in Android and possibly in iOS depending on which simulator is being used.

If that still doesn't work, then it's worth trying the transports: ['polling'] option to see if it really is the WebSocket transport in particular that's not working, or if it's a more general network connection problem.

@benhjames I am facing a strange issue. I am using https://github.com/mrniko/netty-socketio in the backend and if I am using Vanilla JS as above mentioned it's working perfectly fine but if I am using with react-native, server showing a successful connection but in react-native, I am getting connection-error as below :

server error

Stack trace:
  node_modules/engine.io-client/lib/socket.js:453:28 in onPacket
  node_modules/engine.io-client/lib/socket.js:276:18 in <unknown>
  node_modules/component-emitter/index.js:133:25 in emit
  node_modules/engine.io-client/lib/transport.js:148:12 in onPacket
  node_modules/engine.io-client/lib/transports/polling.js:144:18 in callback
  node_modules/engine.io-parser/lib/browser.js:384:20 in decodePayload
  node_modules/engine.io-client/lib/transports/polling.js:148:23 in onData
  node_modules/engine.io-client/lib/transports/polling-xhr.js:127:16 in <unknown>
  node_modules/component-emitter/index.js:133:25 in emit
  node_modules/engine.io-client/lib/transports/polling-xhr.js:300:12 in onData
  node_modules/engine.io-client/lib/transports/polling-xhr.js:367:16 in onLoad
  node_modules/engine.io-client/lib/transports/polling-xhr.js:253:10 in onreadystatechange
  node_modules/event-target-shim/lib/event-target.js:172:43 in dispatchEvent
  node_modules/react-native/Libraries/Network/XMLHttpRequest.js:570:23 in setReadyState
  node_modules/react-native/Libraries/Network/XMLHttpRequest.js:392:25 in __didCompleteResponse
  node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:191:12 in emit
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:349:47 in __callFunction
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:106:26 in <unknown>
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
  node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:105:17 in callFunctionReturnFlushedQueue
  ...

PS:
With NodeJS it's working perfectly fine without any error.

Please see the above answer!

Thanks, @benhjames for your support, It's working now. https://github.com/mrniko/netty-socketio/issues/614

I have the same problem no matter if I chose websockets or polling. Its either a websocket_error or a xhr poll error.

The URL is an IP (http://192.168.1.112:3000) and I am connecting from a physical phone to a computer on the same local network using React Native Expo.

I can help out if you need more stack traces or info...

socket.io 2.2.0 // both client and server
engine.io 3.3.2 // both client and server

Sounds like a problem outside of socket.io, if both the websocket and polling transport aren't working. You may want to try:

• Connecting to the socket.io server outside React Native, using the socket.io client in a browser. If that also doesn't work, then there's likely a problem with the server.
• Making a normal fetch request to your server. If that doesn't work, then there's likely a problem with the network or React Native environment.

Gonna try the first test, the normal fetch works

EDIT: it looks like a CORS related problem. If I try to connect a simple JS client I get:

Access to XMLHttpRequest at 'http://192.168.1.112:3000/socket.io/?EIO=3&transport=polling&t=MfV8vhI' from origin 'http://192.168.1.112:5000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Any advice on how to setup this?

try last version from github, like this, solved my issues with RN android:

npm i socketio/engine.io-client#3.3.2 -S

Nothing seems like to be working with react native 0.60

Android release build is not working when using RN 0.60.5

Tried socket.io-client versions 2.0.4, 2.1.1, 2.2.0.

Tried yarn add socketio/engine.io-client#3.3.2

See #1305 - on Android you need to use https or set the usesCleartextTraffic attribute in AndroidManifest

try v2.3

I tried with Expo SDK v34 and v35 (RN 0.59) and had to downgrade socket.io-client to 1.7.2 (yarn add [email protected]) as other versions (2.1.1, 2.1.0, 2.2.0) did NOT work. I didn't try 2.3.0, now that it works I don't want troubles :-)

Hi @lionbur , as I know there are many mini version of 0.59. Which version are you using? 0.59.9?

Thank you in advance!