version 2.2 does not work with react native #1254

ganmor · 2018-12-21T09:51:28Z

Reverting to 2.1.1 fixes the problem.

I suspect it has something to do with the new cors management changes.
Manually Setting origins does not seem to do anything.

It magically start working when launching the react native debugger.

Config

reconnection: true,
reconnectionDelay: 500,
jsonp: false,
reconnectionAttempts: Infinity,
transports: ['websocket']

Setup

OS: iOS
browser: react-native
socket.io version: 2.2.0

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

dangkhoa2708 · 2018-12-24T07:44:35Z

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

saeho · 2018-12-31T07:55:16Z

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

nhuttrung · 2019-01-20T13:05:54Z

I am also facing the same. issue

Reverting to 2.1.1 works for me.

dhavalsoni2001 · 2019-03-19T20:38:00Z

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

darrachequesne · 2019-03-20T14:18:19Z

It should be fixed by socketio/engine.io-client#607.

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

bensalilijames · 2019-03-20T14:23:53Z

Yep, I'm currently running socket.io-client@2.2.0 (which has pulled in engine.io-client@3.3.2) 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. 😃

dhavalsoni2001 · 2019-03-20T15:41:29Z

@benhjames @darrachequesne I have used socket.io-client@2.2.0 (which has pulled in engine.io-client@3.3.2) 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

bensalilijames · 2019-03-20T15:52:49Z

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

dhavalsoni2001 · 2019-03-20T17:26:44Z

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

bensalilijames · 2019-03-20T17:31:23Z

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!

darrachequesne · 2019-03-26T07:20:19Z

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

dhavalsoni2001 · 2019-03-26T12:49:26Z

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

bensalilijames · 2019-03-26T12:53:38Z

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

dhavalsoni2001 · 2019-03-26T12:55:58Z

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>

bensalilijames · 2019-03-26T13:02:26Z

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?

dhavalsoni2001 · 2019-03-26T14:09:27Z

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

bensalilijames · 2019-03-26T14:48:57Z

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

dhavalsoni2001 · 2019-03-29T19:04:42Z

@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 src="js/socket.io/socket.io.js"></script>

       <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 <unknown>
  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

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

bensalilijames · 2019-04-01T12:33:40Z

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.

dhavalsoni2001 · 2019-04-06T12:17:05Z

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

bensalilijames · 2019-04-06T14:48:35Z

Please see the above answer!

dhavalsoni2001 · 2019-04-06T21:35:00Z

Thanks, @benhjames for your support, It's working now. mrniko/netty-socketio#614

pastinepolenta · 2019-04-27T13:30:07Z

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

bensalilijames · 2019-04-27T13:58:34Z

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.

pastinepolenta · 2019-04-27T14:02:14Z

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?

diegolaciar · 2019-07-15T21:34:38Z

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

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

aje · 2019-09-06T08:47:17Z

Nothing seems like to be working with react native 0.60

anttirauh · 2019-09-17T12:18:42Z

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

airman00 · 2019-09-26T16:27:03Z

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

ghost · 2019-09-29T16:26:11Z

try v2.3

lionbur · 2019-10-14T01:03:32Z

I tried with Expo SDK v34 and v35 (RN 0.59) and had to downgrade socket.io-client to 1.7.2 (yarn add socket.io-client@1.7.2) 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 :-)

LuongTruong · 2019-11-27T09:35:35Z

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!

darrachequesne · 2021-01-28T14:12:55Z

For future readers, please check the code example here: https://github.com/socketio/socket.io/tree/master/examples/react-native

aqilhex · 2021-03-16T23:51:26Z

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!

You saved my head from headache!

martincarrera mentioned this issue Mar 5, 2019

Fix react native compatibility autonomoussoftware/metronome-wallet-core#9

Merged

ganmor changed the title ~~versionn 2.2 does not work with react native~~ version 2.2 does not work with react native Mar 20, 2019

darrachequesne closed this as completed Jan 28, 2021

snyk-bot mentioned this issue May 24, 2021

[Snyk] Upgrade ts-loader from 8.0.12 to 9.1.1 baby636/socket.io-client#6

Open

