Is it possible to combine React Native with socket.io

Question

I was working on an app with Phonegap + React.js and Socket.io. However, then React-Native got released and the native feel is amazing.

I tried getting socket.io-client working with React Native, but unfortunately without much success. I did some research and I'm getting the exact same errors as described in this issue: https://github.com/facebook/react-native/issues/375

The comments on the issue said to try and use the fetch API to fetch JS modules, but I think I'm doing this wrong:

var socketScript;    
fetch('https://cdn.socket.io/socket.io-1.2.0.js')
    .then(function(response) {
        socketScript = response._bodyText;
    }).done(function() {
        var socket = socketScript.io();
    });

This returns an undefined is not a function.

Is there any way to make socket.io-client work with React Native? Or am I looking at this the wrong way? Perhaps there are other, better suited solutions?

Solution 1

For those like me stumbling across this question looking how to integrate socket.io with react native.

Since React Native has supported websockets for a short time now, you can now set up web sockets really easily with Socket.io. All you have to do is the following

1. npm install socket.io-client
2. first import react-native
3. assign window.navigator.userAgent = 'react-native';
4. import socket.io-client/socket.io
5. in your constructor assign this.socket = io('localhost:3001', {jsonp: false});

So in all it should look like this after npm installing socket.io-client:

import React from 'react-native';

// ... [other imports]

import './UserAgent';

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.socket = io('localhost:3001', {jsonp: false});
  }

  // now you can use sockets with this.socket.io(...)
  // or any other functionality within socket.io!

  ...
}

and then in 'UserAgent.js':

window.navigator.userAgent = 'react-native';

Note: because ES6 module imports are hoisted, we can't make the userAgent assignment in the same file as the react-native and socket.io imports, hence the separate module.

EDIT:

The above solution should work, but in the case it doesn't try create a separate socketConfig.js file. In there import anything that is needed, including const io = require('socket.io-client/socket.io'); and having window.navigator.userAgent = 'react-native'; BEFORE requiring socket.io-client. Then you can connect your socket there and have all listeners in one place. Then actions or functions can be imported into the config file and execute when a listener receives data.

Solution 2

Now, if you want to use socket.io in your RN app, you must use this code:

if (!window.location) {
    // App is running in simulator
    window.navigator.userAgent = 'ReactNative';
}

// This must be below your `window.navigator` hack above
const io = require('socket.io-client/socket.io');
const socket = io('http://chat.feathersjs.com', {
  transports: ['websocket'] // you need to explicitly tell it to use websockets
});

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

Big thanks for Eric Kryski.

Solution 3

import { io } from 'socket.io-client'
const socket = io(`${SOCKET_URL}:${SOCKET_PORT}`)

Important! SOCKET_URL should be your local IP address, not localhost or 127.0.0.1.

To check your local IP:
Mac / Linux: run ifconfig in terminal
Windows: run ipconfig --all in shell

Should be something like: const socket = io('http://10.0.1.6:3000', {transports: ['websocket']})

Solution 4

Short of a polyfill for the WebSocket API, you can create a native module that makes use of web-sockets and send events to Javascript using eventDispatcher.

On the Javascript side, you would subscribe to these events using DeviceEventEmitter.addListener.

For more information on using native modules, see the react-native doc on the topic

Solution 5

Edit Feb 2016: React Native now supports Web Sockets so some of this advice is invalid.

You've misinterpreted the Github issue I'm afraid. In it, aackerman says:

For this specific case you'll likely want to use the fetch API which is provided by the environment.

He doesn't say that you should use the fetch API to grab remote JS modules. What he's suggesting is that the fetch API be used in place of the built-in Node.JS request module, which isn't available in React Native.

Let's look at your code:

socketScript = response._bodyText;
var socket = socketScript.io();

Think about this for a second - socketScript isn't a JavaScript object, it's a string - therefore how can you call the io method on it?

What you'd really need to do is parse _bodyText before using it (in a browser you could use eval), but then you'd still have the problem that while React Native has a polyfill for XHR and the fetch API, it doesn't yet have one for the WebSocket API. Unless I'm mistaken, this means you're stuck.

I suggest opening a Github issue to request a WebSocket API polyfill and ask for the thoughts of the community. Someone might have a workaround.

View more solutions