Flask-SocketIO: React Native: unable to establish the socket connection

The problem

I’m trying to connect to a Flast socket.io server through React Native and the connection does not get established.

The library versions I use

React Version: 16.3.1
React Native Version: 0.55.3
Socket.io-client Version: 2.1.1

Flast socket.io server terminal output

The Flask socket.io server keeps printing the following message to the terminal. screenshot from 2018-06-06 20-51-38

My React-Native socket.io client handler

this.socket = io(`http://localhost:5000`);

this.socket.on('connect', () => {
   console.log('connected')
});

Expected behavior

Print ‘connected’ to the debugger console.

Actual behavior

Nothing happens, no errors.

Further information

I’m able to connect to the same Flask socket.io server using an AngularJS app.
I’m pretty sure that there’s no issue with the socket.io client on the React Native app since, I’m able to connect to NodeJS socket.io servers using that library without any issues.

Can someone help me with this issue please?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 24 (11 by maintainers)

Most upvoted comments

There is some sort of incompatibility in the long-polling transport. Using WebSocket seems to work though. Change the connection statement to:

this.socket = io(`http://10.0.2.2:5000/chat`, {transports: ['websocket']});

I couldn’t find a way to enable logging in the socket.io client, the method that is used when it runs in the browser does not seems to be supported (it involves writing variable in `localStorage’). So I could not find out what’s the problem with long-polling.

+25

miguelgrinberg on Jun 7, 2018

Thanks for providing the code. I’m not sure exactly why the react native client misbehaves, but it is clear that it isn’t working right. Here is a POST request sent by a working client:

127.0.0.1 - - [06/Jun/2018 10:43:54] "POST /socket.io/?EIO=3&transport=polling&t=MFMCgUI&sid=0826e6e4318e4274ab7dd325af5c30fb HTTP/1.1" 200 219 0.000712

And here is the equivalent POST request, sent from the Socket.IO client inside the react native app:

127.0.0.1 - - [06/Jun/2018 10:43:32] "POST /socket.io/?EIO=3&transport=polling&t=MFMCb8g HTTP/1.1" 400 218 0.000664

The key difference is that react native is not sending the sid query string argument. This is what identifies the client in the Socket.IO protocol. The server rightly responds with a 400 error, because the client isn’t identifying itself.

I will need to debug this some more to figure out why this client is not following the expected behavior.

miguelgrinberg on Jun 6, 2018

@miguelgrinberg I have created a sample repository here with the following setup guidelines.

Clone the repo using git cline --recurse-submodules https://github.com/gayashanbc/react-native-flask-socketio.git
Navigate to the ‘server’ folder.
Make sure that you have the reuired libraries installed and run the command python3 chat.py
Navigate back to the root folder
Run yarn install or npm install
Make sure you have React Native CLI installed and run react-native run-android or react-native run-ios

Notice

Based on your device change the host port accordingly in the App.js file.

  constructor(props){
    super(props);
    this.socket = io(`http://10.0.3.2:5000/chat`);

    this.socket.on('connect', () => {
      console.log('connected')
    });
  }

Genymotion

10.0.3.2

Android Studio Emulator

10.0.2.2

External device

obtain the IP of your computer. (Computer and the device should be on the same network)

gayashanbc on Jun 6, 2018