snyk-bot mentioned this issue Sep 16, 2021

[Snyk] Fix for 1 vulnerabilities baby636/socket.io-client#7

Open

baby636 mentioned this issue Nov 4, 2022

[Snyk] Fix for 1 vulnerabilities baby636/socket.io-client#19

Open

baby636 mentioned this issue Dec 25, 2022

[Snyk] Fix for 1 vulnerabilities baby636/socket.io-client#21

Open

baby636 mentioned this issue Nov 28, 2023

[Snyk] Fix for 3 vulnerabilities baby636/socket.io-client#27

Open

baby636 mentioned this issue Dec 20, 2023

[Snyk] Fix for 1 vulnerabilities baby636/socket.io-client#30

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

version 2.2 does not work with react native #1254

version 2.2 does not work with react native #1254

ganmor commented Dec 21, 2018 •

edited

dangkhoa2708 commented Dec 24, 2018 •

edited

saeho commented Dec 31, 2018

nhuttrung commented Jan 20, 2019

dhavalsoni2001 commented Mar 19, 2019

darrachequesne commented Mar 20, 2019

bensalilijames commented Mar 20, 2019 •

edited

dhavalsoni2001 commented Mar 20, 2019

bensalilijames commented Mar 20, 2019

dhavalsoni2001 commented Mar 20, 2019

bensalilijames commented Mar 20, 2019

darrachequesne commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 29, 2019 •

edited

bensalilijames commented Apr 1, 2019

dhavalsoni2001 commented Apr 6, 2019

bensalilijames commented Apr 6, 2019

dhavalsoni2001 commented Apr 6, 2019

pastinepolenta commented Apr 27, 2019 •

edited

bensalilijames commented Apr 27, 2019

pastinepolenta commented Apr 27, 2019 •

edited

diegolaciar commented Jul 15, 2019

aje commented Sep 6, 2019

anttirauh commented Sep 17, 2019 •

edited

airman00 commented Sep 26, 2019

ghost commented Sep 29, 2019

lionbur commented Oct 14, 2019

LuongTruong commented Nov 27, 2019

darrachequesne commented Jan 28, 2021

aqilhex commented Mar 16, 2021

version 2.2 does not work with react native #1254

version 2.2 does not work with react native #1254

Comments

ganmor commented Dec 21, 2018 • edited

Config

Setup

dangkhoa2708 commented Dec 24, 2018 • edited

saeho commented Dec 31, 2018

nhuttrung commented Jan 20, 2019

dhavalsoni2001 commented Mar 19, 2019

darrachequesne commented Mar 20, 2019

bensalilijames commented Mar 20, 2019 • edited

dhavalsoni2001 commented Mar 20, 2019

bensalilijames commented Mar 20, 2019

dhavalsoni2001 commented Mar 20, 2019

bensalilijames commented Mar 20, 2019

darrachequesne commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 26, 2019

bensalilijames commented Mar 26, 2019

dhavalsoni2001 commented Mar 29, 2019 • edited

bensalilijames commented Apr 1, 2019

dhavalsoni2001 commented Apr 6, 2019

bensalilijames commented Apr 6, 2019

dhavalsoni2001 commented Apr 6, 2019

pastinepolenta commented Apr 27, 2019 • edited

bensalilijames commented Apr 27, 2019

pastinepolenta commented Apr 27, 2019 • edited

diegolaciar commented Jul 15, 2019

aje commented Sep 6, 2019

anttirauh commented Sep 17, 2019 • edited

airman00 commented Sep 26, 2019

ghost commented Sep 29, 2019

lionbur commented Oct 14, 2019

LuongTruong commented Nov 27, 2019

darrachequesne commented Jan 28, 2021

aqilhex commented Mar 16, 2021

ganmor commented Dec 21, 2018 •

edited

dangkhoa2708 commented Dec 24, 2018 •

edited

bensalilijames commented Mar 20, 2019 •

edited

dhavalsoni2001 commented Mar 29, 2019 •

edited

pastinepolenta commented Apr 27, 2019 •

edited

pastinepolenta commented Apr 27, 2019 •

edited

anttirauh commented Sep 17, 2019 •

edited